So I have an interface where I want a sidemenu to the left, and the rest of the area should contain a chat-field. The problem is that the chat-field is overflowing the container, and half of the chat-field goes outside the container div.
How do I fit the chat-field in the container with these settings? The container is named #chat-canvas
Here's a JSFiddle: https://jsfiddle.net/v5k1Lhgf/1/
* {
margin: 0;
padding: 0;
box-sizing: border-box !important;
}
html, body, #body {
background-color: #ffffff;
font-size: 15px;
color: #565656;
width: 100%;
padding: 0;
margin-left: 0;
margin-right: 0;
font-family: 'roboto', sans-serif;
font-weight: 300;
}
#body, .app html, body {
background-color: #f9f9f9;
font-size: 15px;
color: #565656;
width: 100%;
height: 100%;
padding: 0;
margin-left: 0;
margin-right: 0;
font-family: 'roboto', sans-serif;
font-weight: 300;
min-height: 100%;
}
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
transition: all 3s ease-in-out;
height: 100%;
min-height: 100%;
}
*,*:before,*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#chat-canvas {
width: 94% !important;
height: 100%;
position: absolute;
float: left;
display: inline-block;
overflow: hidden;
}
.app-nav {
position: relative;
height: 100%;
width: 6%;
display: inline-block;
}
.tl-menu {
position: absolute;
overflow: hidden;
float: left;
top: 0;
height: 100%;
list-style-type: none;
margin: 0;
padding: 0;
background: #1b1e24;
z-index: 9999;
}
.tl-menu img{
max-height: 80%;
}
.tl-menu li a {
display: block;
height: 5em;
width: 5em;
line-height: 5em;
text-align: center;
color: #999;
position: relative;
border-bottom: 1px solid rgba(104,114,134,0.05);
-webkit-transition: background 0.1s ease-in-out;
-moz-transition: background 0.1s ease-in-out;
transition: background 0.1s ease-in-out;
}
.tl-menu li a:hover,
.tl-menu li:first-child a{
color: #55fec6;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.tl-menu li a:active {
background: #afdefa;
color: #FFF;}
/* class for current item */
.tl-menu li.tl-current a {
background: #343a47;
color: #bbe6fe;
}
.tl-menu li a:before {
font-family: 'entypo', sans-serif;
speak: none;
font-style: normal;
font-weight: normal;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 1.4em;
-webkit-font-smoothing: antialiased;
}
.tl-menu li a.icon-logo:before {
font-weight: 700;
font-size: 300%;
}
/* ---------- CHAT ---------- */
.people-list {
width: 30%;
float: right;
}
.people-list .search {
padding: 20px;
}
.people-list input {
border-radius: 3px;
border: none;
padding: 14px;
color: white;
background: #6A6C75;
width: 90%;
font-size: 14px;
}
.people-list .fa-search {
position: relative;
left: -25px;
}
.people-list ul {
padding: 20px;
height: 770px;
}
.people-list ul li {
padding-bottom: 20px;
}
.people-list img {
float: left;
}
.people-list .about {
float: left;
margin-top: 8px;
}
.people-list .about {
padding-left: 8px;
}
.people-list .status {
color: #92959E;
}
.chat {
width: 70%;
float: left;
position: absolute;
background: #F2F5F8;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
color: #434651;
}
.chat .chat-header {
padding: 20px;
border-bottom: 2px solid white;
}
.chat .chat-header img {
float: left;
}
.chat .chat-header .chat-about {
float: left;
padding-left: 10px;
margin-top: 6px;
}
.chat .chat-header .chat-with {
font-weight: bold;
font-size: 16px;
}
.chat .chat-header .chat-num-messages {
color: #92959E;
}
.chat .chat-header .fa-star {
float: right;
color: #D8DADF;
font-size: 20px;
margin-top: 12px;
}
.chat .chat-history {
padding: 30px 30px 20px;
border-bottom: 2px solid white;
overflow-y: scroll;
height: 575px;
}
.chat .chat-history .message-data {
margin-bottom: 15px;
}
.chat .chat-history .message-data-time {
color: #a8aab1;
padding-left: 6px;
}
.chat .chat-history .message {
color: white;
padding: 18px 20px;
line-height: 26px;
font-size: 16px;
border-radius: 7px;
margin-bottom: 30px;
width: 90%;
position: relative;
}
.chat .chat-history .message:after {
bottom: 100%;
left: 7%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #86BB71;
border-width: 10px;
margin-left: -10px;
}
.chat .chat-history .my-message {
background: #86BB71;
}
.chat .chat-history .other-message {
background: #94C2ED;
}
.chat .chat-history .other-message:after {
border-bottom-color: #94C2ED;
left: 93%;
}
.chat .chat-message {
padding: 30px;
}
.chat .chat-message textarea {
width: 100%;
border: none;
padding: 10px 20px;
font: 14px/22px "Lato", Arial, sans-serif;
margin-bottom: 10px;
border-radius: 5px;
resize: none;
}
.chat .chat-message .fa-file-o, .chat .chat-message .fa-file-image-o {
font-size: 16px;
color: gray;
cursor: pointer;
}
.chat .chat-message button {
float: right;
color: #94C2ED;
font-size: 16px;
text-transform: uppercase;
border: none;
cursor: pointer;
font-weight: bold;
background: #F2F5F8;
}
.chat .chat-message button:hover {
color: #75b1e8;
}
.online, .offline, .me {
margin-right: 3px;
font-size: 10px;
}
.online {
color: #86BB71;
}
.offline {
color: #E38968;
}
.me {
color: #94C2ED;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.float-right {
float: right;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.chat-container {
bottom: 0;
left: 0;
right: 0;
height: auto;
margin: 0 auto;
width: 750px;
background: #444753;
border-radius: 5px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<body class="app">
<!-- NAV -->
<div class="app-nav">
<ul class="tl-menu">
<li><img src="https://i.imgur.com/ngO5Ohx.png" alt="Mendr Logo" height="50" width="50"></li>
<li><img src="{{user.picture}}"></li>
<li><i class="fa fa-plus" style="font-size:30px; margin-top:20px;"></i></li>
<li><i class="fa fa-wechat" style="font-size:30px; margin-top:20px;"></i></li>
<li><i class="fa fa-map" style="font-size:30px; margin-top:20px;"></i></li>
<li><i class="fa fa-search" style="font-size:30px; margin-top:20px;"></i></li>
<li><i class="fa fa-sign-out" style="font-size:30px; margin-top:20px;"></i></li>
</ul>
</div>
<!-- END NAV -->
<!-- CHAT -->
<div id="chat-canvas">
<div class="clearfix chat-container">
<div class="people-list" id="people-list">
<div class="search">
<input type="text" placeholder="search" />
<i class="fa fa-search"></i>
</div>
<ul class="list">
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_01.jpg" alt="avatar" />
<div class="about">
<div class="name">Vincent Porter</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_02.jpg" alt="avatar" />
<div class="about">
<div class="name">Aiden Chavez</div>
<div class="status">
<i class="fa fa-circle offline"></i> left 7 mins ago
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_03.jpg" alt="avatar" />
<div class="about">
<div class="name">Mike Thomas</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_04.jpg" alt="avatar" />
<div class="about">
<div class="name">Erica Hughes</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_05.jpg" alt="avatar" />
<div class="about">
<div class="name">Ginger Johnston</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_06.jpg" alt="avatar" />
<div class="about">
<div class="name">Tracy Carpenter</div>
<div class="status">
<i class="fa fa-circle offline"></i> left 30 mins ago
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_07.jpg" alt="avatar" />
<div class="about">
<div class="name">Christian Kelly</div>
<div class="status">
<i class="fa fa-circle offline"></i> left 10 hours ago
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_08.jpg" alt="avatar" />
<div class="about">
<div class="name">Monica Ward</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_09.jpg" alt="avatar" />
<div class="about">
<div class="name">Dean Henry</div>
<div class="status">
<i class="fa fa-circle offline"></i> offline since Oct 28
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_10.jpg" alt="avatar" />
<div class="about">
<div class="name">Peyton Mckinney</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
</ul>
</div>
<div class="activity-info">
<div class="chat">
<div class="chat-header clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_01_green.jpg" alt="avatar" />
<div class="chat-about">
<div class="chat-with">Chat with Vincent Porter</div>
<div class="chat-num-messages">already 1 902 messages</div>
</div>
<i class="fa fa-star"></i>
</div> <!-- end chat-header -->
<div class="chat-history">
<ul>
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-time" >10:10 AM, Today</span>
<span class="message-data-name" >Olia</span> <i class="fa fa-circle me"></i>
</div>
<div class="message other-message float-right">
Hi Vincent, how are you? How is the project coming along?
</div>
</li>
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
<span class="message-data-time">10:12 AM, Today</span>
</div>
<div class="message my-message">
Are we meeting today? Project has been already finished and I have results to show you.
</div>
</li>
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-time" >10:14 AM, Today</span>
<span class="message-data-name" >Olia</span> <i class="fa fa-circle me"></i>
</div>
<div class="message other-message float-right">
Well I am not sure. The rest of the team is not here yet. Maybe in an hour or so? Have you faced any problems at the last phase of the project?
</div>
</li>
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
<span class="message-data-time">10:20 AM, Today</span>
</div>
<div class="message my-message">
Actually everything was fine. I'm very excited to show this to our team.
</div>
</li>
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
<span class="message-data-time">10:31 AM, Today</span>
</div>
<i class="fa fa-circle online"></i>
<i class="fa fa-circle online" style="color: #AED2A6"></i>
<i class="fa fa-circle online" style="color:#DAE9DA"></i>
</li>
</ul>
</div> <!-- end chat-history -->
<div class="chat-message clearfix">
<textarea name="message-to-send" id="message-to-send" placeholder ="Type your message" rows="3"></textarea>
<i class="fa fa-file-o"></i>
<i class="fa fa-file-image-o"></i>
<button>Send</button>
</div> <!-- end chat-message -->
</div> <!-- end chat -->
</div>
</div>
</div>
</body>
Please check snippet in full page for a better view
Replacing height: 100% with min-height: 100% in selector #chat-canvas will make your chat-canvas cover its child chat-field
* {
margin: 0;
padding: 0;
box-sizing: border-box !important;
}
html, body, #body {
background-color: #ffffff;
font-size: 15px;
color: #565656;
width: 100%;
padding: 0;
margin-left: 0;
margin-right: 0;
font-family: 'roboto', sans-serif;
font-weight: 300;
}
#body, .app html, body {
background-color: #f9f9f9;
font-size: 15px;
color: #565656;
width: 100%;
height: 100%;
padding: 0;
margin-left: 0;
margin-right: 0;
font-family: 'roboto', sans-serif;
font-weight: 300;
min-height: 100%;
}
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
transition: all 3s ease-in-out;
height: 100%;
min-height: 100%;
}
*,*:before,*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#chat-canvas {
width: 94% !important;
min-height: 100%;
position: absolute;
float: left;
display: inline-block;
overflow: hidden;
}
.app-nav {
position: relative;
height: 100%;
width: 6%;
display: inline-block;
}
.tl-menu {
position: absolute;
overflow: hidden;
float: left;
top: 0;
height: 100%;
list-style-type: none;
margin: 0;
padding: 0;
background: #1b1e24;
z-index: 9999;
}
.tl-menu img{
max-height: 80%;
}
.tl-menu li a {
display: block;
height: 5em;
width: 5em;
line-height: 5em;
text-align: center;
color: #999;
position: relative;
border-bottom: 1px solid rgba(104,114,134,0.05);
-webkit-transition: background 0.1s ease-in-out;
-moz-transition: background 0.1s ease-in-out;
transition: background 0.1s ease-in-out;
}
.tl-menu li a:hover,
.tl-menu li:first-child a{
color: #55fec6;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.tl-menu li a:active {
background: #afdefa;
color: #FFF;}
/* class for current item */
.tl-menu li.tl-current a {
background: #343a47;
color: #bbe6fe;
}
.tl-menu li a:before {
font-family: 'entypo', sans-serif;
speak: none;
font-style: normal;
font-weight: normal;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 1.4em;
-webkit-font-smoothing: antialiased;
}
.tl-menu li a.icon-logo:before {
font-weight: 700;
font-size: 300%;
}
/* ---------- CHAT ---------- */
.people-list {
width: 30%;
float: right;
}
.people-list .search {
padding: 20px;
}
.people-list input {
border-radius: 3px;
border: none;
padding: 14px;
color: white;
background: #6A6C75;
width: 90%;
font-size: 14px;
}
.people-list .fa-search {
position: relative;
left: -25px;
}
.people-list ul {
padding: 20px;
height: 770px;
}
.people-list ul li {
padding-bottom: 20px;
}
.people-list img {
float: left;
}
.people-list .about {
float: left;
margin-top: 8px;
}
.people-list .about {
padding-left: 8px;
}
.people-list .status {
color: #92959E;
}
.chat {
width: 70%;
float: left;
position: absolute;
background: #F2F5F8;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
color: #434651;
}
.chat .chat-header {
padding: 20px;
border-bottom: 2px solid white;
}
.chat .chat-header img {
float: left;
}
.chat .chat-header .chat-about {
float: left;
padding-left: 10px;
margin-top: 6px;
}
.chat .chat-header .chat-with {
font-weight: bold;
font-size: 16px;
}
.chat .chat-header .chat-num-messages {
color: #92959E;
}
.chat .chat-header .fa-star {
float: right;
color: #D8DADF;
font-size: 20px;
margin-top: 12px;
}
.chat .chat-history {
padding: 30px 30px 20px;
border-bottom: 2px solid white;
overflow-y: scroll;
height: 575px;
}
.chat .chat-history .message-data {
margin-bottom: 15px;
}
.chat .chat-history .message-data-time {
color: #a8aab1;
padding-left: 6px;
}
.chat .chat-history .message {
color: white;
padding: 18px 20px;
line-height: 26px;
font-size: 16px;
border-radius: 7px;
margin-bottom: 30px;
width: 90%;
position: relative;
}
.chat .chat-history .message:after {
bottom: 100%;
left: 7%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #86BB71;
border-width: 10px;
margin-left: -10px;
}
.chat .chat-history .my-message {
background: #86BB71;
}
.chat .chat-history .other-message {
background: #94C2ED;
}
.chat .chat-history .other-message:after {
border-bottom-color: #94C2ED;
left: 93%;
}
.chat .chat-message {
padding: 30px;
}
.chat .chat-message textarea {
width: 100%;
border: none;
padding: 10px 20px;
font: 14px/22px "Lato", Arial, sans-serif;
margin-bottom: 10px;
border-radius: 5px;
resize: none;
}
.chat .chat-message .fa-file-o, .chat .chat-message .fa-file-image-o {
font-size: 16px;
color: gray;
cursor: pointer;
}
.chat .chat-message button {
float: right;
color: #94C2ED;
font-size: 16px;
text-transform: uppercase;
border: none;
cursor: pointer;
font-weight: bold;
background: #F2F5F8;
}
.chat .chat-message button:hover {
color: #75b1e8;
}
.online, .offline, .me {
margin-right: 3px;
font-size: 10px;
}
.online {
color: #86BB71;
}
.offline {
color: #E38968;
}
.me {
color: #94C2ED;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.float-right {
float: right;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.chat-container {
bottom: 0;
left: 0;
right: 0;
height: auto;
margin: 0 auto;
width: 750px;
background: #444753;
border-radius: 5px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<body class="app">
<!-- NAV -->
<div class="app-nav">
<ul class="tl-menu">
<li><img src="https://i.imgur.com/ngO5Ohx.png" alt="Mendr Logo" height="50" width="50"></li>
<li><img src="{{user.picture}}"></li>
<li><i class="fa fa-plus" style="font-size:30px; margin-top:20px;"></i></li>
<li><i class="fa fa-wechat" style="font-size:30px; margin-top:20px;"></i></li>
<li><i class="fa fa-map" style="font-size:30px; margin-top:20px;"></i></li>
<li><i class="fa fa-search" style="font-size:30px; margin-top:20px;"></i></li>
<li><i class="fa fa-sign-out" style="font-size:30px; margin-top:20px;"></i></li>
</ul>
</div>
<!-- END NAV -->
<!-- CHAT -->
<div id="chat-canvas">
<div class="clearfix chat-container">
<div class="people-list" id="people-list">
<div class="search">
<input type="text" placeholder="search" />
<i class="fa fa-search"></i>
</div>
<ul class="list">
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_01.jpg" alt="avatar" />
<div class="about">
<div class="name">Vincent Porter</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_02.jpg" alt="avatar" />
<div class="about">
<div class="name">Aiden Chavez</div>
<div class="status">
<i class="fa fa-circle offline"></i> left 7 mins ago
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_03.jpg" alt="avatar" />
<div class="about">
<div class="name">Mike Thomas</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_04.jpg" alt="avatar" />
<div class="about">
<div class="name">Erica Hughes</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_05.jpg" alt="avatar" />
<div class="about">
<div class="name">Ginger Johnston</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_06.jpg" alt="avatar" />
<div class="about">
<div class="name">Tracy Carpenter</div>
<div class="status">
<i class="fa fa-circle offline"></i> left 30 mins ago
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_07.jpg" alt="avatar" />
<div class="about">
<div class="name">Christian Kelly</div>
<div class="status">
<i class="fa fa-circle offline"></i> left 10 hours ago
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_08.jpg" alt="avatar" />
<div class="about">
<div class="name">Monica Ward</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_09.jpg" alt="avatar" />
<div class="about">
<div class="name">Dean Henry</div>
<div class="status">
<i class="fa fa-circle offline"></i> offline since Oct 28
</div>
</div>
</li>
<li class="clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_10.jpg" alt="avatar" />
<div class="about">
<div class="name">Peyton Mckinney</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
</ul>
</div>
<div class="activity-info">
<div class="chat">
<div class="chat-header clearfix">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_01_green.jpg" alt="avatar" />
<div class="chat-about">
<div class="chat-with">Chat with Vincent Porter</div>
<div class="chat-num-messages">already 1 902 messages</div>
</div>
<i class="fa fa-star"></i>
</div> <!-- end chat-header -->
<div class="chat-history">
<ul>
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-time" >10:10 AM, Today</span>
<span class="message-data-name" >Olia</span> <i class="fa fa-circle me"></i>
</div>
<div class="message other-message float-right">
Hi Vincent, how are you? How is the project coming along?
</div>
</li>
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
<span class="message-data-time">10:12 AM, Today</span>
</div>
<div class="message my-message">
Are we meeting today? Project has been already finished and I have results to show you.
</div>
</li>
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-time" >10:14 AM, Today</span>
<span class="message-data-name" >Olia</span> <i class="fa fa-circle me"></i>
</div>
<div class="message other-message float-right">
Well I am not sure. The rest of the team is not here yet. Maybe in an hour or so? Have you faced any problems at the last phase of the project?
</div>
</li>
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
<span class="message-data-time">10:20 AM, Today</span>
</div>
<div class="message my-message">
Actually everything was fine. I'm very excited to show this to our team.
</div>
</li>
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle online"></i> Vincent</span>
<span class="message-data-time">10:31 AM, Today</span>
</div>
<i class="fa fa-circle online"></i>
<i class="fa fa-circle online" style="color: #AED2A6"></i>
<i class="fa fa-circle online" style="color:#DAE9DA"></i>
</li>
</ul>
</div> <!-- end chat-history -->
<div class="chat-message clearfix">
<textarea name="message-to-send" id="message-to-send" placeholder ="Type your message" rows="3"></textarea>
<i class="fa fa-file-o"></i>
<i class="fa fa-file-image-o"></i>
<button>Send</button>
</div> <!-- end chat-message -->
</div> <!-- end chat -->
</div>
</div>
</div>
</body>
You should use calc(%100 - 200px); as a value to the width. Look up calc CSS it will work because I had the same problem.
Here you go: https://www.w3schools.com/cssref/func_calc.asp
I tried to solve your problem. please check https://jsfiddle.net/komal10041992/v5k1Lhgf/4/. I removed overflow property, gave height:auto and width: 100%
Related
I'm working on site that have header , content and footer just like other sites , my Problem is when creating the footer it's not stick in document bottom and stick at the bottom of body in html , Here the picture show what I mean :
if I use fixed position for footer in css the result show me like this:
but the main problem is , if Added footer after last div in body I get white space after it , and if use position fix , the footer show in bottom 0 , for better understanding I have one more picture :
as you see in this picture footer fixed in bottom of user view not document , so that all I need is get footer attached to end of document after all contents no body or user view.
/*End FontFamily*/
/*===========================================================================*/
/*General style*/
body{
font-family: Vazirmatn;
}
.shadow{
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.cardbox{
background-color: white;
margin-bottom: 16px;
}
hr{
color: lightgray;
}
a{
text-decoration: none;
}
.pull-right {
float: right;
}
.pull-left {
float: left;
}
.green{
color: green;
}
.red{
color: red;
}
.gray{
color: darkgray;
}
.darkgreen{
color: darkgreen;
}
/*end General Style*/
/*===========================================================================*/
/*breadcrumb*/
/* Style the list */
ul.breadcrumb {
padding: 8px 16px;
list-style: none;
height: 24px;
width: 100%;
font-family: Vazirmatn;
}
/* Display list items side by side */
ul.breadcrumb li {
display: inline;
font-size: 10px;
}
/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
padding: 8px;
color: lightgray;
content: "/\00a0";
}
/* Add a color to all links inside the list */
ul.breadcrumb li a {
color: lightgray;
text-decoration: none;
}
/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
color: #01447e;
text-decoration: underline;
}
/*End breadcrumb*/
/*===========================================================================*/
/*side blocks*/
/*--- Sidebar ---*/
.sidebarblock {
background-color: #ffffff;
border-radius: 2px;
box-shadow: 0 1px 2px #c9cccd;
margin-bottom: 20px;
}
.sidebarblock h3 {
color: #363838;
font-size: 16px;
margin: 0;
padding: 20px;
font-weight: 600;
}
.sidebarblock .divline {
height: 1px;
line-height: 1px;
border-bottom: solid 1px #f1f1f1;
}
.sidebarblock .blocktxt {
padding:20px;
}
.sidebarblock .blocktxtlight{
font-size: 12px;
padding:4px 20px 4px 20px;
}
ul.cats li {
list-style: none;
display: block;
margin:0;
padding:0;
line-height: 30px;
}
ul.cats {
margin: 0;
padding: 0;
}
ul.cats li a {
font-size: 14px;
color: #363838;
line-height: 30px;
}
ul.cats .badge {
background-color: #bdc3c7;
font-size: 12px;
color: #ffffff;
margin-top: 7px;
}
.sidebarblock .blocktxt {
font-size: 14px;
color: #363838;
}
.sidebarblock .blocktxt .smal {
font-size: 12px;
}
.chbox {
width: 50px;
}
table.poll {
width: 100%;
}
.progress-bar.color1 {
background-color: #9b59b6;
}
.progress-bar.color2 {
background-color: #3498db;
}
.progress-bar.color3 {
background-color: #e67e22;
}
.progress-bar {
font-size: 14px;
color: #ffffff;
line-height: 31px;
text-align: left;
padding-left: 10px;
box-shadow: none;
}
.progress {
background-color: #ecf0f1;
height: 31px;
border-radius: 2px;
box-shadow: none;
}
.poll label {
margin-bottom: 0;
margin-left: 20px;
}
.poll input[type="radio"] {
display:none;
}
.poll input[type="radio"] + label {
display:inline-block;
width:31px;
height:31px;
background: url(radio.jpg) 0 0 no-repeat;
vertical-align:middle;
cursor:pointer;
}
.poll input[type="radio"]:checked + label {
background: url(radio.jpg) -31px 0 no-repeat;
}
td.chbox {
vertical-align: top;
}
/*end side blocks*/
/*===========================================================================*/
/*Tickets review*/
.beforepagination {
margin-bottom: 0;
}
.ticket {
background-color: #ffffff;
border-radius: 2px;
box-shadow: 0 1px 2px #c9cccd;
margin-bottom: 20px;
padding: 8px
}
.ticket .userinfo {
padding: 15px 0 15px 0;
}
.ticket .avatar {
margin-right: 5px;
}
.ticket .co-ownership {
width: 100%;
border-top: solid 1px #f1f1f1;
margin-top: 12px;
padding-top: 7px;
margin: auto;
text-align: center;
}
.ticket .posttext {
text-align: justify;
text-justify: inter-word;
padding-right: 8px;
font-size: 14px;
margin-left: 8px;
}
.ticket h2 {
color: #363838;
font-size: 18px;
margin-top: 10px;
margin-bottom: 10px;
}
.ticket .comments {
padding: 18px 0 25px 0;
text-align: center;
}
.ticket .comments .commentbg {
background-color: #bdc3c7;
border-radius: 2px;
display: inline-block;
padding: 6px 8px;
color: #ffffff;
font-size: 10px;
position: relative;
}
.ticket .comments .commentbg .mark {
width: 10%;
height: 11px;
background-color: #bdc3c7;
position: absolute;
bottom: 0;
left: 36%;
margin-bottom: -5px;
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-webkit-transform:rotate(45deg); /* Opera, Chrome, and Safari */
}
.ticket .views {
color:#9da6aa;
font-size: 10px;
text-align: center;
line-height: 29px;
}
.ticket .views i {
font-size: 10px;
}
.ticket .time {
color:#9da6aa;
font-size: 12px;
text-align: center;
line-height: 29px;
}
.ticket .time i {
font-size: 14px;
}
.ticket .ticketinfo {
border-right: solid 1px #f1f1f1;
}
.avatar {
position: relative;
}
.avatar img {
border-radius: 50%;
border: 0;
vertical-align: middle;
}
.avatar .online {
background-color: green;
}
.avatar .offline {
background-color: lightgray;
}
.avatar .status {
position: absolute;
left: 0;
bottom: 0;
width: 12px;
height: 12px;
line-height: 12px;
border-radius: 50%;
border: solid 2px #ffffff;
}
.postinfobot {
border-top: solid 1px #f1f1f1;
line-height: 32px;
padding: 0 0 0 0;
}
.postinfobot .information {
margin-left: 18px;
font-size: 9px;
color: #bdc3c7;
}
.postinfobot .information i {
font-size: 12px;
color: #bdc3c7;
padding-right: 8px;
}
.toTheTicket {
display: flex;
height: 100%;
align-items: center;
margin: 0;
padding: 0;
}
.toTheTicket i {
line-height: normal;
display: inline-block;
vertical-align: middle;
padding-left: 16px;
}
.tagsintickets{
padding: 8px 20px 8px 20px;
}
/*End Tickets review*/
/*===========================================================================*/
/*--- Pagination ---*/
.pagination {
display: inline-block;
font-size: 9px;
padding: 8px 0 0 0;
}
.pagination a {
color: black;
float: left;
padding: 4px 8px;
text-decoration: none;
}
.pagination a.active {
background-color: lightblue;
color: white;
border-radius: 5px;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
border-radius: 5px;
}
/*--- End Pagination ---*/
/*===========================================================================*/
/*Menu*/
.main_menu{
width: 100%;
height: 48px;
background-color: white;
margin-bottom: 8px;
}
.searchbox{
height: 32px;
}
.main_menu .wrap{
margin-top: 8px;
height: 32px;
margin-right: 8px;
width: 100%;
}
.main_menu .wrap input{
width: 40vw;
}
#media only screen and (max-width: 995px) {
.main_menu .wrap input{
width: 20vw;
}
}
#media only screen and (max-width: 765px) {
.main_menu .wrap input{
width: 45vw;
}
}
#media only screen and (max-width: 575px) {
.main_menu .wrap input{
width: 65vw;
}
}
.avt {
height: 48px;
}
.avt button {
margin-top: 8px;
height: 32px;
border: none;
box-shadow: none;
color: #ffffff;
font-size: 12px;
padding-left: 16px;
padding-right: 16px;
background-color: #1abc9c;
}
.avt .btn-primary:hover,
.avt .btn-primary:focus,
.avt .btn-primary:active,
.avt .btn-primary.active{
background-color: #1abc9c;
border: none;
box-shadow: none;
}
.env {
height: 32px;
margin-top: 8px;
font-size: 18px;
color:#cfd5d7;
line-height: 38px;
padding: 0 20px;
}
.main_menu .avatar {
margin-top: 8px;
margin-left: 8px;
}
.main_menu .avatar img {
border-radius: 50%;
}
.dropdown.avatar .status {
right: 14px;
}
/*End Menu*/
/*===========================================================================*/
/*header description*/
.headerDescription{
padding: 20px;
}
.headerDescription h4{
font-weight: 500;
}
.headerDescription p {
text-align: justify;
text-justify: inter-word;
font-size: 14px;
}
/*End header description*/
/*===========================================================================*/
/*footer*/
.footer{
width: 100%;
padding: 20px;
}
/*end footer*/
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>دمو نظام حل مسئله</title>
<script type="text/javascript" src="plugins/jquery/jquery-3.6.3.min.js"></script>
<script type="text/javascript" src="plugins/bootstrap/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="plugins/bootstrap/bootstrap.rtl.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="mian.css">
<link rel="stylesheet" href="plugins/fontawesome/css/all.min.css">
<link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
<link rel="manifest" href="/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body style="background-color: aliceblue">
<!--main body-->
<!--menu-->
<div class="main_menu shadow">
<div class="container">
<div class="row">
<div class="d-none d-xs-none d-sm-none d-md-block col-1 logo d-flex justify-content-center"><img src="favicon/android-icon-48x48.png" alt=""></div>
<div class="d-none d-sm-none d-md-block col-sm-3 col-lg-2 avt d-flex justify-content-center">
<div class="stnt pull-left">
<form action="03_new_topic.html" method="post" class="form">
<button class="btn btn-primary">طرح پرسش جدید</button>
</form>
</div>
<div class="clearfix"></div>
</div>
<div class="col-sm-auto col-lg-9 col-xs-12 d-flex justify-content-center">
<div class="avatar pull-right dropdown">
<a data-toggle="dropdown" href="#"><img src="avatar2.jpg" height="32" width="32" ></a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">My Profile</a></li>
<li role="presentation"><a role="menuitem" tabindex="-2" href="#">Inbox</a></li>
<li role="presentation"><a role="menuitem" tabindex="-3" href="#">Log Out</a></li>
<li role="presentation"><a role="menuitem" tabindex="-4" href="04_new_account.html">Create account</a></li>
</ul>
</div>
<div class="wrap">
<form action="#" method="post" class="form">
<div class="pull-right txt">
<input type="text" class="searchbox form-control" placeholder="[جستجو...]">
</div>
<div class="pull-right">
<button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
</div>
<div class="clearfix"></div>
</form>
</div>
<div class="env pull-left d-none d-sm-block"><i class="gray fa-solid fa-bell"></i></div>
</div>
</div>
</div>
</div>
<!--end menu -->
<div class="container">
<!-- breadcrumb-->
<div class="row">
<ul class="breadcrumb">
<li>نظام حل مسئله</li>
<li>مسائل مطرح شده</li>
<li>خدمات مشترکین</li>
</ul>
</div>
<!-- end breadcrumb-->
<!-- main content row-->
<div class="row">
<div class="col-sm-12 col-md-8">
<div class="headerDescription cardbox shadow">
<h5>سوالات برچسب شده [خدمات مشترکین]</h5>
<p>این ستاد وظیفه دارد که جهت پاسخگویی صحیح و رضایت حال مشترکین محترم با ادارات تابعه خود هماهنگ شده و درخواستها و پیشنهاداتی که به خدمات مشترکین در ستاد ارجاع میگردد براساس مقررات و آئین نامه تکمیلی تعرفههای برق آنرا تا حصول نتیجه پیگیری نماید کارهایی که در این ستاد انجام میشود بصورت خلاصه بشرح ذیل میباشد:</p>
<p>۱ - رسیدگی به شکوائیه جهت اشتراکهای عادی و دیماند<br />
۲ - بررسی تعدیلات در بخش عادی و دیماند<br />
۳ - نظارت بر فروش انشعابات عادی ودیماند در شهرستانهای تابعه شرکت<br />
۴ - بازرسی موردی و اتفاقی از ادارات مشترکین در شهرستانهای تابعه شرکت<br />
<hr>
<div class="filter">
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn"><span class="fa-solid fa-eye fa-lg" aria-hidden="true"></span>
دنبال کردن</button>
<button type="button" class="btn"><span class="fa-regular fa-clock fa-lg" aria-hidden="true"></span>
تازه ها</button>
<button type="button" class="btn"><span class="fa-solid fa-chart-line fa-lg" aria-hidden="true"></span>
فعال ترین</button>
</div>
</div>
</div>
<div class="ticket beforepagination shadow cardbox">
<div class="topwrap">
<div class="row">
<div class="col-md-1 col-sm-2 d-flex justify-content-center">
<div class="userinfo pull-right">
<div class="avatar">
<img src="avatar4.jpg" alt="">
<div class="status offline"> </div>
</div>
<div class="co-ownership">
<i class="fa-regular fa-circle-check gray"></i>
<i class="fa-solid fa-lock green"></i>
</div>
</div>
</div>
<div class="col-md-10 col-sm-8">
<div class="posttext pull-right">
<h2>جا به جایی واحد مالی (بسته شده)</h2>
<p>از لحاظ استقرار موقعیت واحد مالی اصلاً جالب نیست و فکر می کنم باید در جای دیگه ای مستقر بشوند ، بنظرم به قسمت ساختمان شماره 5 بروند بهتر است.یا شاید هم در جای دیگری</p>
</div>
</div>
<div class="col-md-1 col-sm-2 p-0 pb-2 d-flex justify-content-center">
<div class="toTheTicket"><i class="fa-regular fa-eye-slash fa-2x gray"></i></div>
</div>
</div>
<div class="tagsintickets">
<span class="badge bg-light text-dark">صنعت برق</span>
<span class="badge bg-light text-dark">ساختارسازمانی</span>
<span class="badge bg-light text-dark">واحدسازمانی</span>
<span class="badge bg-light text-dark">ساختمان</span>
<span class="badge bg-light text-dark">مالی</span>
</div>
<div class="clearfix"></div>
</div>
<div class="postinfobot">
<div class="information pull-right"><i class="fa-regular fa-clock"> </i> 10 آبان ماه 1401 ساعت 12:10</div>
<div class="information pull-right"><i class="fa-regular fa-user"> </i>شهرام ارمنی</div>
<div class="information pull-right"><i class="fa-solid fa-sitemap"> </i>معاونت مالی</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-lg-12 col-xs-12 col-md-12 pb-2 d-flex justify-content-center cardbox shadow">
<div class="pagination">
»
1
2
۳
...
978
979
«
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="sidebarblock shadow cardbox">
<h3>دسته بندی ها</h3>
<div class="divline"></div>
<div class="blocktxt">
<ul class="cats">
<li>خدمات مشترکین<span class="badge pull-left">20</span></li>
<li>قبوض برق<span class="badge pull-left">10</span></li>
<li>رفع حریم شبکه توزیع<span class="badge pull-left">50</span></li>
<li>برآورد هزینه انشعاب<span class="badge pull-left">36</span></li>
<li>سیستم جامع مالی(طلای شرق)<span class="badge pull-left">41</span></li>
<li>سیستم جامع مشترکین<span class="badge pull-left">11</span></li>
<li>سامانه فنی و مهندسی(سنم)<span class="badge pull-left">5</span></li>
</ul>
</div>
</div>
</div>
<!-- main content row-->
</div>
<!--end main body-->
<script>
function walkNode(node) {
if (node.nodeType == 3) {
node.data = node.data.replace(/\d/g,convert);
}
for (var i = 0; i < node.childNodes.length; i++) {
walkNode(node.childNodes[i]);
}
}
walkNode(document.getElementsByTagName('body')[0]);
function convert(a){
return ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'][a];
}
</script>
</body>
<footer>
<div class="footer cardbox shadow">
The Footer is Here!
</div>
</footer>
</html>
Is this what you want ?
I am using css grid for this. Check the css at the start of the document.
To learn how it works : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
body {
font-family: Vazirmatn;
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}
.main_menu {
grid-row: 1;
}
.main_content {
grid-row: 2;
}
.footer {
grid-row: 3;
}
/*End FontFamily*/
/*===========================================================================*/
/*General style*/
.shadow {
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.cardbox {
background-color: white;
margin-bottom: 16px;
}
hr {
color: lightgray;
}
a {
text-decoration: none;
}
.pull-right {
float: right;
}
.pull-left {
float: left;
}
.green {
color: green;
}
.red {
color: red;
}
.gray {
color: darkgray;
}
.darkgreen {
color: darkgreen;
}
/*end General Style*/
/*===========================================================================*/
/*breadcrumb*/
/* Style the list */
ul.breadcrumb {
padding: 8px 16px;
list-style: none;
height: 24px;
width: 100%;
font-family: Vazirmatn;
}
/* Display list items side by side */
ul.breadcrumb li {
display: inline;
font-size: 10px;
}
/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
padding: 8px;
color: lightgray;
content: "/\00a0";
}
/* Add a color to all links inside the list */
ul.breadcrumb li a {
color: lightgray;
text-decoration: none;
}
/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
color: #01447e;
text-decoration: underline;
}
/*End breadcrumb*/
/*===========================================================================*/
/*side blocks*/
/*--- Sidebar ---*/
.sidebarblock {
background-color: #ffffff;
border-radius: 2px;
box-shadow: 0 1px 2px #c9cccd;
margin-bottom: 20px;
}
.sidebarblock h3 {
color: #363838;
font-size: 16px;
margin: 0;
padding: 20px;
font-weight: 600;
}
.sidebarblock .divline {
height: 1px;
line-height: 1px;
border-bottom: solid 1px #f1f1f1;
}
.sidebarblock .blocktxt {
padding: 20px;
}
.sidebarblock .blocktxtlight {
font-size: 12px;
padding: 4px 20px 4px 20px;
}
ul.cats li {
list-style: none;
display: block;
margin: 0;
padding: 0;
line-height: 30px;
}
ul.cats {
margin: 0;
padding: 0;
}
ul.cats li a {
font-size: 14px;
color: #363838;
line-height: 30px;
}
ul.cats .badge {
background-color: #bdc3c7;
font-size: 12px;
color: #ffffff;
margin-top: 7px;
}
.sidebarblock .blocktxt {
font-size: 14px;
color: #363838;
}
.sidebarblock .blocktxt .smal {
font-size: 12px;
}
.chbox {
width: 50px;
}
table.poll {
width: 100%;
}
.progress-bar.color1 {
background-color: #9b59b6;
}
.progress-bar.color2 {
background-color: #3498db;
}
.progress-bar.color3 {
background-color: #e67e22;
}
.progress-bar {
font-size: 14px;
color: #ffffff;
line-height: 31px;
text-align: left;
padding-left: 10px;
box-shadow: none;
}
.progress {
background-color: #ecf0f1;
height: 31px;
border-radius: 2px;
box-shadow: none;
}
.poll label {
margin-bottom: 0;
margin-left: 20px;
}
.poll input[type="radio"] {
display: none;
}
.poll input[type="radio"]+label {
display: inline-block;
width: 31px;
height: 31px;
background: url(radio.jpg) 0 0 no-repeat;
vertical-align: middle;
cursor: pointer;
}
.poll input[type="radio"]:checked+label {
background: url(radio.jpg) -31px 0 no-repeat;
}
td.chbox {
vertical-align: top;
}
/*end side blocks*/
/*===========================================================================*/
/*Tickets review*/
.beforepagination {
margin-bottom: 0;
}
.ticket {
background-color: #ffffff;
border-radius: 2px;
box-shadow: 0 1px 2px #c9cccd;
margin-bottom: 20px;
padding: 8px
}
.ticket .userinfo {
padding: 15px 0 15px 0;
}
.ticket .avatar {
margin-right: 5px;
}
.ticket .co-ownership {
width: 100%;
border-top: solid 1px #f1f1f1;
margin-top: 12px;
padding-top: 7px;
margin: auto;
text-align: center;
}
.ticket .posttext {
text-align: justify;
text-justify: inter-word;
padding-right: 8px;
font-size: 14px;
margin-left: 8px;
}
.ticket h2 {
color: #363838;
font-size: 18px;
margin-top: 10px;
margin-bottom: 10px;
}
.ticket .comments {
padding: 18px 0 25px 0;
text-align: center;
}
.ticket .comments .commentbg {
background-color: #bdc3c7;
border-radius: 2px;
display: inline-block;
padding: 6px 8px;
color: #ffffff;
font-size: 10px;
position: relative;
}
.ticket .comments .commentbg .mark {
width: 10%;
height: 11px;
background-color: #bdc3c7;
position: absolute;
bottom: 0;
left: 36%;
margin-bottom: -5px;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-webkit-transform: rotate(45deg);
/* Opera, Chrome, and Safari */
}
.ticket .views {
color: #9da6aa;
font-size: 10px;
text-align: center;
line-height: 29px;
}
.ticket .views i {
font-size: 10px;
}
.ticket .time {
color: #9da6aa;
font-size: 12px;
text-align: center;
line-height: 29px;
}
.ticket .time i {
font-size: 14px;
}
.ticket .ticketinfo {
border-right: solid 1px #f1f1f1;
}
.avatar {
position: relative;
}
.avatar img {
border-radius: 50%;
border: 0;
vertical-align: middle;
}
.avatar .online {
background-color: green;
}
.avatar .offline {
background-color: lightgray;
}
.avatar .status {
position: absolute;
left: 0;
bottom: 0;
width: 12px;
height: 12px;
line-height: 12px;
border-radius: 50%;
border: solid 2px #ffffff;
}
.postinfobot {
border-top: solid 1px #f1f1f1;
line-height: 32px;
padding: 0 0 0 0;
}
.postinfobot .information {
margin-left: 18px;
font-size: 9px;
color: #bdc3c7;
}
.postinfobot .information i {
font-size: 12px;
color: #bdc3c7;
padding-right: 8px;
}
.toTheTicket {
display: flex;
height: 100%;
align-items: center;
margin: 0;
padding: 0;
}
.toTheTicket i {
line-height: normal;
display: inline-block;
vertical-align: middle;
padding-left: 16px;
}
.tagsintickets {
padding: 8px 20px 8px 20px;
}
/*End Tickets review*/
/*===========================================================================*/
/*--- Pagination ---*/
.pagination {
display: inline-block;
font-size: 9px;
padding: 8px 0 0 0;
}
.pagination a {
color: black;
float: left;
padding: 4px 8px;
text-decoration: none;
}
.pagination a.active {
background-color: lightblue;
color: white;
border-radius: 5px;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
border-radius: 5px;
}
/*--- End Pagination ---*/
/*===========================================================================*/
/*Menu*/
.main_menu {
width: 100%;
height: 48px;
background-color: white;
margin-bottom: 8px;
}
.searchbox {
height: 32px;
}
.main_menu .wrap {
margin-top: 8px;
height: 32px;
margin-right: 8px;
width: 100%;
}
.main_menu .wrap input {
width: 40vw;
}
#media only screen and (max-width: 995px) {
.main_menu .wrap input {
width: 20vw;
}
}
#media only screen and (max-width: 765px) {
.main_menu .wrap input {
width: 45vw;
}
}
#media only screen and (max-width: 575px) {
.main_menu .wrap input {
width: 65vw;
}
}
.avt {
height: 48px;
}
.avt button {
margin-top: 8px;
height: 32px;
border: none;
box-shadow: none;
color: #ffffff;
font-size: 12px;
padding-left: 16px;
padding-right: 16px;
background-color: #1abc9c;
}
.avt .btn-primary:hover,
.avt .btn-primary:focus,
.avt .btn-primary:active,
.avt .btn-primary.active {
background-color: #1abc9c;
border: none;
box-shadow: none;
}
.env {
height: 32px;
margin-top: 8px;
font-size: 18px;
color: #cfd5d7;
line-height: 38px;
padding: 0 20px;
}
.main_menu .avatar {
margin-top: 8px;
margin-left: 8px;
}
.main_menu .avatar img {
border-radius: 50%;
}
.dropdown.avatar .status {
right: 14px;
}
/*End Menu*/
/*===========================================================================*/
/*header description*/
.headerDescription {
padding: 20px;
}
.headerDescription h4 {
font-weight: 500;
}
.headerDescription p {
text-align: justify;
text-justify: inter-word;
font-size: 14px;
}
/*End header description*/
/*===========================================================================*/
/*footer*/
.footer {
width: 100%;
padding: 20px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!--main body-->
<!--menu-->
<div class="main_menu shadow">
<div class="container">
<div class="row">
<div class="d-none d-xs-none d-sm-none d-md-block col-1 logo d-flex justify-content-center">
<img src="favicon/android-icon-48x48.png" alt="">
</div>
<div class="d-none d-sm-none d-md-block col-sm-3 col-lg-2 avt d-flex justify-content-center">
<div class="stnt pull-left">
<form action="03_new_topic.html" method="post" class="form">
<button class="btn btn-primary">طرح پرسش جدید</button>
</form>
</div>
<div class="clearfix"></div>
</div>
<div class="col-sm-auto col-lg-9 col-xs-12 d-flex justify-content-center">
<div class="avatar pull-right dropdown">
<a data-toggle="dropdown" href="#"><img src="avatar2.jpg" height="32" width="32"></a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">My Profile</a></li>
<li role="presentation"><a role="menuitem" tabindex="-2" href="#">Inbox</a></li>
<li role="presentation"><a role="menuitem" tabindex="-3" href="#">Log Out</a></li>
<li role="presentation"><a role="menuitem" tabindex="-4" href="04_new_account.html">Create account</a></li>
</ul>
</div>
<div class="wrap">
<form action="#" method="post" class="form">
<div class="pull-right txt">
<input type="text" class="searchbox form-control" placeholder="[جستجو...]">
</div>
<div class="pull-right">
<button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
</div>
<div class="clearfix"></div>
</form>
</div>
<div class="env pull-left d-none d-sm-block"><i class="gray fa-solid fa-bell"></i></div>
</div>
</div>
</div>
</div>
<!--end menu -->
<div class="container main_content">
<!-- breadcrumb-->
<div class="row">
<ul class="breadcrumb">
<li>نظام حل مسئله</li>
<li>مسائل مطرح شده</li>
<li>خدمات مشترکین</li>
</ul>
</div>
<!-- end breadcrumb-->
<!-- main content row-->
<div class="row">
<div class="col-sm-12 col-md-8">
<div class="headerDescription cardbox shadow">
<h5>سوالات برچسب شده [خدمات مشترکین]</h5>
<p>این ستاد وظیفه دارد که جهت پاسخگویی صحیح و رضایت حال مشترکین محترم با ادارات تابعه خود هماهنگ شده و درخواستها و پیشنهاداتی که به خدمات مشترکین در ستاد ارجاع میگردد براساس مقررات و آئین نامه تکمیلی تعرفههای برق آنرا تا حصول نتیجه پیگیری نماید
کارهایی که در این ستاد انجام میشود بصورت خلاصه بشرح ذیل میباشد:</p>
<p>۱ - رسیدگی به شکوائیه جهت اشتراکهای عادی و دیماند<br /> ۲ - بررسی تعدیلات در بخش عادی و دیماند<br /> ۳ - نظارت بر فروش انشعابات عادی ودیماند در شهرستانهای تابعه شرکت<br /> ۴ - بازرسی موردی و اتفاقی از ادارات مشترکین در شهرستانهای تابعه شرکت<br
/>
<hr>
<div class="filter">
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn"><span class="fa-solid fa-eye fa-lg" aria-hidden="true"></span>
دنبال کردن</button>
<button type="button" class="btn"><span class="fa-regular fa-clock fa-lg" aria-hidden="true"></span>
تازه ها</button>
<button type="button" class="btn"><span class="fa-solid fa-chart-line fa-lg" aria-hidden="true"></span>
فعال ترین</button>
</div>
</div>
</div>
<div class="ticket beforepagination shadow cardbox">
<div class="topwrap">
<div class="row">
<div class="col-md-1 col-sm-2 d-flex justify-content-center">
<div class="userinfo pull-right">
<div class="avatar">
<img src="avatar4.jpg" alt="">
<div class="status offline"> </div>
</div>
<div class="co-ownership">
<i class="fa-regular fa-circle-check gray"></i>
<i class="fa-solid fa-lock green"></i>
</div>
</div>
</div>
<div class="col-md-10 col-sm-8">
<div class="posttext pull-right">
<h2>جا به جایی واحد مالی (بسته شده)</h2>
<p>از لحاظ استقرار موقعیت واحد مالی اصلاً جالب نیست و فکر می کنم باید در جای دیگه ای مستقر بشوند ، بنظرم به قسمت ساختمان شماره 5 بروند بهتر است.یا شاید هم در جای دیگری</p>
</div>
</div>
<div class="col-md-1 col-sm-2 p-0 pb-2 d-flex justify-content-center">
<div class="toTheTicket"><i class="fa-regular fa-eye-slash fa-2x gray"></i></div>
</div>
</div>
<div class="tagsintickets">
<span class="badge bg-light text-dark">صنعت برق</span>
<span class="badge bg-light text-dark">ساختارسازمانی</span>
<span class="badge bg-light text-dark">واحدسازمانی</span>
<span class="badge bg-light text-dark">ساختمان</span>
<span class="badge bg-light text-dark">مالی</span>
</div>
<div class="clearfix"></div>
</div>
<div class="postinfobot">
<div class="information pull-right"><i class="fa-regular fa-clock"> </i> 10 آبان ماه 1401 ساعت 12:10</div>
<div class="information pull-right"><i class="fa-regular fa-user"> </i>شهرام ارمنی</div>
<div class="information pull-right"><i class="fa-solid fa-sitemap"> </i>معاونت مالی</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-lg-12 col-xs-12 col-md-12 pb-2 d-flex justify-content-center cardbox shadow">
<div class="pagination">
»
1
2
۳
...
978
979
«
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="sidebarblock shadow cardbox">
<h3>دسته بندی ها</h3>
<div class="divline"></div>
<div class="blocktxt">
<ul class="cats">
<li>خدمات مشترکین<span class="badge pull-left">20</span></li>
<li>قبوض برق<span class="badge pull-left">10</span></li>
<li>رفع حریم شبکه توزیع<span class="badge pull-left">50</span></li>
<li>برآورد هزینه انشعاب<span class="badge pull-left">36</span></li>
<li>سیستم جامع مالی(طلای شرق)<span class="badge pull-left">41</span></li>
<li>سیستم جامع مشترکین<span class="badge pull-left">11</span></li>
<li>سامانه فنی و مهندسی(سنم)<span class="badge pull-left">5</span></li>
</ul>
</div>
</div>
</div>
<!-- main content row-->
</div>
</div>
<!--end main body-->
<footer>
<div class="footer cardbox m-0 text-center shadow">
The Footer is Here!
</div>
</footer>
I am creating a Twitter clone but the sidebar moves down when I create the main page contents. I tried using Position - fixed and relative but still the same issue. Before I added the main page content, the sidebar was correctly positioned (please see screenshot) but as soon as its added, the sidebar moves down(please see screenshot).
I'm using Grid to create the three columns to give the Twitter aesthetics.
What am I doing wrong?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.twitter-logo {
height: 28px;
filter: invert(52%) sepia(50%) saturate(2964%) hue-rotate(179deg) brightness(95%) contrast(97%);
margin-left: 25px;
}
.left-sidebar {
/* position: fixed; */
position: relative;
}
.navbar-brand:hover {
background: rgba(29, 161, 242, 0.1);
border-radius: 50%;
color: #1da0f2;
margin-right: 23px;
/* padding: 20px; */
}
.left-sidebar-menu {
font-size: 20px;
cursor: pointer;
font-weight: 700;
display: flex;
color: rgb(15, 20, 25);
font-family: 'Times New Roman', Times, serif;
}
.left-sidebar-menu-icon {
align-items: flex-start;
height: 26px;
margin-right: 20px;
}
.nav-item {
padding: 10px;
margin: 2px 2px;
}
.nav-item:hover {
background: rgba(29, 161, 242, 0.1);
border-radius: 20px;
color: #1da0f2;
}
/* --------------------------------MAIN PAGE------ */
.main-page-header {
font-size: 18px;
height: 48px;
font-weight: 700;
font-family: 'Open Sans', sans-serif;
}
.main-page-header-profile-picture {
border-radius: 50%;
height: 48px;
}
.main-page-input {
border: 0 solid black;
}
.main-page-input-box {
padding-top: 10px;
border-bottom: 1px solid #e6e6e6;
}
.main-page-tweet-box {
margin-top: -5px;
word-wrap: break-word;
word-break: break-all;
outline: none;
}
.main-page-tweet-box:focus main-page-tweet-box:hover {
outline: none !important;
box-shadow: none;
border: 0;
}
.main-page-tweet-box {
height: 130px;
border: 0;
margin-top: -10px;
}
::placeholder {
font-family: 'Open Sans', sans-serif;
opacity: 1;
font-size: 18px;
/* position: absolute;
margin-top: 10px; */
}
.main-page-input-privacy {
/* display: flex;
align-items: flex-start; */
display: inline-block;
color: #1da1f2;
cursor: pointer;
}
.main-page-input-privacy-icon,
main-page-input-privacy-text {
display: inline;
}
/* .main-page-input-privacy i{
float: left;
} */
.main-page-input-icons {
display: flex;
justify-content: space-between;
margin-left: -35PX;
}
.main-page-input-icons-ul {
list-style-type: none;
margin-left: 5px;
}
.main-page-input-icons li {
display: inline;
/* width: 300px; */
list-style: none;
color: #1da1f2;
font-size: 20px;
margin: 0 2px;
height: 38px;
width: 38px;
cursor: pointer;
}
.main-page-tweet-button {
font-size: 16px;
font-family: 'Open Sans', sans-serif;
color: white;
background-color: #1da1f2;
text-align: center;
cursor: pointer;
/* width: 75px; */
/* height: 30px; */
border: none;
outline: none;
opacity: 0.5;
}
/* .main-page-input form {
} */
/* .left-sidebar-menu-icon-active using js {
filter: invert(52%) sepia(50%) saturate(2964%) hue-rotate(179deg) brightness(95%) contrast(97%);
} */
/* .left-sidebar-menu-btn {
} */
.tweetbox__input img {
border-radius: 50%;
height: 40px;
}
.tweetBox {
padding-bottom: 10px;
border-bottom: 8px solid var(--twitter-background);
padding-right: 10px;
}
.tweetBox form {
display: flex;
flex-direction: column;
}
.tweetbox__input {
display: flex;
padding: 20px;
}
.tweetbox__input input {
flex: 1;
margin-left: 20px;
font-size: 20px;
border: none;
outline: none;
}
.tweetBox__tweetButton {
background-color: var(--twitter-color);
border: none;
color: white;
font-weight: 900;
border-radius: 30px;
width: 80px;
height: 40px;
margin-top: 20px;
margin-left: auto;
}
.tweet {
display: flex;
margin-bottom: 4px;
border-bottom: 1px solid rgb(47, 51, 54);
cursor: pointer;
}
.tweet-author-image {
border-radius: 50%;
height: 48px;
width: 48px;
margin-right: 12px;
}
.tweet-feed-content {
margin-bottom: 15px;
padding-bottom: 12px;
}
.tweet-header {
display: flex;
font-size: 15px;
font-weight: 400;
}
.tweet-author-username {
font-family: 'Times New Roman', Times, serif;
/* color: rgb(231, 233, 234); */
}
.tweet-author-handle {
color: rgb(113, 118, 123);
}
.tweeted-time {
color: rgb(113, 118, 123);
}
.engagement-icons-ul {
display: flex;
list-style-type: none;
justify-content: space-between;
margin-left: -30px;
width: 400px;
}
<div class="container">
<div class="row">
<div class="col-3 navbar">
<nav>
<div class="left-sidebar">
<a class="navbar-brand" href="#">
<img src={ % static 'network/images/brand.svg' %} alt="Twitter logo" class="twitter-logo">
</a>
<ul class="nav flex-column left-sidebar-menu mb-4 mt-2">
<li class="nav-item">
<a class="nav-link" href="#">
<img src={ % static 'network/images/all-post.svg' %} alt="All post" class="left-sidebar-menu-icon"> All Post
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<img src={ % static 'network/images/following.svg' %} alt="Following" class="left-sidebar-menu-icon"> Following
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<img src={ % static 'network/images/notifications.svg' %} alt="Notifications" class="left-sidebar-menu-icon"> Notifications
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<img src={ % static 'network/images/messages.svg' %} alt="Messages" class="left-sidebar-menu-icon"> Messages
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<img src={ % static 'network/images/profile.svg' %} alt="Profile" class="left-sidebar-menu-icon"> Profile
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<img src={ % static 'network/images/more.svg' %} alt="More" class="left-sidebar-menu-icon"> More
</a>
</li>
<button class="btn btn-primary rounded-pill my-2 py-3">Tweet</button>
</ul>
</div>
</nav>
</div>
<div class="col-5">
<div class="main-page-header mt-3 sticky-top">Home</div>
<div class="main-page-input">
<!-- <form class="d-flex flex-column"> -->
<div class="row">
<div class="col-2 main-page-header-profile-picture">
<img src="https://i.pinimg.com/originals/a6/58/32/a65832155622ac173337874f02b218fb.png" class="main-page-header-profile-picture" alt="profile-picture" />
</div>
<div class="col-10">
<div class="main-page-input-box">
<div>
<textarea name="tweet-box" id="" class="form-control main-page-tweet-box text-wrap" cols="30" rows="10" placeholder="What's happening"></textarea>
<!-- <input type="text" class="form-control main-page-tweet-box text-wrap" id="exampleFormControlInput1" placeholder="What's happening"> -->
</div>
<div class="main-page-input-privacy pb-2 mt-3">
<i class="fas fa-globe-americas main-page-input-privacy-icon"></i>
<span class="ain-page-input-privacy-text ml-2">Everyone can reply</span>
</div>
</div>
<div class="main-page-input-icons mt-3">
<ul class="main-page-input-icons-ul">
<li><i class="fa-solid fa-image"></i></li>
<li><i class="fa-solid fa-square-poll-horizontal"></i></li>
<li><i class="fa-solid fa-face-grin"></i></li>
<li><i class="fa-regular fa-calendar"></i></li>
<li><i class="fa-solid fa-location-dot"></i></li>
</ul>
<button type="submit" class="btn btn-primary rounded-pill px-4 main-page-tweet-button"><strong>Tweet</strong></button>
</div>
</div>
</div>
<!-- </form> -->
</div>
<div class="tweet-feed">
<div class="tweet">
<img src="http://placeimg.com/140/140/people" alt="author profile picture" class="tweet-author-image" />
<div class="tweet-feed-content">
<div class="tweet-header">
Nick Huber
<div class="tweet-author-handle">#sweatystartup</div>
<div class="tweeted-time">8h</div>
</div>
<div class="tweet-content">
<div class="tweet-created-content">It is a wonderful day</div>
</div>
<div class="engagement-icons">
<ul class="engagement-icons-ul">
<li><i class="fa-regular fa-comment"></i></li>
<li><i class="fa-solid fa-retweet"></i></li>
<li><i class="fa-regular fa-heart"></i></li>
<li><i class="fa-solid fa-arrow-up-from-bracket"></i></li>
</ul>
</div>
</div>
</div>
<div class="tweet">
<img src="http://placeimg.com/140/140/animals" alt="author profile picture" class="tweet-author-image" />
<div class="tweet-feed-content">
<div class="tweet-header">
Randall
<div class="tweet-author-handle">#RandallKanna</div>
<div class="tweeted-time">18h</div>
</div>
<div class="tweet-content">
<div class="tweet-created-content">Hey friends</div>
<img src="http://placeimg.com/300/300/tech" alt="tweeter feed" />
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
TODO
</div>
</div>
</div>
Basically, i'm creating a custom select box when i finished the design part using css and when i wanted to add the "before" and "active" options so that the "arrow" and "menu" changes when the select box is active, I had some problems, when i add "active" to the class name in the browser the arrow is supposed to rotate but nothing happens instead.
HTML
<div class="custom_select_box_1_index">
<ul id="DefaultCategoryIndex"class="default_option_category_index">
<li>
<div class="option_allcategories">
<p>All Categories</p>
<i id="ArrowCategoryIndex" class="fa fa-chevron-up"></i>
</div>
</li>
</ul>
<ul id="OptionsCategoryIndex" class="select_option_category_index">
<li>
<div id="CategoryObjects" class="option objects">
<div class="icon"><i id="icon" class="fas fa-cube"></i></div>
<p class="category_text">Objects</p>
</div>
</li>
<li>
<div id="CategoryVehicules" class="option vehicules">
<div class="icon"><i id="icon" class="fas fa-car"></i></div>
<p class="category_text">Vehicules</p>
</div>
</li>
<li>
<div id="CategoryTechnology" class="option technology">
<div class="icon"><i id="icon" class="fas fa-mobile"></i></div>
<p class="category_text">Technology</p>
</div>
</li>
<li>
<div id="CategoryBooks" class="option books">
<div class="icon"><i id="icon" class="fas fa-book"></i></div>
<p class="category_text">Books</p>
</div>
</li>
<li>
<div id="CategoryGaming" class="option gaming">
<div class="icon"><i id="icon" class="fas fa-gamepad"></i></div>
<p class="category_text">Gaming</p>
</div>
</li>
<li>
<div id="CategoryOther" class="option other">
<div class="icon"><i id="icon" class="fas fa-ellipsis-h"></i></div>
<p class="category_text">Other...</p>
</div>
</li>
</ul>
</div>
CSS:
.custom_select_box_1_index{
font-family: Helvetica;
font-size: 19px;
color: var(--second-black);
box-sizing: content-box;
width: 250px;
height: 50px;
}
.custom_select_box_1_index > ul li{
list-style: none;
}
.custom_select_box_1_index .default_option_category_index:before{
content: "";
padding-top: 1px;
padding-bottom: 1px;
border-radius: 10px;
background-color: var(--white);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
cursor: pointer;
transform: rotate(180deg);
color: var(--black);
position: absolute;
margin-left: 170px;
margin-top: -39px;
cursor: pointer;
}
.custom_select_box_1_index .select_option_category_index{
background-color: var(--white);
border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
z-index: 1;
display: none
}
.select_option_category_index li{
position: relative;
margin-left: -38px;
background-color: var(--white);
border-radius: 10px;
width: 230px;
padding: 3px 8px;
cursor: pointer;
}
.custom_select_box_1_index .select_option_category_index li:hover{
background: var(--grey);
}
.category_text{
position: relative;
left: 30px;
}
.custom_select_box_1_index .option{
display: flex;
align-items: center;
}
.icon{
display: flex;
align-items: center;
margin-left: 15px;
}
#icon{
color: var(--black);
}
.custom_select_box_1_index:active .select_option_category_index{
display: block;
}
.custom_select_box_1_index:active .default_option_category_index:before{
transform: rotate(0deg);
}
I want the arrow to rotate back to 0deg when the select bar is active (without using JavaScript).
You can leverage the CSS adjacent sibling selector +:
.custom_select_box_1_index {
font-family: Helvetica;
font-size: 19px;
color: var(--second-black);
box-sizing: content-box;
width: 250px;
height: 50px;
}
.custom_select_box_1_index>ul li {
list-style: none;
}
.custom_select_box_1_index .default_option_category_index:before {
content: "";
padding-top: 1px;
padding-bottom: 1px;
border-radius: 10px;
background-color: var(--white);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
cursor: pointer;
transform: rotate(180deg);
color: var(--black);
position: absolute;
margin-left: 170px;
margin-top: -39px;
cursor: pointer;
}
.custom_select_box_1_index .select_option_category_index {
background-color: var(--white);
border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
z-index: 1;
display: none
}
.select_option_category_index li {
position: relative;
margin-left: -38px;
background-color: var(--white);
border-radius: 10px;
width: 230px;
padding: 3px 8px;
cursor: pointer;
}
.custom_select_box_1_index .select_option_category_index li:hover {
background: var(--grey);
}
.category_text {
position: relative;
left: 30px;
}
.custom_select_box_1_index .option {
display: flex;
align-items: center;
}
.icon {
display: flex;
align-items: center;
margin-left: 15px;
}
#icon {
color: var(--black);
}
.custom_select_box_1_index:active .select_option_category_index {
display: block;
}
.custom_select_box_1_index:active .default_option_category_index:before {
transform: rotate(90deg);
}
.option_allcategories p:active+.fa-chevron-up {
transform: rotate(180deg);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="custom_select_box_1_index">
<ul id="DefaultCategoryIndex" class="default_option_category_index">
<li>
<div class="option_allcategories">
<p>All Categories</p>
<i id="ArrowCategoryIndex" class="fa fa-chevron-up"></i>
</div>
</li>
</ul>
<ul id="OptionsCategoryIndex" class="select_option_category_index">
<li>
<div id="CategoryObjects" class="option objects">
<div class="icon"><i id="icon" class="fas fa-cube"></i></div>
<p class="category_text">Objects</p>
</div>
</li>
<li>
<div id="CategoryVehicules" class="option vehicules">
<div class="icon"><i id="icon" class="fas fa-car"></i></div>
<p class="category_text">Vehicules</p>
</div>
</li>
<li>
<div id="CategoryTechnology" class="option technology">
<div class="icon"><i id="icon" class="fas fa-mobile"></i></div>
<p class="category_text">Technology</p>
</div>
</li>
<li>
<div id="CategoryBooks" class="option books">
<div class="icon"><i id="icon" class="fas fa-book"></i></div>
<p class="category_text">Books</p>
</div>
</li>
<li>
<div id="CategoryGaming" class="option gaming">
<div class="icon"><i id="icon" class="fas fa-gamepad"></i></div>
<p class="category_text">Gaming</p>
</div>
</li>
<li>
<div id="CategoryOther" class="option other">
<div class="icon"><i id="icon" class="fas fa-ellipsis-h"></i></div>
<p class="category_text">Other...</p>
</div>
</li>
</ul>
</div>
I have created a list of html lists which has an image and a text on the right.
I was trying to put a border on the top and bottom of each item list. And I also did try to remove the border at the top for the first child and the border bottom on the last child to make it equal.
Then I added a hover effect that will hover on each list and whenever active. However for some reason this is not working and the padding and border for each item is all mess up.
Tried my best to play around my boxes but still having a hard time fixing it.
Here's my CSS:
body{
color: #fff;
}
ul li {
list-style: none;
display: block;
clear: both;
}
.puff-list {
background-color: #34495e;
width: 260px;
float: left;
}
.puff-list .puffs h2{
text-align: center;
border-bottom: 1px solid #57789a;
padding: 20px 30px 35px 20px;
font-size: 23px;
font-weight: 400;
}
.puff-list .fa-puffs {
position: relative;
left: -25px;
color: #34495e;
}
.puff-list ul {
/*padding: 20px 40px;*/
padding: 0;
}
.puff-list ul li {
display: block;
list-style: none;
border-bottom: 1px solid #57789a;
padding-left: 39px;
padding-top: 15px;
}
.puff-list ul li:first-child{
border-top: none;
}
.puff-list ul li:last-child{
border-bottom: 1px solid #57789a;
}
.puff-list ul li:hover{
background-color: #5b7b9b;
cursor: pointer;
}
.puff-list .puff-details {
float: left;
margin-top: 8px;
}
.puff-list img {
margin-right: 5px;
float: left;
}
.puff-list .puff-details {
padding-left: 8px;
}
.puff-list .status {
color: #658aaf;
}
You can view the whole HTML and CSS playground on JSFIDDLE: https://jsfiddle.net/9b6w9L6m/
Any idea how can I fix this?
First you need to fix some things.
You have a float: left on your .puff-details which isn't needed, since you aren't floating any other elements on that line, so remove that.
The elements inside .puff-details are floated, which makes the "float outside" the element. Therefor you need to add the clearfix solution to make .puff-details expand:
.puff-list .puff-details {
/*float: left; < remove this line */
margin-top: 8px;
}
.puff-list .puff-details:after {
content: " ";
display: block;
height: 0;
clear: both;
}
The border on the first and last item are already working.
Complete code:
body {
color: #fff;
}
ul li {
list-style: none;
display: block;
clear: both;
}
.puff-list {
background-color: #34495e;
width: 260px;
float: left;
}
.puff-list .puffs h2 {
text-align: center;
border-bottom: 1px solid #57789a;
padding: 20px 30px 35px 20px;
font-size: 23px;
font-weight: 400;
}
.puff-list .fa-puffs {
position: relative;
left: -25px;
color: #34495e;
}
.puff-list ul {
/*padding: 20px 40px;*/
padding: 0;
}
.puff-list ul li {
display: block;
list-style: none;
border-bottom: 1px solid #57789a;
padding-left: 39px;
padding-top: 15px;
}
.puff-list ul li:first-of-type {
border-top: none;
}
.puff-list ul li:last-child {
border-bottom: 1px solid #57789a;
}
.puff-list ul li:hover {
background-color: #5b7b9b;
cursor: pointer;
}
.puff-list .puff-details {
/*float: left;*/
margin-top: 8px;
}
.puff-list .puff-details:after {
content: " ";
display: block;
height: 0;
clear: both;
}
.puff-list img {
margin-right: 5px;
float: left;
}
.puff-list .puff-details {
padding-left: 8px;
}
.puff-list .status {
color: #658aaf;
}
<aside class="puff-list" id="puff-list">
<div class="puffs">
<h2> <i class="fa fa-address-book-o"></i> Check List</h2>
</div>
<ul>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">Food</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">Russian</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">Honey</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">Mox</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">Party</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">Event</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">Rrose</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">test</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">Manga</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
</ul>
</aside>
You must add pseudo class for li like this
body{
color: #fff;
}
ul li {
list-style: none;
display: block;
clear: both;
}
.puff-list {
background-color: #34495e;
width: 260px;
float: left;
}
.puff-list .puffs h2{
text-align: center;
border-bottom: 1px solid #57789a;
padding: 20px 30px 35px 20px;
font-size: 23px;
font-weight: 400;
}
.puff-list .fa-puffs {
position: relative;
left: -25px;
color: #34495e;
}
.puff-list ul {
/*padding: 20px 40px;*/
padding: 0;
}
.puff-list ul li {
display: block;
list-style: none;
border-bottom: 1px solid #57789a;
padding-left: 39px;
padding-top: 15px;
}
.puff-list ul li:first-child{
border-top: none;
}
.puff-list ul li:last-child{
border-bottom: 1px solid #57789a;
}
.puff-list ul li:hover{
background-color: #5b7b9b;
cursor: pointer;
}
.puff-list ul li::after {
display: block;
content: "";
clear: both;
}
.puff-list .puff-details {
float: left;
margin-top: 8px;
}
.puff-list img {
margin-right: 5px;
float: left;
}
.puff-list .puff-details {
padding-left: 8px;
}
.puff-list .status {
color: #658aaf;
}
<aside class="puff-list" id="puff-list">
<div class="puffs">
<h2> <i class="fa fa-address-book-o"></i> Check List</h2>
</div>
<ul>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">Food</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">Russian</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">Honey</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">Mox</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">Party</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">Event</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">Rrose</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">test</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">Manga</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
</ul>
</aside>
Have you tried adding and removing border on the first and last child?
.puff-list ul li {
display: block;
list-style: none;
border-bottom: 1px solid #57789a;
padding-left: 39px;
padding-top: 15px;
}
.puff-list ul li:first-child{
border-top: none;
}
.puff-list ul li:last-child{
border-bottom: 1px solid #57789a;
}
And also try using shorthand padding instead of dividing them.
I have recent-posts div that show two post with their images and text. after recent-posts I have another div contact-us that contain an image and some text. My issue appear in extra-small size where recent-posts posts go under contact-us part. How can I fix that? The following is my codes and JsFiddle.
HTML:
<div id="recent-posts" class="center-block row">
<div class="posts col-md-3 col-sm-5 col-xs-9">
<div class="posts-div">
<div class="img-hover">
<img src="images/post1.jpg" class="img-responsive">
<div class="overlay col-md-12 col-xs-12">
<div>
<span class="fa fa-2x fa-square post-icon" ><span class="fa fa-heart"></span></span>
<span class="fa fa-2x fa-square post-icon" ><span>16</span></span>
</div>
<div>
<span class="fa fa-2x fa-square post-icon" ><span class="fa fa-eye"></span></span>
<span class="fa fa-2x fa-square post-icon" ><span>16</span></span>
</div>
</div>
</div>
<p class="text-center">dsfdsfsdfldshfdskfhdsf</div>
</div>
<div class="posts col-md-3 col-sm-5 col-xs-9">
<div class="posts-div">
<div class="img-hover">
<img src="images/post2.jpg" class="img-responsive">
<div class="overlay col-md-12 col-xs-12">
<div>
<span class="fa fa-2x fa-square post-icon" ><span class="fa fa-heart "></span></span>
<span class="fa fa-2x fa-square post-icon" ><span>16</span></span>
</div>
<div>
<span class="fa fa-2x fa-square post-icon" ><span class="fa fa-eye "></span></span>
<span class="fa fa-2x fa-square post-icon" ><span>16</span></span>
</div>
</div>
</div>
<p class="text-center">dsjkfhjdssafjsdkjhfdsf</p>
</div>
</div>
</div>
<div id="contact-us" class="row">
<div class="col-md-12 col-xs-12">
<img src="http://www.infocurse.com/wp-content/uploads/2014/11/716988156_1368083660.png" class="img-responsive">
<div id="contact-us-text">
<p>sdkf,sd,kfnds,nf,d.....</p>
<p>kdsfnks,dnf,ksdnf,kdsnf,kdsnf,d</p>
<button class="btn btn-success pull-left">124234234</button>
</div>
</div>
</div>
Css:
#recent-posts{
height: 350px;
display: flex;
justify-content: center;
position: relative;
flex-wrap: wrap;
margin-bottom: 100px;
}
.posts{
display: flex;
flex-direction: column;
height: 350px;
margin-top: 20px;
position: relative;
border-radius: 5px;
box-shadow: 1px 1px 5px #888888;
padding: 0;
margin-left: 20px;
margin-right: 20px;
}
.posts img{
border-radius: 5px 5px 0 0;
cursor: pointer;
}
.posts .btn-success{
position: absolute;
background-color: #01a89e;
width: 50%;
color: #101010;
cursor: auto;
margin-top: -17px;
margin-right: 25%;
}
.posts .btn-success:active{
background-color: #01a89e;
color: #101010;
box-shadow: none;
}
.posts p{
margin-top: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.overlay {
position: absolute;
top: 0;
bottom: 100%;
left: 0;
right: 0;
background-color: rgba(46, 183, 175, .7);
overflow: hidden;
height:0;
transition: .8s ease;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 5px 5px 0 0;
}
.overlay div:first-child{
margin-left: 15px;
}
.posts-div:hover .overlay {
bottom: 0;
top: 0;
height: auto;
overflow: hidden;
}
.img-hover{
position: relative;
}
.post-icon{
color: rgba(255, 255, 255, 1);
transform: rotate(45deg);
opacity: 1;
}
.post-icon span{
transform: rotate(-45deg);
font-size: 12px;
position: absolute;
left: 50%;
top: 0.6em;
margin-left: -7px;
color: #101010;
font-weight: bold;
}
.fa-heart{
color: red !important;
}
#contact-us{
height: 200px;
margin-bottom: 30px;
box-shadow: 0 1px 5px #666666, 0 -1px 5px #666666;
position: relative;
padding: 0;
overflow: hidden;
}
#contact-us-text{
position: absolute;
top: 20%;
left: 12%;
}
#contact-us-text p{
color: white;
}
#contact-us-text .btn-success{
background-color: #01a89e;
cursor: auto;
}
#contact-us-text .btn-success:active{
background-color: #01a89e;
box-shadow: none;
}
JsFiddle
Recent-posts class has a fixed height.
#recent-posts{
height: 350px; // THIS LINE IS THE REASON!
display: flex;
justify-content: center;
position: relative;
flex-wrap: wrap;
margin-bottom: 100px;
}
Updated fiddle