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;
}
I wrote a form as shown here.
CSS is:
#mainContainer {
width: 1000px;
margin: 0px auto;
overflow: hidden;
}
.form {
padding-left: 0%;
height: 123px;
min-height: 520px;
min-width: 350px;
width: 34%;
background: #166bb3;
}
#formDiv {
margin: 5%;
}
#username, #selectCou {
width: -moz-available;
height: 36px;
}
#dob {
height: 36px;
}
#selectGen {
height: 36px;
width: 149px;
}
You can see that Or is coming below the form. I want it to appear beside Fill your information here. How can I do it?
For more clarity, here is the screen shot:
try this:
<div class="row">
<div class="col-md-6">
<h4>Fill your information here</h4>
//put your form here
</div>
<div class="col-md-6">
<h4>Or</h4>
//your Or content here
</div>
</div>
If you want to use Bootstrap columns you should stick to the implemented Grid system classes (you can find the doc here ).
This grid system splits a row into 12 hypotetical columns that you can enlarge as you want, bearing in mind that the maximum width is 12. You can have 12 columns with width 1/12 or 2 columns with width 6/12 or any combination of columns which total width must be 12/12.
To achieve what you want you should wrap 2 6-col divs in a row.
<div class="container">
<div class="row">
<div class="col-md-6">
Left form
</div>
<div class="col-md-6">
Right form
</div>
</div>
</div>
I have the following fiddle: http://jsfiddle.net/stpra123/7cap7o7s/7/
#my_input flows outside of the cell. I need #my_input to fill up the entire width - no more, no less. (Setting #my_input's width to something less than 100% could correct the issue but on some screen sizes but depending on the screen size it doesn't guarantee that it will always line up well). Is there another way to make #my_input fit better?
HTML
<div class="site-body">
<div class="site-center">
<div class="cell">
<div class="col width-fill">
<div class="container">
<form>
<input id="my_input" value="I am a bit messed up!" />
<i class="fa fa-calendar"></i>
</form>
</div>
</div>
</div>
<div class="cell">
<div class="col width-fill text">
This is some text that goes directly below #my_input and the widths need to match otherwise
everything kind of looks funny.
</div>
</div>
</div>
</div>
CSS
.cell{
border: 1px solid red;
height: 50px;
}
.container{
position: relative;
width: 100%;
}
#my_input{
margin-top: 10px;
width: 100%;
}
.fa-calendar{
position: absolute;
right: 4px;
top: 18px;
}
Just add box-sizing:border-box on the input:
#my_input{
margin-top: 10px;
width: 100%;
box-sizing:border-box;
}
And it will not go outside.
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! :)
I've split my page into two vertical divs, each containing a number of nested divs wrapped so that they resize preserving a set ratio. That works great - but for some reason the divs on the left end up shorter than the divs on the right! The CSS is consistant, but something's not...
You can see a gap appear at the foot of the left-hand column here:
http://jsfiddle.net/VsJLs/
Is it clear what's wrong? Thank you for looking!
<head>
<style type="text/css">
.break {
padding-top: 25px;
}
.leftcol {
width: 50%;
position: absolute;
top: 0px;
left: 25px;
}
.leftpad {
padding-right: 38px;
}
.rightcol {
width: 50%;
position: absolute;
top: 0px;
right: 25px;
}
.rightpad {
padding-left: 37px;
}
.wrapper {
width: 100%;
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 161.3%;
display: block;
background-color: red;
content: '';
}
</style>
</head>
<body>
<div class="leftcol">
<div class="leftpad">
<div class="break"></div>
<div class="wrapper"></div>
<div class="break"></div>
<div class="wrapper"></div>
<div class="break"></div>
<div class="wrapper"></div>
</div>
</div>
<div class="rightcol">
<div class="rightpad">
<div class="break"></div>
<div class="wrapper"></div>
<div class="break"></div>
<div class="wrapper"></div>
<div class="break"></div>
<div class="wrapper"></div>
</div>
</div>
</body>
</html>
I've tried zeroing margins as suggested below but that doesn't improve things. It seems like the problem could lie with the padding-top: 161.3%; property. Changing % to px fixes that creeping misalignment - but I need to keep it as a percentage! Can anybody figure this out? Thanks for your time.
The problem is caused due to the margin border; set it to 0 or same on all sides:
MARGIN
{BORDER=0;
}
I figured it out - I mean: I know the problem but I'm still not sure why... The gutter I created was split unevenly:
.leftpad {
padding-right: 38px;
}
and
.rightpad {
padding-right: 37px;
}
If both those are equal (http://jsfiddle.net/VsJLs/1/) then there's no slip. Now I'm worried about creating columns this way - that's another question though...