Probably the title describes the whole question.
I have two divs and I'd like to set the style of their scroll differently.
e.g:
#div1{
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: blue;
}
}
#div2{
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: red;
}
}
Does anyone know if that's possible. I tried it, but it didn't work. It works only when I set it for the whole website.
Any help will be very appreciated.
Try this
.scrollbar {
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow {
min-height: 450px;
}
#wrapper {
text-align: center;
width: 500px;
margin: auto;
}
#style-1::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
#style-2::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #D62929;
}
#style-3::-webkit-scrollbar-trac {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-3::-webkit-scrollbar {
width: 6px;
background-color: #F5F5F5;
}
#style-3::-webkit-scrollbar-thumb {
background-color: #000000;
}
<div id="wrapper">
<div class="scrollbar" id="style-default">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-1">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-2">
<div class="force-overflow"></div>
</div>
</div>
more info
I did same thing in my project perviously, just add customSroller on div :)
.customSroller::-webkit-scrollbar {
width: 0.4em; }
.customSroller::-webkit-scrollbar-thumb {
background-color: gray;
outline: 1px solid transparent; }
.customSroller::-webkit-scrollbar-track {
background: transparent; }
.customSroller{
overflow-y: hidden !important; }
.customSroller{
overflow-y: scroll !important; }
You are just using the wrong syntax: the correct one, in fact, would be:
#div1::-webkit-scrollbar {
width: 10px;
}
#div1::-webkit-scrollbar-thumb {
background-color: blue;
}
#div2::-webkit-scrollbar {
width: 10px;
}
#div2::-webkit-scrollbar-thumb {
background-color: red;
}
Related
.sear {
height: 50px;
width: 400px;
border: 0.5px solid black;
border-radius: 15px 0px 0px 15px;
}
.sear:focus {
//how to make only the border radius and other part of box selected?
}
.bar {
display: inline;
height: 50px;
width: 60px;
border: 0.5px solid black;
background-color: #ECECEC;
border-radius: 0px 15px 15px 0px;
}
.bar:hover {
cursor: pointer;
}
<input type="text" style="display: inline; margin-left: 20%;" class="sear" placeholder="Search...">
<button class="bar">🔎</button>
I was just wondering if it is possible to select only the border-radius and the rest of the box when the mouse is focused on the input as opposed to the corner of the box.
If you want to remove the default outline (which is not recommended for accessibility reasons) and add your own you can do this by changing the border color on focus but I would recommend wrapping the elements with a div and using javascript to add and remove a class to make this styling change like this:
var btnGroup = document.querySelector('.btn-group');
var input = document.querySelector('.sear');
input.onfocus = function() {
btnGroup.classList.add('focus');
}
input.onblur = function() {
btnGroup.classList.remove('focus');
}
.btn-group {
display: flex;
align-items: center;
position: relative;
width: 100%;
border: 1px solid black;
border-radius: 15px;
background-color: white;
width: 400px;
}
.btn-group.focus {
border-color: rebeccapurple;
}
.sear {
flex: 1;
border: none;
padding: .5rem;
margin: 0 0 0 0.5rem;
line-height: 1rem;
font-size: 1rem;
outline: none;
}
.bar {
padding: .5rem 1.5rem;
width: 60px;
background-color: #ECECEC;
border-radius: 0px 15px 15px 0px;
outline: none;
border-left: 1px solid #999;
}
.bar:hover {
cursor: pointer;
}
<div class="btn-group">
<input type="text" class="sear" placeholder="Search...">
<button class="bar">🔎</button>
</div>
for example:
.sear:focus {
/* to change the border when selected. */
border: 2px solid #0000ff;
}
If you are looking to have outline radius, its not posisble as mentioned in the comments, as a work around you can have something like this:
.sear {
height: 50px;
width: 400px;
border: 0.5px solid black;
border-radius: 15px 0px 0px 15px;
}
.sear:focus {
outline: none;
border-color: #9ecaed;
box-shadow: 0 0 2px #9ecaed;
}
.bar {
display: inline;
height: 50px;
width: 60px;
border: 0.5px solid black;
background-color: #ECECEC;
border-radius: 0px 15px 15px 0px;
}
.bar:hover {
cursor: pointer;
}
<input type="text" style="display: inline; margin-left: 20%;" class="sear" placeholder="Search...">
<button class="bar">🔎</button>
Just trying to understand what you want.
May be something like this ?
.sear {
height: 50px;
width: 400px;
border: 1px solid black;
border-radius: 15px 0px 0px 15px;
margin-left: 20px;
}
.sear:focus {
border-top: solid 3px blue;
border-left: solid 3px blue;
border-bottom: solid 3px blue;
margin-top: -2px;
}
.sear:focus + .bar {
border-top: solid 3px blue;
border-right: solid 3px blue;
border-bottom: solid 3px blue;
}
.bar {
display: inline-block;
height: 54px;
width: 60px;
border: 1px solid black;
background-color: #ECECEC;
border-radius: 0px 15px 15px 0px;
}
.bar:hover {
cursor: pointer;
}
<input type="text" class="sear" placeholder="Search..."/>
<button class="bar">🔎</button>
I am busy prototyping a layout using bootstrap and some custom css. I have a div with container-fluid and then two rows. 1st row has three columns within and second row just has a full width div in it.
All is good until I reduce the window size and a break-point is reached and the design becomes responsive which is fine other than the second row with the full width div seems to float over the 1st row elements instead of staying at the bottom.
How do I get the 2nd row to stay pinned to the bottom when in a smaller client size.
Note that the 1st row is setup to expand and fill the remaining height of the screen, the 2nd row is a fixed 50px in height.
Bootstrap taken from https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/
Screen grabs of effect (HTML after)
HTML template
#import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
html,
body {
height: 100%;
margin: 0;
font-family: 'Roboto', sans-serif;
background-color: #dedee1;
}
#ctr-main {
height: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
}
.red-border {
border: 1px red solid;
}
.blue-border {
border: 1px blue solid;
}
.panel {
width: 100%;
background-color: rgba(218, 226, 254, 0.63);
margin-top: 5px;
overflow: hidden;
}
#panel-ticket-tabs {
height: 50px;
}
#panel-ticket-meta {
height: 100px;
}
#panel-status {
height: 150px;
}
#panel-customer-info {
height: 150px;
}
#panel-customer-history {
height: 250px;
}
#panel-customer-shortcuts {
height: 250px;
}
#panel-ticket {
/*height:500px;*/
flex-grow: 1;
}
#panel-channels {
height: 500px;
}
#panel-tools {
/*flex-grow: 1;*/
}
#panel-bottom-bar {
width: 100%;
height: 50px;
background-color: #2e57cc;
display: block;
position: relative;
text-align: left;
}
.pnl-title {
width: 100%;
height: 25px;
vertical-align: middle;
color: white;
font-size: 1em;
font-weight: bold;
background-color: #2e57cc;
overflow: hidden;
line-height: 25px;
padding-left: 5px;
/*! border-bottom: 2px solid #22366f; */
}
.row-flex {
flex: 1;
}
.column-flex {
display: flex;
flex-flow: column;
height: 100%;
}
.panel-height-filler {
display: flex;
flex-flow: column;
height: 100%;
flex: 1 1 auto;
}
.pnl-round-corner-bottom {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.pnl-round-corner {
border-radius: 10px;
}
.pnl-square {
border-radius: 0;
}
.pnl-border {
border: 1px solid #000335;
}
.pnlSection {
background-color: #fff;
width:98%;
min-height:25px;
margin: 0 auto;
z-index: 20;
}
.pnlSection-border {
border:1px solid black;
}
#pnlSection-user-tabs {
background-color: transparent;
z-index: 25;
}
#pnlSection-channels {
margin-top: -1px;
}
.tabButton {
display:inline-block;
border-radius: 5px 5px 0 0;
background-color: #d6d6d6;
height: 30px;
width: 100px;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
line-height: 30px;
border-bottom: 1px solid black;
}
.tabButton > span {
display:block;
font-weight: bold;
color:black;
font-size:12px;
padding:0;
margin:auto 0;
/*! line-height: normal; */
text-align: center;
}
.tabButton:hover {
background-color: #ffffff;
cursor: pointer;
}
#panel-bottom-bar > .icon-container {
color: white;
display: inline-block;
position: relative;
margin: 7px 0 auto .25em;
border: white 1px solid;
padding:2px;
border-radius: 5px;
overflow:hidden;
}
#panel-bottom-bar > .icon-container:hover {
background-color:white;
color:#2e57cc;
border-color:#2e57cc;
cursor:pointer;
}
#panel-bottom-bar > .icon-container.active {
background-color:white;
color:#2e57cc;
border-color:#2e57cc;
}
.activeTab {
background-color: white;
border-bottom: 0;
}
.alertTab {
background-color: #e57616;
}
.pnl-outer-shadow {
-webkit-box-shadow: 3px 3px 5px 6px #9c9c9c; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 3px 3px 5px 6px #9c9c9c; /* Firefox 3.5 - 3.6 */
box-shadow: 3px 3px 5px 6px #9c9c9c; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
.pnl-inner-shadow {
-moz-box-shadow: inset 0 0 10px #9c9c9c;
-webkit-box-shadow: inset 0 0 10px #9c9c9c;
box-shadow: inset 0 0 10px #9c9c9c;
}
.pnl-bend-shadow-bottom {
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
}
#ctr-main > div.container-fluid {
padding-left: 15px;
padding-right: 15px;
}
#column-left > div.row {
margin: 0 0 0 2px;
}
#column-middle > div.row {
margin: 0 2px 0 2px;
}
#column-right > div.row {
margin: 0 2px 0 0;
}
#column-left {
/*! vertical-align: top; */
/*! margin: auto; */
margin-top: 0;
padding-left: 5px;
}
#column-right {
padding-right: 5px;
}
#column-middle {
padding-left: 5px;
padding-right: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Prototype1 - Main</title>
<!-- Styles and links to JS removed for clarity -->
</head>
<body>
<div id="ctr-main" class="container-fluid">
<div class="row row-flex">
<div class="col-sm-3 column-flex" id="column-left">
<div id="panel-status" class="panel pnl-round-corner-bottom pnl-border">
<h2 class="pnl-title">Console</h2>
</div>
<div id="panel-channels" class="panel panel-height-filler pnl-round-corner-bottom pnl-border">
<h2 class="pnl-title">Channel selector</h2>
<div id="pnlSection-user-tabs" class="pnlSection">
<div class="tabButton activeTab"><span>Customers</span></div>
<div class="tabButton alertTab"><span>Agents</span></div>
<div class="tabButton"><span>Administrators</span></div>
</div>
<div id="pnlSection-channels" class="pnlSection pnlSection-border">
</div>
</div>
</div>
<div class="col-sm-6 column-flex" id="column-middle">
<div id="panel-ticket" class="panel panel-height-filler pnl-round-corner-bottom pnl-border">
<h2 class="pnl-title">Ticket details</h2>
</div>
</div>
<div class="col-sm-3 column-flex" id="column-right">
<div id="panel-tools" class="panel panel-height-filler pnl-round-corner-bottom pnl-border">
<h2 class="pnl-title">Tools</h2>
</div>
</div>
</div>
<div class="row">
<div id="panel-bottom-bar" class="panel pnl-square pnl-border">
<div class="icon-container">
<span class="icon-home"></span>
</div>
</div>
</div>
</div>
</body>
</html>
Height 100% on column-flex won't work here. 100% of what ? that's the problem.
You should use auto so it takes the height of it's content because you set fixed heights on the panels .
You should add this in a media query.
See code below or -> JsFiddle
html,
body {
height: 100%;
margin: 0;
font-family: 'Roboto', sans-serif;
background-color: #dedee1;
}
#ctr-main {
height: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
}
.red-border {
border: 1px red solid;
}
.blue-border {
border: 1px blue solid;
}
.panel {
width: 100%;
background-color: rgba(218, 226, 254, 0.63);
margin-top: 5px;
overflow: hidden;
}
#panel-ticket-tabs {
height: 50px;
}
#panel-ticket-meta {
height: 100px;
}
#panel-status {
height: 150px;
}
#panel-customer-info {
height: 150px;
}
#panel-customer-history {
height: 250px;
}
#panel-customer-shortcuts {
height: 250px;
}
#panel-ticket {
/*height:500px;*/
flex-grow: 1;
}
#panel-channels {
height: 500px;
}
#panel-tools {
/*flex-grow: 1;*/
}
#panel-bottom-bar {
width: 100%;
height: 50px;
background-color: #2e57cc;
display: block;
position: relative;
text-align: left;
}
.pnl-title {
width: 100%;
height: 25px;
vertical-align: middle;
color: white;
font-size: 1em;
font-weight: bold;
background-color: #2e57cc;
overflow: hidden;
line-height: 25px;
padding-left: 5px;
/*! border-bottom: 2px solid #22366f; */
}
.row-flex {
flex: 1;
}
.column-flex {
display: flex;
flex-flow: column;
height:100%
}
.panel-height-filler {
display: flex;
flex-flow: column;
height: 100%;
flex: 1 1 auto;
}
.pnl-round-corner-bottom {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.pnl-round-corner {
border-radius: 10px;
}
.pnl-square {
border-radius: 0;
}
.pnl-border {
border: 1px solid #000335;
}
.pnlSection {
background-color: #fff;
width:98%;
min-height:25px;
margin: 0 auto;
z-index: 20;
}
.pnlSection-border {
border:1px solid black;
}
#pnlSection-user-tabs {
background-color: transparent;
z-index: 25;
}
#pnlSection-channels {
margin-top: -1px;
}
.tabButton {
display:inline-block;
border-radius: 5px 5px 0 0;
background-color: #d6d6d6;
height: 30px;
width: 100px;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
line-height: 30px;
border-bottom: 1px solid black;
}
.tabButton > span {
display:block;
font-weight: bold;
color:black;
font-size:12px;
padding:0;
margin:auto 0;
/*! line-height: normal; */
text-align: center;
}
.tabButton:hover {
background-color: #ffffff;
cursor: pointer;
}
#panel-bottom-bar > .icon-container {
color: white;
display: inline-block;
position: relative;
margin: 7px 0 auto .25em;
border: white 1px solid;
padding:2px;
border-radius: 5px;
overflow:hidden;
}
#panel-bottom-bar > .icon-container:hover {
background-color:white;
color:#2e57cc;
border-color:#2e57cc;
cursor:pointer;
}
#panel-bottom-bar > .icon-container.active {
background-color:white;
color:#2e57cc;
border-color:#2e57cc;
}
.activeTab {
background-color: white;
border-bottom: 0;
}
.alertTab {
background-color: #e57616;
}
.pnl-outer-shadow {
-webkit-box-shadow: 3px 3px 5px 6px #9c9c9c; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 3px 3px 5px 6px #9c9c9c; /* Firefox 3.5 - 3.6 */
box-shadow: 3px 3px 5px 6px #9c9c9c; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
.pnl-inner-shadow {
-moz-box-shadow: inset 0 0 10px #9c9c9c;
-webkit-box-shadow: inset 0 0 10px #9c9c9c;
box-shadow: inset 0 0 10px #9c9c9c;
}
.pnl-bend-shadow-bottom {
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
}
#ctr-main > div.container-fluid {
padding-left: 15px;
padding-right: 15px;
}
#column-left > div.row {
margin: 0 0 0 2px;
}
#column-middle > div.row {
margin: 0 2px 0 2px;
}
#column-right > div.row {
margin: 0 2px 0 0;
}
#column-left {
/*! vertical-align: top; */
/*! margin: auto; */
margin-top: 0;
padding-left: 5px;
}
#column-right {
padding-right: 5px;
}
#column-middle {
padding-left: 5px;
padding-right: 5px;
}
/* add breakpoint */
#media only screen(max-width:550px) {
.column-flex {
height:auto;
min-height:100vh;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div id="ctr-main" class="container-fluid">
<div class="row row-flex">
<div class="col-sm-3 column-flex" id="column-left">
<div id="panel-status" class="panel pnl-round-corner-bottom pnl-border">
<h2 class="pnl-title">Console</h2>
</div>
<div id="panel-channels" class="panel panel-height-filler pnl-round-corner-bottom pnl-border">
<h2 class="pnl-title">Channel selector</h2>
<div id="pnlSection-user-tabs" class="pnlSection">
<div class="tabButton activeTab"><span>Customers</span></div>
<div class="tabButton alertTab"><span>Agents</span></div>
<div class="tabButton"><span>Administrators</span></div>
</div>
<div id="pnlSection-channels" class="pnlSection pnlSection-border">
</div>
</div>
</div>
<div class="col-sm-6 column-flex" id="column-middle">
<div id="panel-ticket" class="panel panel-height-filler pnl-round-corner-bottom pnl-border">
<h2 class="pnl-title">Ticket details</h2>
</div>
</div>
<div class="col-sm-3 column-flex" id="column-right">
<div id="panel-tools" class="panel panel-height-filler pnl-round-corner-bottom pnl-border">
<h2 class="pnl-title">Tools</h2>
</div>
</div>
</div>
<div class="row">
<div id="panel-bottom-bar" class="panel pnl-square pnl-border">
<div class="icon-container">
<span class="icon-home"></span>
</div>
</div>
</div>
</div>
I have the following flex item (#globalSearchContLi) inside a flex-container. The container is an unordered list.
My problem is that I'm creating a fun looking search bar with a half-sphere submit button. The button is pretty much attached to the search bar with inline-block and margin properties.
This bundle (the search bar and button) won't center in the div any way I try to.
I tried setting #globalSearchCont with a specific width and auto side margins, but the whole flexbox presentation won't display correctly on mobile.
Any suggestions/advice? Thanks in advance.
#globalSearchContLi {
flex-grow: 7;
margin: 0px 15px;
flex-basis: 100px;
}
#globalSearchContLi {
flex-grow: 7;
margin: 0px 15px;
flex-basis: 100px;
}
#munchGlobalSearchbar {
width: 240px;
height: 50px;
/* box-shadow: 0 0 0 1px#000,0 0 0 3px #FFF, 0 0 0 5px #333; */
font-weight: 300;
font-size: 1.6rem;
border-radius: 10px;
display: inline-block;
margin-top: 20px;
text-align: center;
background-color: #edad0c;
border-bottom: 2px solid #333;
border-top: 2px solid #333;
border-left: 2px solid #333;
}
#munchGlobalSearchbar::placeholder {
color: #000;
}
#globalSearchBtn {
background-image: url(../imgs/addOn/panEmoji.png);
width: 50px;
height: 51px;
margin: 0px 0px -17px -12px !important;
border-bottom-right-radius: 50%;
border-top-right-radius: 50%;
display: inline-block;
border: 2px solid #333;
background-color: #38b32b;
transition: .2s all ease;
}
.backImageCon {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
<li id="globalSearchContLi">
<div id="globalSearchCont">
<input placeholder="Search..." type="textbox" name="globalSearch" id="munchGlobalSearchbar">
<div id="globalSearchBtn" class="backImageCon"></div>
</div>
</li>
Use justify-content: center on the parent to horizontally center the button elements.
#globalSearchContLi {
list-style-type: none;
margin-left: 0;
}
#globalSearchCont {
display: flex;
justify-content: center;
height: 50px;
}
#munchGlobalSearchbar {
width: 240px;
font-weight: 300;
font-size: 1.6rem;
border-radius: 10px;
text-align: center;
background-color: #edad0c;
border-bottom: 2px solid #333;
border-top: 2px solid #333;
border-left: 2px solid #333;
}
#munchGlobalSearchbar::placeholder {
color: #000;
}
#globalSearchBtn {
background-image: url(../imgs/addOn/panEmoji.png);
width: 50px;
border-bottom-right-radius: 50%;
border-top-right-radius: 50%;
border: 2px solid #333;
background-color: #38b32b;
transition: .2s all ease;
margin-left: -10px;
}
.backImageCon {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
ul {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
<ul>
<li id="globalSearchContLi">
<div id="globalSearchCont">
<input placeholder="Search..." type="textbox" name="globalSearch" id="munchGlobalSearchbar">
<div id="globalSearchBtn" class="backImageCon"></div>
</div>
</li>
</ul>
I have a website with bootstrap CSS.
I tested it on chrome and edge browsers, the CSS seems perfectly fine.
On firefox, everything looks zoomed in. When i go to the settings of the browser and zoom out, I can see the full HTML.
On chrome :
https://imgur.com/a/bRdLT4C
Firefox normal size:
https://imgur.com/a/CDNwKCG
Firefox zoomed out :
https://imgur.com/a/w5X8nOb
I am completely new to CSS, any help would be appreciated.
Sample of my code: https://jsfiddle.net/hewp0q2j/
HTML
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container app">
<div class="row app-one">
<div class="col-sm-4 side">
<div class="side-one">
<div class="row sideBar" id="users">
<div class="row sideBar-body">
<div class="col-sm-3 col-xs-3 sideBar-avatar">
<div class="avatar-icon">
<img src="img/user_away.png">
</div>
</div>
<div class="col-sm-9 col-xs-9 sideBar-main">
<div class="row">
<div class="col-sm-8 col-xs-8 sideBar-name">
<span class="name-meta">David Leff</span><br><span class="time-meta">Last Active 1h 51m ago.</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-8 conversation">
<div id="chatdiv">
<div class="row message" id="conversation">
<div class="row message-body">
<div class="col-sm-12 message-main-receiver">
<div class="receiver">
<div class="message-text">
Hi, what are you doing?!
</div>
<span class="message-time pull-right">
Sun
</span>
</div>
</div>
</div>
</div>
</div>
<div class="row reply">
<div class="col-sm-9 col-xs-9 reply-main">
<textarea class="form-control" rows="1" id="comment" onkeypress="processKeyPress(event, this)"></textarea>
</div>
<div class="col-sm-1 col-xs-1 reply-send">
<span onclick="SendMessage()">
<i class="fa fa-send fa-2x" aria-hidden="true"></i>
</span>
<span class="error" id ="error"></span>
</div>
</div>
</div>
</div>
</div>
CSS
html,
body,
div,
span {
/** height: 100%;*/
width: 100%;
overflow: hidden;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.fa-2x {
font-size: 1.5em;
}
.app {
position: relative;
overflow: hidden;
top: 19px;
height: calc(100% - 38px);
margin: auto;
padding: 0;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
}
.app-one {
background-color: #f7f7f7;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
}
.side {
padding: 0;
margin: 0;
height: 100%;
}
.side-one {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
z-index: 1;
position: relative;
display: block;
top: 0;
}
.side-two {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
z-index: 2;
position: relative;
top: -100%;
left: -100%;
-webkit-transition: left 0.3s ease;
transition: left 0.3s ease;
}
.heading {
padding: 10px 16px 10px 15px;
margin: 0;
height: 60px;
width: 100%;
background-color: #eee;
z-index: 1000;
}
.heading-avatar {
padding: 0;
cursor: pointer;
}
.heading-avatar-icon img {
border-radius: 50%;
height: 40px;
width: 40px;
}
.heading-name {
padding: 0 !important;
cursor: pointer;
}
.heading-name-meta {
font-weight: 700;
font-size: 100%;
padding: 5px;
padding-bottom: 0;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
color: #000;
display: block;
}
.heading-online {
display: none;
padding: 0 5px;
font-size: 12px;
color: #93918f;
}
.heading-compose {
padding: 0;
}
.heading-compose i {
text-align: center;
padding: 5px;
color: #93918f;
cursor: pointer;
}
.heading-dot {
padding: 0;
margin-left: 10px;
}
.heading-dot i {
text-align: right;
padding: 5px;
color: #93918f;
cursor: pointer;
}
.searchBox {
padding: 0 !important;
margin: 0 !important;
height: 60px;
width: 100%;
}
.searchBox-inner {
height: 100%;
width: 100%;
padding: 10px !important;
background-color: #fbfbfb;
}
/*#searchBox-inner input {
box-shadow: none;
}*/
.searchBox-inner input:focus {
outline: none;
border: none;
box-shadow: none;
}
.sideBar {
padding: 0 !important;
margin: 0 !important;
background-color: #fff;
overflow-y: auto;
border: 1px solid #f7f7f7;
height: calc(100% - 20px);
}
.sideBar-body {
position: relative;
padding: 10px !important;
/**border-bottom: 1px solid #f7f7f7;*/
height: 72px;
margin: 0 !important;
/*cursor: pointer;*/
}
/*.sideBar-body:hover {
background-color: #f2f2f2;
}*/
.sideBar-avatar {
text-align: center;
padding: 0 !important;
}
.avatar-icon img {
border-radius: 50%;
height: 49px;
width: 49px;
}
.sideBar-main {
padding: 0 !important;
}
.sideBar-main .row {
padding: 0 !important;
margin: 0 !important;
}
.sideBar-name {
padding: 10px !important;
}
.name-meta {
font-size: 100%;
padding: 1% !important;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
color: #000;
}
.sideBar-time {
padding: 10px !important;
}
.time-meta {
text-align: right;
font-size: 12px;
padding: 1% !important;
color: rgba(0, 0, 0, .4);
vertical-align: baseline;
}
/*New Message*/
.newMessage {
padding: 0 !important;
margin: 0 !important;
height: 100%;
position: relative;
left: -100%;
}
.newMessage-heading {
padding: 10px 16px 10px 15px !important;
margin: 0 !important;
height: 100px;
width: 100%;
background-color: #00bfa5;
z-index: 1001;
}
.newMessage-main {
padding: 10px 16px 0 15px !important;
margin: 0 !important;
height: 60px;
margin-top: 30px !important;
width: 100%;
z-index: 1001;
color: #fff;
}
.newMessage-title {
font-size: 18px;
font-weight: 700;
padding: 10px 5px !important;
}
.newMessage-back {
text-align: center;
vertical-align: baseline;
padding: 12px 5px !important;
display: block;
cursor: pointer;
}
.newMessage-back i {
margin: auto !important;
}
.composeBox {
padding: 0 !important;
margin: 0 !important;
height: 60px;
width: 100%;
}
.composeBox-inner {
height: 100%;
width: 100%;
padding: 10px !important;
background-color: #fbfbfb;
}
.composeBox-inner input:focus {
outline: none;
border: none;
box-shadow: none;
}
.compose-sideBar {
padding: 0 !important;
margin: 0 !important;
background-color: #fff;
overflow-y: auto;
border: 1px solid #f7f7f7;
height: calc(100% - 160px);
}
/*Conversation*/
.conversation {
padding: 0 !important;
margin: 0 !important;
height: 100%;
/*width: 100%;*/
border-left: 1px solid rgba(0, 0, 0, .08);
/*overflow-y: auto;*/
}
.message {
padding: 0 !important;
margin: 0 !important;
background: url("w.jpg") no-repeat fixed center;
background-size: cover;
overflow-y: auto;
border: 1px solid #f7f7f7;
height: calc(100% - 120px);
}
.message-previous {
margin : 0 !important;
padding: 0 !important;
height: auto;
width: 100%;
}
.previous {
font-size: 15px;
text-align: center;
padding: 10px !important;
cursor: pointer;
}
.previous a {
text-decoration: none;
font-weight: 700;
}
.message-body {
margin: 0px 0px 3px 0px !important;
padding: 0 !important;
width: auto;
height: auto;
}
.message-main-receiver {
/*padding: 10px 20px !important;*/
max-width: 60%;
}
.message-main-sender {
/* padding: 3px 20px !important;*/
margin-left: 40% !important;
max-width: 60%;
}
.message-text {
margin: 0 !important;
padding: 5px !important;
word-wrap:break-word;
font-weight: 200;
font-size: 14px;
padding-bottom: 0 !important;
}
.message-time {
margin: 0 !important;
margin-left: 50px !important;
font-size: 12px;
text-align: right;
color: #9a9a9a;
}
.receiver {
width: auto !important;
padding: 4px 10px 7px !important;
border-radius: 10px 10px 10px 0;
background: #dae4f1;
font-size: 12px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
word-wrap: break-word;
display: inline-block;
}
.sender {
float: right;
width: auto !important;
background: #2b4871; /**#ffdb99;**/
color:white;
border-radius: 10px 10px 0 10px;
padding: 4px 10px 7px !important;
font-size: 12px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
display: inline-block;
word-wrap: break-word;
}
/*Reply*/
.reply {
height: 117px;
width: 100%;
background-color: #f5f1ee;
padding: 10px 5px 10px 5px !important;
margin: 0 !important;
z-index: 1000;
}
.reply-emojis {
padding: 5px !important;
}
.reply-emojis i {
text-align: center;
padding: 5px 5px 5px 5px !important;
color: #93918f;
cursor: pointer;
}
.reply-recording {
padding: 5px !important;
}
.reply-recording i {
text-align: center;
padding: 5px !important;
color: #93918f;
cursor: pointer;
}
.reply-send {
padding: 5px !important;
}
.reply-send i {
text-align: center;
padding: 5px !important;
color: #93918f;
cursor: pointer;
}
.reply-main {
padding: 2px 5px !important;
}
.reply-main textarea {
width: 100%;
resize: none;
overflow: hidden;
padding: 5px !important;
outline: none;
border: none;
text-indent: 5px;
box-shadow: none;
height: 100%;
font-size: 16px;
}
.reply-main textarea:focus {
outline: none;
border: none;
text-indent: 5px;
box-shadow: none;
}
#media screen and (max-width: 700px) {
.app {
top: 0;
height: 100%;
}
.heading {
height: 70px;
background-color: #009688;
}
.fa-2x {
font-size: 2.3em !important;
}
.heading-avatar {
padding: 0 !important;
}
.heading-avatar-icon img {
height: 50px;
width: 50px;
}
.heading-compose {
padding: 5px !important;
}
.heading-compose i {
color: #fff;
cursor: pointer;
}
.heading-dot {
padding: 5px !important;
margin-left: 10px !important;
}
.heading-dot i {
color: #fff;
cursor: pointer;
}
.sideBar {
height: calc(100% - 130px);
}
.sideBar-body {
height: 80px;
}
.sideBar-avatar {
text-align: left;
padding: 0 8px !important;
}
.avatar-icon img {
height: 55px;
width: 55px;
}
.sideBar-main {
padding: 0 !important;
}
.sideBar-main .row {
padding: 0 !important;
margin: 0 !important;
}
.sideBar-name {
padding: 10px 5px !important;
}
.name-meta {
font-size: 16px;
padding: 5% !important;
}
.sideBar-time {
padding: 10px !important;
}
.time-meta {
text-align: right;
font-size: 14px;
padding: 4% !important;
color: rgba(0, 0, 0, .4);
vertical-align: baseline;
}
/*Conversation*/
.conversation {
padding: 0 !important;
margin: 0 !important;
height: 100%;
/*width: 100%;*/
border-left: 1px solid rgba(0, 0, 0, .08);
/*overflow-y: auto;*/
}
.message {
height: calc(100% - 140px);
}
.reply {
height: 70px;
}
.reply-emojis {
padding: 5px 0 !important;
}
.reply-emojis i {
padding: 5px 2px !important;
font-size: 1.8em !important;
}
.reply-main {
padding: 2px 8px !important;
}
.reply-main textarea {
padding: 8px !important;
font-size: 18px;
}
.reply-recording {
padding: 5px 0 !important;
}
.reply-recording i {
padding: 5px 0 !important;
font-size: 1.8em !important;
}
.reply-send {
padding: 5px 0 !important;
}
.reply-send i {
padding: 5px 2px 5px 0 !important;
font-size: 1.8em !important;
}
}
#HelpASisterOut you should really rethink your HTML and CSS formats. The website doesn't need to be as complicated. General styling recomendations are:
avoid setting styles in CSS to html/body/div/span tags
avoid repeated CSS code, use classes instead (padding, margin, etc.)
avoid using calc() and mixes of percentages and pixels (breaks responsiveness of the page)
think another solution (inheritance, classes, ids) instead of using !important everywhere
avoid using overflow and setting positions manually as each browser may render different things/sizes
other things like repeating same-width bootstrap classes are unnecessary:
col-sm-9 col-xs-9
bootstrap takes the smaller one and applies to all bigger sizes.
This is not a direct answer and I apologize for not pointing the exact mistake, but I promise you that with this things in mind your app will be rightly rendered on all mayor browsers and even on mobile. You just need to look at things differently, maybe explore some webpages done by others. Hope this helps.
Good learning!
I have a "posts__box" ("Davi Jesus" section) that is floating far to the right even with a "posts__box--left" class ("float: left"). HTML is fine, CSS is fine, I'm freaking out 'cause I can't understand why the heck this is happening.
btw: "revista" means "magazine" and it's my first time trying to apply BEM methodoly. I'm a newbie webdesigner.
Images:
.posts {
width: 100%;
}
.container {
float: left;
width: 80%;
height: 1400px;
margin: 0 135px;
padding: 0;
background: #ffffff;
}
.box--btn {
margin-top: 10px;
border: 1.5px solid black;
box-shadow: 2px 2px 2px dimgray;
}
.posts__box {
margin-top: 40px;
margin-left: 20px;
width: 30%;
}
.box--title {
text-align: center;
}
.box--img {
width: 100%;
box-shadow: 3px 3px 3px Dimgray;
}
.box--text {
padding: 5px;
}
.box--author {
float: right;
width: 46%;
height: 50px;
}
.box--author--text {
margin-top: 10px;
margin-left: 6px;
}
.box--continue {
float: left;
width: 46%;
height: 50px;
}
.box--continue--text {
margin-top: 12px;
margin-left: 7px;
}
.posts__btns {
float: left;
margin-top: 20px;
width: 100%;
height: 200px;
}
/* MODIFIERS */
.revista__posts--height {
height: 3000px;
}
/* posts */
.title--red {
color: rgba(233, 26, 26, 1);
}
.title--size-small {
font-size: 30px;
text-shadow: 1.5px 1.5px black;
}
.title--size-large {
font-size: 60px;
text-shadow: 3px 3px black;
}
.box--btn--red {
background: rgba(233, 26, 26, 1);
}
.continue--white {
color: #ffffff;
text-shadow: 1.5px 1.5px black;
}
.box--btn--black {
background: #212121;
}
.author--white {
color: #ffffff;
text-shadow: 2px 2px black;
}
.posts__box--left {
float: left;
}
.posts__box--right {
float: right;
}
.posts__box--margin--fix--left {
margin-top: 10px;
margin-left: 40px;
}
.posts__box--margin--fix--top {
margin-top: 34px;
margin-left: 40px;
}
.posts__btns--left {
float: left;
margin-left: 20px;
}
.posts__btns--right {
float: right;
margin-right: 20px;
}
/* revista */
.container__border {
border-top: 4px solid black;
border-left: 4px solid black;
border-right: 4px solid black;
}
.revista__container--height {
height: 4800px;
}
<article class="posts">
<section class="container revista__container--height container__border">
<!-- davi jesus -->
<section class="posts__box posts__box--left">
<div class="box--title">
<a class="title--red --hover" href="..\revista\artistas\davi-jesus.html">
<h1 class="title--size-small --hover--darkred">Davi de Jesus do Nascimento:<br> corpo de rio</h1>
</a>
</div>
<div>
<a href="..\revista\artistas\davi-jesus.html">
<img class="box--img" src="..\_img\posts\davi-de-jesus\instax\6.png" alt="">
</a>
</div>
<div class="box--continue box--btn box--btn--red">
<a class="--hover" href="..\revista\artistas\davi-jesus.html">
<h5 class="box--continue--text continue--white -font--very-small --hover--dimgray">CONTINUAR A LEITURA</h5>
</a>
</div>
<div class="box--author box--btn box--btn--black">
<a class="--hover" href="..\revista\artistas\daniel-jesus.html">
<h2 class="box--author--text author--white -font--small --hover--dimgray">Davi Jesus</h2>
</a>
</div>
</section>
I just fixed it with a simple "clear: left" class. I guess it was just some weird bug or something like that. If someone has a different explanation and could share with us, I would appreciate. Thanks!