How to make header of my chat container be scrollable for every element in it and not overlap
1
My goal here is to make the header of this chatbox be scrollable when the number of elements exceeds the maximum width. I have currently tried to apply the word wrap (no wrap) however that doesn't work and positioning it to absolute seems to break my chats interface and still doesn't work. I need it to be scrollable instead of breaking onto new lines. How do I do this?
HTML Code:
.chatHeader {
height: auto;
width: 100%;
border-bottom: 2px solid black;
background: rgba(0, 0, 0, 1);
overflow-x: auto;
display: inline-block;
}
.chatHeaderItem {
color: white;
padding: 10px;
padding-left: 15px;
padding-right: 15px;
font-size: 14px;
display: inline-block;
transition: all 0.20s linear;
margin: 0;
text-align: center;
}
.chatHeaderItem:hover {
background: rgba(255, 100, 0, 0.3);
cursor: pointer;
}
.chatContainer {
border: 2px solid black;
position: relative;
font-size: 0;
}
.chatWindow {
max-height: 300px;
overflow-y: auto;
background: rgba(0, 0, 0, 0.3);
padding: 8px;
padding-left: 14px;
padding-right: 14px;
color: white;
font-size: 12px;
}
.chatFooter {
background: rgba(0, 0, 0, 0);
color: white;
height: 40px;
}
.chatFooterLabel {
background: rgba(0, 0, 0, 1);
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 0;
width: calc(25% - 20px);
font-size: 14px;
height: calc(100% - 20px);
float: right;
transition: all 0.20s linear;
}
.chatFooterLabel:hover {
cursor: pointer;
background: rgba(255, 100, 0, 0.3);
}
.chatInputField {
background: rgba(0, 0, 0, 0.6);
padding: 10px;
margin: 0;
display: inline-block;
border: none;
width: calc(75% - 20px);
font-size: 14px;
color: white;
float: left;
height: calc(100% - 20px);
transition: all 0.20s linear;
}
.chatMessage {
display: block;
word-wrap: break-word;
}
.chatTime {
color: rgba(250, 250, 230, 0.4);
font-size: 10px;
}
.chatUser {
color: #747474;
text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px black;
}
.chatXbox {
color: #00FF74;
text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px #4cff9d;
}
.chatPlaystation {
color: #4285f4;
text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px #7aa9f7;
}
.chatPC {
color: #6441a4;
text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px #927abf;
}
.chatMod {
color: #FFD700;
text-shadow: 1px 1px 2px black, 0 0 7px #ffdb19, 0 0 5px #ffe34c;
}
.chatAdmin {
color: #ff5719;
text-shadow: 1px 1px 2px black, 0 0 7px orange, 0 0 5px darkorange;
}
.chatRoles {
font-size: 10px;
background: black;
padding: 2px;
padding-left: 16px;
padding-right: 16px;
}<div class="chatContainer" id="chatContainer">
<div class="chatHeader">
<div class="chatHeaderItem">Global</div>
<div class="chatHeaderItem">xExemplaryx</div>
<div class="chatHeaderItem">Ninja</div>
<div class="chatHeaderItem">NotTfue</div>
<div class="chatHeaderItem">Myth</div>
<div class="chatHeaderItem">Global</div>
<div class="chatHeaderItem">xExemplaryx</div>
<div class="chatHeaderItem">Ninja</div>
<div class="chatHeaderItem">NotTfue</div>
<div class="chatHeaderItem">Myth</div>
</div>
<div class="chatWindow">
<div class="chatMessage"><span class="chatTime">[2:41 AM] </span><span class="chatPlaystation">SaltyyPP</span>: anyone wanna do some duo scrims NAE?</div>
<div class="chatMessage"><span class="chatTime">[2:44 AM] </span><span class="chatXbox">Nexus</span>: anyone wanna do sms NAE?</div>
<div class="chatMessage"><span class="chatTime">[2:41 AM] </span><span class="chatPC">Dusty</span>: anyone wanna do some duo scrims NAE?</div>
</div>
<div class="chatFooter">
<input type="text" class="chatInputField" />
<div class="chatFooterLabel">Send</div>
</div>
<div class="chatRoles">
Roles: <span class="chatAdmin">Admin</span>, <span class="chatMod">Moderator</span>, <span class="chatPlaystation">Playstation</span>, <span class="chatPC">PC</span>, <span class="chatXbox">Xbox</span>, <span class="chatUser">User</span>
</div>
</div>Live JSFiddle Example: http://jsfiddle.net/sjac7du9/
html css
edited Jan 16 at 16:26
ksav
5,32421331
asked Nov 19 '18 at 21:02
Fortnite MatcherFortnite Matcher
162
add a comment |
1
My goal here is to make the header of this chatbox be scrollable when the number of elements exceeds the maximum width. I have currently tried to apply the word wrap (no wrap) however that doesn't work and positioning it to absolute seems to break my chats interface and still doesn't work. I need it to be scrollable instead of breaking onto new lines. How do I do this?
HTML Code:
.chatHeader {
height: auto;
width: 100%;
border-bottom: 2px solid black;
background: rgba(0, 0, 0, 1);
overflow-x: auto;
display: inline-block;
}
.chatHeaderItem {
color: white;
padding: 10px;
padding-left: 15px;
padding-right: 15px;
font-size: 14px;
display: inline-block;
transition: all 0.20s linear;
margin: 0;
text-align: center;
}
.chatHeaderItem:hover {
background: rgba(255, 100, 0, 0.3);
cursor: pointer;
}
.chatContainer {
border: 2px solid black;
position: relative;
font-size: 0;
}
.chatWindow {
max-height: 300px;
overflow-y: auto;
background: rgba(0, 0, 0, 0.3);
padding: 8px;
padding-left: 14px;
padding-right: 14px;
color: white;
font-size: 12px;
}
.chatFooter {
background: rgba(0, 0, 0, 0);
color: white;
height: 40px;
}
.chatFooterLabel {
background: rgba(0, 0, 0, 1);
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 0;
width: calc(25% - 20px);
font-size: 14px;
height: calc(100% - 20px);
float: right;
transition: all 0.20s linear;
}
.chatFooterLabel:hover {
cursor: pointer;
background: rgba(255, 100, 0, 0.3);
}
.chatInputField {
background: rgba(0, 0, 0, 0.6);
padding: 10px;
margin: 0;
display: inline-block;
border: none;
width: calc(75% - 20px);
font-size: 14px;
color: white;
float: left;
height: calc(100% - 20px);
transition: all 0.20s linear;
}
.chatMessage {
display: block;
word-wrap: break-word;
}
.chatTime {
color: rgba(250, 250, 230, 0.4);
font-size: 10px;
}
.chatUser {
color: #747474;
text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px black;
}
.chatXbox {
color: #00FF74;
text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px #4cff9d;
}
.chatPlaystation {
color: #4285f4;
text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px #7aa9f7;
}
.chatPC {
color: #6441a4;
text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px #927abf;
}
.chatMod {
color: #FFD700;
text-shadow: 1px 1px 2px black, 0 0 7px #ffdb19, 0 0 5px #ffe34c;
}
.chatAdmin {
color: #ff5719;
text-shadow: 1px 1px 2px black, 0 0 7px orange, 0 0 5px darkorange;
}
.chatRoles {
font-size: 10px;
background: black;
padding: 2px;
padding-left: 16px;
padding-right: 16px;
}<div class="chatContainer" id="chatContainer">
<div class="chatHeader">
<div class="chatHeaderItem">Global</div>
<div class="chatHeaderItem">xExemplaryx</div>
<div class="chatHeaderItem">Ninja</div>
<div class="chatHeaderItem">NotTfue</div>
<div class="chatHeaderItem">Myth</div>
<div class="chatHeaderItem">Global</div>
<div class="chatHeaderItem">xExemplaryx</div>
<div class="chatHeaderItem">Ninja</div>
<div class="chatHeaderItem">NotTfue</div>
<div class="chatHeaderItem">Myth</div>
</div>
<div class="chatWindow">
<div class="chatMessage"><span class="chatTime">[2:41 AM] </span><span class="chatPlaystation">SaltyyPP</span>: anyone wanna do some duo scrims NAE?</div>
<div class="chatMessage"><span class="chatTime">[2:44 AM] </span><span class="chatXbox">Nexus</span>: anyone wanna do sms NAE?</div>
<div class="chatMessage"><span class="chatTime">[2:41 AM] </span><span class="chatPC">Dusty</span>: anyone wanna do some duo scrims NAE?</div>
</div>
<div class="chatFooter">
<input type="text" class="chatInputField" />
<div class="chatFooterLabel">Send</div>
</div>
<div class="chatRoles">
Roles: <span class="chatAdmin">Admin</span>, <span class="chatMod">Moderator</span>, <span class="chatPlaystation">Playstation</span>, <span class="chatPC">PC</span>, <span class="chatXbox">Xbox</span>, <span class="chatUser">User</span>
</div>
</div>Live JSFiddle Example: http://jsfiddle.net/sjac7du9/
html css
edited Jan 16 at 16:26
ksav
5,32421331
asked Nov 19 '18 at 21:02
Fortnite MatcherFortnite Matcher
162
add a comment |
1
1
1
My goal here is to make the header of this chatbox be scrollable when the number of elements exceeds the maximum width. I have currently tried to apply the word wrap (no wrap) however that doesn't work and positioning it to absolute seems to break my chats interface and still doesn't work. I need it to be scrollable instead of breaking onto new lines. How do I do this?
HTML Code:
.chatHeader {
height: auto;
width: 100%;
border-bottom: 2px solid black;
background: rgba(0, 0, 0, 1);
overflow-x: auto;
display: inline-block;
}
.chatHeaderItem {
color: white;
padding: 10px;
padding-left: 15px;
padding-right: 15px;
font-size: 14px;
display: inline-block;
transition: all 0.20s linear;
margin: 0;
text-align: center;
}
.chatHeaderItem:hover {
background: rgba(255, 100, 0, 0.3);
cursor: pointer;
}
.chatContainer {
border: 2px solid black;
position: relative;
font-size: 0;
}
.chatWindow {
max-height: 300px;
overflow-y: auto;
background: rgba(0, 0, 0, 0.3);
padding: 8px;
padding-left: 14px;
padding-right: 14px;
color: white;
font-size: 12px;
}
.chatFooter {
background: rgba(0, 0, 0, 0);
color: white;
height: 40px;
}
.chatFooterLabel {
background: rgba(0, 0, 0, 1);
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 0;
width: calc(25% - 20px);
font-size: 14px;
height: calc(100% - 20px);
float: right;
transition: all 0.20s linear;
}
.chatFooterLabel:hover {
cursor: pointer;
background: rgba(255, 100, 0, 0.3);
}
.chatInputField {
background: rgba(0, 0, 0, 0.6);
padding: 10px;
margin: 0;
display: inline-block;
border: none;
width: calc(75% - 20px);
font-size: 14px;
color: white;
float: left;
height: calc(100% - 20px);
transition: all 0.20s linear;
}
.chatMessage {
display: block;
word-wrap: break-word;
}
.chatTime {
color: rgba(250, 250, 230, 0.4);
font-size: 10px;
}
.chatUser {
color: #747474;
text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px black;
}
.chatXbox {
color: #00FF74;
text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px #4cff9d;
}
.chatPlaystation {
color: #4285f4;
text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px #7aa9f7;
}
.chatPC {
color: #6441a4;
text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px #927abf;
}
.chatMod {
color: #FFD700;
text-shadow: 1px 1px 2px black, 0 0 7px #ffdb19, 0 0 5px #ffe34c;
}
.chatAdmin {
color: #ff5719;
text-shadow: 1px 1px 2px black, 0 0 7px orange, 0 0 5px darkorange;
}
.chatRoles {
font-size: 10px;
background: black;
padding: 2px;
padding-left: 16px;
padding-right: 16px;
}<div class="chatContainer" id="chatContainer">
<div class="chatHeader">
<div class="chatHeaderItem">Global</div>
<div class="chatHeaderItem">xExemplaryx</div>
<div class="chatHeaderItem">Ninja</div>
<div class="chatHeaderItem">NotTfue</div>
<div class="chatHeaderItem">Myth</div>
<div class="chatHeaderItem">Global</div>
<div class="chatHeaderItem">xExemplaryx</div>
<div class="chatHeaderItem">Ninja</div>
<div class="chatHeaderItem">NotTfue</div>
<div class="chatHeaderItem">Myth</div>
</div>
<div class="chatWindow">
<div class="chatMessage"><span class="chatTime">[2:41 AM] </span><span class="chatPlaystation">SaltyyPP</span>: anyone wanna do some duo scrims NAE?</div>
<div class="chatMessage"><span class="chatTime">[2:44 AM] </span><span class="chatXbox">Nexus</span>: anyone wanna do sms NAE?</div>
<div class="chatMessage"><span class="chatTime">[2:41 AM] </span><span class="chatPC">Dusty</span>: anyone wanna do some duo scrims NAE?</div>
</div>
<div class="chatFooter">
<input type="text" class="chatInputField" />
<div class="chatFooterLabel">Send</div>
</div>
<div class="chatRoles">
Roles: <span class="chatAdmin">Admin</span>, <span class="chatMod">Moderator</span>, <span class="chatPlaystation">Playstation</span>, <span class="chatPC">PC</span>, <span class="chatXbox">Xbox</span>, <span class="chatUser">User</span>
</div>
</div>Live JSFiddle Example: http://jsfiddle.net/sjac7du9/
html css
edited Jan 16 at 16:26
ksav
5,32421331
asked Nov 19 '18 at 21:02
Fortnite MatcherFortnite Matcher
162
My goal here is to make the header of this chatbox be scrollable when the number of elements exceeds the maximum width. I have currently tried to apply the word wrap (no wrap) however that doesn't work and positioning it to absolute seems to break my chats interface and still doesn't work. I need it to be scrollable instead of breaking onto new lines. How do I do this?
HTML Code:
.chatHeader {
height: auto;
width: 100%;
border-bottom: 2px solid black;
background: rgba(0, 0, 0, 1);
overflow-x: auto;
display: inline-block;
}
.chatHeaderItem {
color: white;
padding: 10px;
padding-left: 15px;
padding-right: 15px;
font-size: 14px;
display: inline-block;
transition: all 0.20s linear;
margin: 0;
text-align: center;
}
.chatHeaderItem:hover {
background: rgba(255, 100, 0, 0.3);
cursor: pointer;
}
.chatContainer {
border: 2px solid black;
position: relative;
font-size: 0;
}
.chatWindow {
max-height: 300px;
overflow-y: auto;
background: rgba(0, 0, 0, 0.3);
padding: 8px;
padding-left: 14px;
padding-right: 14px;
color: white;
font-size: 12px;
}
.chatFooter {
background: rgba(0, 0, 0, 0);
color: white;
height: 40px;
}
.chatFooterLabel {
background: rgba(0, 0, 0, 1);
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 0;
width: calc(25% - 20px);
font-size: 14px;
height: calc(100% - 20px);
float: right;
transition: all 0.20s linear;
}
.chatFooterLabel:hover {
cursor: pointer;
background: rgba(255, 100, 0, 0.3);
}
.chatInputField {
background: rgba(0, 0, 0, 0.6);
padding: 10px;
margin: 0;
display: inline-block;
border: none;
width: calc(75% - 20px);
font-size: 14px;
color: white;
float: left;
height: calc(100% - 20px);
transition: all 0.20s linear;
}
.chatMessage {
display: block;
word-wrap: break-word;
}
.chatTime {
color: rgba(250, 250, 230, 0.4);
font-size: 10px;
}
.chatUser {
color: #747474;
text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px black;
}
.chatXbox {
color: #00FF74;
text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px #4cff9d;
}
.chatPlaystation {
color: #4285f4;
text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px #7aa9f7;
}
.chatPC {
color: #6441a4;
text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px #927abf;
}
.chatMod {
color: #FFD700;
text-shadow: 1px 1px 2px black, 0 0 7px #ffdb19, 0 0 5px #ffe34c;
}
.chatAdmin {
color: #ff5719;
text-shadow: 1px 1px 2px black, 0 0 7px orange, 0 0 5px darkorange;
}
.chatRoles {
font-size: 10px;
background: black;
padding: 2px;
padding-left: 16px;
padding-right: 16px;
}<div class="chatContainer" id="chatContainer">
<div class="chatHeader">
<div class="chatHeaderItem">Global</div>
<div class="chatHeaderItem">xExemplaryx</div>
<div class="chatHeaderItem">Ninja</div>
<div class="chatHeaderItem">NotTfue</div>
<div class="chatHeaderItem">Myth</div>
<div class="chatHeaderItem">Global</div>
<div class="chatHeaderItem">xExemplaryx</div>
<div class="chatHeaderItem">Ninja</div>
<div class="chatHeaderItem">NotTfue</div>
<div class="chatHeaderItem">Myth</div>
</div>
<div class="chatWindow">
<div class="chatMessage"><span class="chatTime">[2:41 AM] </span><span class="chatPlaystation">SaltyyPP</span>: anyone wanna do some duo scrims NAE?</div>
<div class="chatMessage"><span class="chatTime">[2:44 AM] </span><span class="chatXbox">Nexus</span>: anyone wanna do sms NAE?</div>
<div class="chatMessage"><span class="chatTime">[2:41 AM] </span><span class="chatPC">Dusty</span>: anyone wanna do some duo scrims NAE?</div>
</div>
<div class="chatFooter">
<input type="text" class="chatInputField" />
<div class="chatFooterLabel">Send</div>
</div>
<div class="chatRoles">
Roles: <span class="chatAdmin">Admin</span>, <span class="chatMod">Moderator</span>, <span class="chatPlaystation">Playstation</span>, <span class="chatPC">PC</span>, <span class="chatXbox">Xbox</span>, <span class="chatUser">User</span>
</div>
</div>Live JSFiddle Example: http://jsfiddle.net/sjac7du9/
.chatHeader {
height: auto;
width: 100%;
border-bottom: 2px solid black;
background: rgba(0, 0, 0, 1);
overflow-x: auto;
display: inline-block;
}
.chatHeaderItem {
color: white;
padding: 10px;
padding-left: 15px;
padding-right: 15px;
font-size: 14px;
display: inline-block;
transition: all 0.20s linear;
margin: 0;
text-align: center;
}
.chatHeaderItem:hover {
background: rgba(255, 100, 0, 0.3);
cursor: pointer;
}
.chatContainer {
border: 2px solid black;
position: relative;
font-size: 0;
}
.chatWindow {
max-height: 300px;
overflow-y: auto;
background: rgba(0, 0, 0, 0.3);
padding: 8px;
padding-left: 14px;
padding-right: 14px;
color: white;
font-size: 12px;
}
.chatFooter {
background: rgba(0, 0, 0, 0);
color: white;
height: 40px;
}
.chatFooterLabel {
background: rgba(0, 0, 0, 1);
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 0;
width: calc(25% - 20px);
font-size: 14px;
height: calc(100% - 20px);
float: right;
transition: all 0.20s linear;
}
.chatFooterLabel:hover {
cursor: pointer;
background: rgba(255, 100, 0, 0.3);
}
.chatInputField {
background: rgba(0, 0, 0, 0.6);
padding: 10px;
margin: 0;
display: inline-block;
border: none;
width: calc(75% - 20px);
font-size: 14px;
color: white;
float: left;
height: calc(100% - 20px);
transition: all 0.20s linear;
}
.chatMessage {
display: block;
word-wrap: break-word;
}
.chatTime {
color: rgba(250, 250, 230, 0.4);
font-size: 10px;
}
.chatUser {
color: #747474;
text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px black;
}
.chatXbox {
color: #00FF74;
text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px #4cff9d;
}
.chatPlaystation {
color: #4285f4;
text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px #7aa9f7;
}
.chatPC {
color: #6441a4;
text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px #927abf;
}
.chatMod {
color: #FFD700;
text-shadow: 1px 1px 2px black, 0 0 7px #ffdb19, 0 0 5px #ffe34c;
}
.chatAdmin {
color: #ff5719;
text-shadow: 1px 1px 2px black, 0 0 7px orange, 0 0 5px darkorange;
}
.chatRoles {
font-size: 10px;
background: black;
padding: 2px;
padding-left: 16px;
padding-right: 16px;
}<div class="chatContainer" id="chatContainer">
<div class="chatHeader">
<div class="chatHeaderItem">Global</div>
<div class="chatHeaderItem">xExemplaryx</div>
<div class="chatHeaderItem">Ninja</div>
<div class="chatHeaderItem">NotTfue</div>
<div class="chatHeaderItem">Myth</div>
<div class="chatHeaderItem">Global</div>
<div class="chatHeaderItem">xExemplaryx</div>
<div class="chatHeaderItem">Ninja</div>
<div class="chatHeaderItem">NotTfue</div>
<div class="chatHeaderItem">Myth</div>
</div>
<div class="chatWindow">
<div class="chatMessage"><span class="chatTime">[2:41 AM] </span><span class="chatPlaystation">SaltyyPP</span>: anyone wanna do some duo scrims NAE?</div>
<div class="chatMessage"><span class="chatTime">[2:44 AM] </span><span class="chatXbox">Nexus</span>: anyone wanna do sms NAE?</div>
<div class="chatMessage"><span class="chatTime">[2:41 AM] </span><span class="chatPC">Dusty</span>: anyone wanna do some duo scrims NAE?</div>
</div>
<div class="chatFooter">
<input type="text" class="chatInputField" />
<div class="chatFooterLabel">Send</div>
</div>
<div class="chatRoles">
Roles: <span class="chatAdmin">Admin</span>, <span class="chatMod">Moderator</span>, <span class="chatPlaystation">Playstation</span>, <span class="chatPC">PC</span>, <span class="chatXbox">Xbox</span>, <span class="chatUser">User</span>
</div>
</div>.chatHeader {
height: auto;
width: 100%;
border-bottom: 2px solid black;
background: rgba(0, 0, 0, 1);
overflow-x: auto;
display: inline-block;
}
.chatHeaderItem {
color: white;
padding: 10px;
padding-left: 15px;
padding-right: 15px;
font-size: 14px;
display: inline-block;
transition: all 0.20s linear;
margin: 0;
text-align: center;
}
.chatHeaderItem:hover {
background: rgba(255, 100, 0, 0.3);
cursor: pointer;
}
.chatContainer {
border: 2px solid black;
position: relative;
font-size: 0;
}
.chatWindow {
max-height: 300px;
overflow-y: auto;
background: rgba(0, 0, 0, 0.3);
padding: 8px;
padding-left: 14px;
padding-right: 14px;
color: white;
font-size: 12px;
}
.chatFooter {
background: rgba(0, 0, 0, 0);
color: white;
height: 40px;
}
.chatFooterLabel {
background: rgba(0, 0, 0, 1);
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 0;
width: calc(25% - 20px);
font-size: 14px;
height: calc(100% - 20px);
float: right;
transition: all 0.20s linear;
}
.chatFooterLabel:hover {
cursor: pointer;
background: rgba(255, 100, 0, 0.3);
}
.chatInputField {
background: rgba(0, 0, 0, 0.6);
padding: 10px;
margin: 0;
display: inline-block;
border: none;
width: calc(75% - 20px);
font-size: 14px;
color: white;
float: left;
height: calc(100% - 20px);
transition: all 0.20s linear;
}
.chatMessage {
display: block;
word-wrap: break-word;
}
.chatTime {
color: rgba(250, 250, 230, 0.4);
font-size: 10px;
}
.chatUser {
color: #747474;
text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px black;
}
.chatXbox {
color: #00FF74;
text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px #4cff9d;
}
.chatPlaystation {
color: #4285f4;
text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px #7aa9f7;
}
.chatPC {
color: #6441a4;
text-shadow: 1px 1px 2px black, 0 0 7px black, 0 0 5px #927abf;
}
.chatMod {
color: #FFD700;
text-shadow: 1px 1px 2px black, 0 0 7px #ffdb19, 0 0 5px #ffe34c;
}
.chatAdmin {
color: #ff5719;
text-shadow: 1px 1px 2px black, 0 0 7px orange, 0 0 5px darkorange;
}
.chatRoles {
font-size: 10px;
background: black;
padding: 2px;
padding-left: 16px;
padding-right: 16px;
}<div class="chatContainer" id="chatContainer">
<div class="chatHeader">
<div class="chatHeaderItem">Global</div>
<div class="chatHeaderItem">xExemplaryx</div>
<div class="chatHeaderItem">Ninja</div>
<div class="chatHeaderItem">NotTfue</div>
<div class="chatHeaderItem">Myth</div>
<div class="chatHeaderItem">Global</div>
<div class="chatHeaderItem">xExemplaryx</div>
<div class="chatHeaderItem">Ninja</div>
<div class="chatHeaderItem">NotTfue</div>
<div class="chatHeaderItem">Myth</div>
</div>
<div class="chatWindow">
<div class="chatMessage"><span class="chatTime">[2:41 AM] </span><span class="chatPlaystation">SaltyyPP</span>: anyone wanna do some duo scrims NAE?</div>
<div class="chatMessage"><span class="chatTime">[2:44 AM] </span><span class="chatXbox">Nexus</span>: anyone wanna do sms NAE?</div>
<div class="chatMessage"><span class="chatTime">[2:41 AM] </span><span class="chatPC">Dusty</span>: anyone wanna do some duo scrims NAE?</div>
</div>
<div class="chatFooter">
<input type="text" class="chatInputField" />
<div class="chatFooterLabel">Send</div>
</div>
<div class="chatRoles">
Roles: <span class="chatAdmin">Admin</span>, <span class="chatMod">Moderator</span>, <span class="chatPlaystation">Playstation</span>, <span class="chatPC">PC</span>, <span class="chatXbox">Xbox</span>, <span class="chatUser">User</span>
</div>
</div>html css
html css
edited Jan 16 at 16:26
ksav
5,32421331
asked Nov 19 '18 at 21:02
Fortnite MatcherFortnite Matcher
162
edited Jan 16 at 16:26
ksav
5,32421331
asked Nov 19 '18 at 21:02
Fortnite MatcherFortnite Matcher
162
edited Jan 16 at 16:26
ksav
5,32421331
edited Jan 16 at 16:26
ksav
5,32421331
edited Jan 16 at 16:26
ksav
5,32421331
5,32421331
asked Nov 19 '18 at 21:02
Fortnite MatcherFortnite Matcher
162
asked Nov 19 '18 at 21:02
Fortnite MatcherFortnite Matcher
162
asked Nov 19 '18 at 21:02
Fortnite MatcherFortnite Matcher
162
162
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
You can use display:flex for the parent container and add overflow-x:scroll
.chatHeader {
overflow-x:scroll;
display:flex;
}
By default the direction of flex is horizontal.
answered Nov 19 '18 at 21:54
jeanpaulxiaojeanpaulxiao
1635
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53382565%2fhow-to-make-header-of-my-chat-container-be-scrollable-for-every-element-in-it-an%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You can use display:flex for the parent container and add overflow-x:scroll
.chatHeader {
overflow-x:scroll;
display:flex;
}
By default the direction of flex is horizontal.
answered Nov 19 '18 at 21:54
jeanpaulxiaojeanpaulxiao
1635
add a comment |
0
You can use display:flex for the parent container and add overflow-x:scroll
.chatHeader {
overflow-x:scroll;
display:flex;
}
By default the direction of flex is horizontal.
answered Nov 19 '18 at 21:54
jeanpaulxiaojeanpaulxiao
1635
add a comment |
0
0
0
You can use display:flex for the parent container and add overflow-x:scroll
.chatHeader {
overflow-x:scroll;
display:flex;
}
By default the direction of flex is horizontal.
answered Nov 19 '18 at 21:54
jeanpaulxiaojeanpaulxiao
1635
You can use display:flex for the parent container and add overflow-x:scroll
.chatHeader {
overflow-x:scroll;
display:flex;
}
By default the direction of flex is horizontal.
answered Nov 19 '18 at 21:54
jeanpaulxiaojeanpaulxiao
1635
answered Nov 19 '18 at 21:54
jeanpaulxiaojeanpaulxiao
1635
answered Nov 19 '18 at 21:54
jeanpaulxiaojeanpaulxiao
1635
answered Nov 19 '18 at 21:54
jeanpaulxiaojeanpaulxiao
1635
1635
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53382565%2fhow-to-make-header-of-my-chat-container-be-scrollable-for-every-element-in-it-an%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
