I want to create a chat application where will be the header with menu and bellow chat box with some messages and on the bottom the fixed part with input for inserting the chat message.
I've tried create the demo of this layout:
https://jsfiddle.net/6dchq2zq/2/
But I don't know how can I fix following issues:
1.) How calculate the height of the content where are messages and according these height show the scollbar. I've tried put the static value - for the demo.
2.) How create fixed bottom part with input which will be responsive
.chat-item{
background-color: #ffe1e1;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 30px;
padding: 50px;
}
.chat-footer{
background-color: #dfeeff;
padding: 10px;
}
.chat-box{
height: 500px;
overflow: auto;
}
<div class="container">
<div class="chat-box row">
<div class="col-md-12 chat-item">
Test Message 1
</div>
<div class="col-md-12 chat-item">
Test Message 2
</div>
<div class="col-md-12 chat-item">
Test Message 3
</div>
<div class="col-md-12 chat-item">
Test Message 4
</div>
</div>
</div>
<div class="chat-footer">
<div class="container">
<input class="form-control" type="text" placeholder="Message" />
</div>
</div>
I quickly added a couple lines of css
Here's a jsfiddle: https://jsfiddle.net/6dchq2zq/7/
.navbar {
position: fixed;
width: 100%;
}
.chat-footer {
background-color: #dfeeff;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
.chat-box {
height: 100%;
overflow: auto;
overflow-x: hidden;
padding: 60px 0;
}
Related
I'm trying to add two sidebars to both edges of the middle element. The left one works without an issue, however, the right one won't. Instead, it appears below its parent element (as seen in the picture) unless I position it as absolute, then however, it goes over the navbar.
Relevant css:
/* The parent element */
main {
margin: 0;
position: relative;
left: 22%;
right: 22%;
width: 56%;
height: 50vh;
background-color: #c5c5c5;
}
/* The correctly shown sidebar */
.sidenav {
margin: 0;
height: 100%;
width: 160px;
top: 7%;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 7%;
}
/* The wrongly shown sidebar */
.bar-right{
float: right;
margin: 0;
width: 200px;
height: 100%;
background-color: #111;
overflow-x: hidden;
padding-top: 7%;
}
HTML:
<main>
<div class="topbar">
[top bar stuff]
</div>
<div class="sidenav">
[usernamestuff]
Link1
Link2
Link3
</div>
<div class="bar-right">
<p>text for test</p>
</div>
</main>
Both sidebars are effectively identical so I don't understand why they behave so differently. How do I get them both to their appropriate edges of the main element?
I would recommend you to use Bootstrap. This will help you to achieve what you looking for so easy, by this code:
<div class="container">
<div class="row">
<div class="col-sm-3">
// First sidebar
</div>
<div class="col-offset-6 col-sm-3">
// Second sidebar
</div>
</div>
</div>
I have a series of Bootstrap rows, and I wonder if there's any way to 'link' the content in the columns with a short line, to indicate that they are related? This is how it currently looks:
And this is how I'd like it to look:
This is a sample of the existing code. I'm sure (I hope) I can do this by making using of info-div:before { some CSS } but I'm not entirely sure what.
<div class="row">
<div class="col-sm-6">
<label>LAN IP</label>
<input type="text" class="form-control" v-model="location.lan_ip" />
</div>
<div class="col-sm-6 info-div">
<p class="field-info">If the first two octets of the device's LAN IP (as reported by Meraki) matches this value, the device will resolve to this location during Meraki import.</p>
</div>
</div>
Yes, use :before. It must have content: set or it will not work (css is pseudo-bootstrap).
Since bootstrap padding between columns is always the same, you can just place some element with fixed width and desired position:
* {
box-sizing: border-box;
}
.row {
margin-left: -15px;
margin-right: -15px;
}
p {
margin: 0;
}
.col-sm-6 {
float: left;
width: 50%;
padding-left: 15px;
padding-right: 15px;
}
.row .wrapper {
position: relative;
background: #eee;
min-height: 100px;
}
.row .info-div:before {
content: '';
width: 30px;
position: absolute;
left: -30px;
top: 50%;
height: 1px;
background: black;
}
<div class="row">
<div class="col-sm-6">
<div class="wrapper">
<label>LAN IP</label>
<input type="text" class="form-control" v-model="location.lan_ip" />
</div>
</div>
<div class="col-sm-6">
<div class="wrapper info-div">
<p class="field-info">If the first two octets of the device's LAN IP (as reported by Meraki) matches this value, the device will resolve to this location during Meraki import.</p>
</div>
</div>
</div>
http://i.imgur.com/Veauoig.png
I am currently trying to work out how to make the 'From £' text to keep in the same position as the buttons above. The page is responsive so I have been unable to keep the text in one position.
The CSS I have used so far -
element.style {position: absolute; width: 97%;}
I put each of the 'From £' parts in their own class. Not sure if there is an easier way?
<div class="price2">From £300</div>
Any help would be great. Thanks!
Add a container for the element for the price and button so that they remain in context with each other.
http://jsfiddle.net/05orkj1a/
.prices{
width: 100%;
}
.price-column{
display: table-cell;
width: 33%;
text-align: center;
margin: 0 auto;
padding: 0 5px;
}
<div class="prices">
<div class="price-column">
<button>Bass</button>
<div class="price2">From £65</div>
</div>
<div class="price-column">
<button>Mid</button>
<div class="price2">From £300</div>
</div>
<div class="price-column">
<button>Treble</button>
<div class="price2">From £715</div>
</div>
</div>
You could also Float the columns left to cause them to collapse vertically as the screen shrinks with the same html. Just change the margin or padding depending on how far apart you want them spaced
http://jsfiddle.net/z6agt11e/
.prices{
width: 100%;
overflow: hidden;
}
.price-column{
display: block;
float: left;
text-align: center;
padding: 5px 5px;
}
You can also add an outer container and then create a inner container for each button-price set.
Here is the HTML code:
<div class="outter">
<div class="block">
<div class="button">button1</div>
<div class="price2">From £65</div>
</div>
<div class="block">
<div class="button">button2</div>
<div class="price2">From £300</div>
</div>
<div class="block">
<div class="button">button3</div>
<div class="price2">From £715</div>
</div>
</div>
Here the CSS:
.outter{
width:100%;
}
.block{
width:33%;
background-color: yellow;
float:left;
text-align: center;
}
And here a jsfiddle:
http://jsfiddle.net/SoniaGM/ej4mdwx9/1/
Hope it helps.
You can use the CSS3 ::after pseudo-selector.
Give at button class:
position: relative;
Then you have to write something lime this:
.button-class::after {
content: 'From £300';
background: transparent;
height: 1%;
width: 3%;
position: absolute;
top: 20px;
left: 0px;
}
Obviously, you have to change height: 1%; width: 3%; and top: 20px; left: 0px;with whatever you want!
i have a legend for a graph that sometimes is scrollable and sometimes isn't.
Unfortunately when the scrollbar shows up, it pushes all of the elements over to the left a bit. So they don't line up with a total (outside the scrollable area)
Example: http://jsfiddle.net/3sKVR/
A simple answer would be to just set a fixed width, but unfortunately, it has to be responsive.
Also, i can't use custom scrollbars to maintain consistency with the rest of the site and also bring down page-load times.
Any help would be greatly appreciated (with internet points!)
Cut down version of code:
HTML:
<div id="legend_cont">
<div id="legend_list">
<div id="legend">
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#ffb100"></div>
</div>
<div class="legend_cell">Merch G</div>
<div class="legend_cell legend_value">$1423.24</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#ed5929"></div>
</div>
<div class="legend_cell">Merch L</div>
<div class="legend_cell legend_value">$1351.07</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#3f9c35"></div>
</div>
<div class="legend_cell">Merch N</div>
<div class="legend_cell legend_value">$1194.90</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#009bbb"></div>
</div>
<div class="legend_cell">Merch T</div>
<div class="legend_cell legend_value">$1188.14</div>
</div>
</div>
</div>
<div id="legend_total">Total:<span id="legend_total_value">$0.00</span>
</div>
</div>
CSS:
#legend_cont {
height: 100%;
border-left: 2px solid #ADADAD;
width: 40%;
float: right;
}
#legend_list {
height: 169px;
overflow: auto;
margin: 20px 4% 20px 7%;
}
#legend {
display: table;
width: 90%;
}
.legend_row {
display: table-row;
}
.legend_cell {
display: table-cell;
padding: 5px;
vertical-align: middle;
}
.legend_colour {
width: 10px;
height: 20px;
background-color: #c1c1c1;
border-radius: 3px;
}
.legend_value {
text-align: right;
}
#legend_total {
height: 50px;
line-height: 50px;
width: 88%;
border-top: 1px solid;
margin-left: 8%;
}
#legend_total_value {
float: right;
padding-right: 5px;
}
1) Make sure there is always a scroll bar
CSS
#legend_cont {
overflow-y: scroll;
}
2) Use js to grab the variable width of the scrollbar (example here)
3) Set the padding-right in #legend_total_value equal to that variable in jquery.
JS
$('#legend_total_value').css('padding-right', wScroll);
Try applying padding-right to compensate for the size of scrollbar when it's not there and position the total accordingly.
#legend_list {
height: 169px;
overflow: auto;
margin: 20px 4% 20px 7%;
padding-right:15px;
}
Demo
For a project of mine, I'm using Skeleton Boilerplate for the first time. And I'm looking for the best practice of centring a div in Skeleton without bashing into the rules of Skeleton.
At the moment, I've the following structure for a login page.
HTML:
<div class="container">
<div class="sixteen columns vertical-offset-by-one">
<div id="loginBox">
<img src="images/yeditepeLogo.png" alt="Yeditepe Logo" class="yeditepeLogo" />
<form action="" id="loginForm">
<input type="text" name="username" required placeholder="username" class="loginTextField">
<input type="password" name="password" required placeholder="password" class="loginTextField">
<input type="submit" value="Log In" class="loginButton" />
</form>
</div><!-- loginBox -->
</div><!-- sixteen columns -->
<div class="sixteen columns">
<p align="center">Click here to register</p>
</div>
</div><!-- container -->
CSS:
#loginBox, #registrationBox {
width: 470px;
height: 450px;
background-color: white;
left: 245px; */
top: 20px; */
position: relative;
margin: 0px auto; }
#registrationBox {
height: 500px; }
.yeditepeLogo {
position: relative;
left: 40px;
top: 33px; }
#loginForm, #registrationForm {
position: relative;
top: 45px; }
.loginTextField, .registrationTextField {
position: relative;
height: 40px;
width: 388px;
left: 40px;
border-color: #dedede;
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
text-align: left;
font-size: 18px;
text-indent: 10px;
-webkit-appearance: none; }
.loginTextField:focus, .registrationTextField:focus {
outline-color: #ff9800;
outline-style: solid;
outline-width: 1px;
border-color: white; }
.loginTextField:nth-child(2), .registrationTextField:nth-child(3) {
margin-bottom: 40px; }
.loginButton, .registrationButton {
background-color: #77a942;
position: relative;
border: none;
width: 390px;
height: 60px;
left: 40px;
color: white;
font-size: 24px;
text-align: center;
opacity: 0.8; }
.loginButton:hover, .registrationButton:hover {
opacity: 1; }
As you can see, that #loginBox has a fixed width/height and it should always be on the centre of the page. margin: 0px auto code gives it the horizontal centring. But is it the best practice in Skeleton? Does Skeleton provide a better way?
Also how can I provide it's vertical centring?
There's actually a built in way of centering divs in Skeleton.
<div class="sixteen columns">
<div class="four columns offset-by-six">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
The offset-by-six in this case can be altered from one to fifteen, and offsets the column at hand by as many columns as entered. As a neat feature, the offsetting is not affecting alignment when smaller screens are used.
To clarify: This doesn't center the actual content in the div, but centers the div itself.
I know it has been a while since this question was asked, but maybe somebody else can use the answer.
I was able to accomplish centering with Skeleton by filling one-third column class with a space, then the next one-third column class with content, then another one-third column class with a space again.
<div class="one-third column"> </div>
<div class="one-third column"><p>Center of the screen.</p></div>
<div class="one-third column"> </div>
You can set the container to
.container {
position: absolute;
top: 50%;
left: 50%;
margin-left: -43 //replace with half of the width of the container
margin-top: -52 //replace with half of the height of the container
}
set the parent container or element to position: relative;
Here's a good article about How to Center Anything With CSS
Asus3000's answer is good as that is what I do and it works well. I would only add that on mobile, it adds quite a bit of unwanted vertical space. To avoid mobile vertical space, I use a class .filler and hide it on mobile.
HTML
<div class="one-third column filler"> </div>
<div class="one-third column"><p>Center of the screen.</p></div>
<div class="one-third column filler"> </div>
CSS
/* or whatever mobile viewport */
#media only screen and (max-width: 960px) {
.filler { display: none}
}
A way I believe works pretty good is:
<div class="container">
<div class="row">
<div class="two-half column">
centered div content
</div>
</div>
</div>
This makes the div centered and responsive. You can change margin-top to make it all the way in the middle, however changing width will (of course) not make it centered anymore.
Correct me if I'm wrong but this works for me! :)