Related
I'm trying to make a login form with two input fields with an inset padding, but they end up exceeding the parent's bounds. What's causing this?
JSFiddle snippet: http://jsfiddle.net/4x2KP/
#mainContainer {
line-height: 20px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
background-color: rgba(0,50,94,0.2);
margin: 20px auto;
display: table;
-moz-border-radius: 15px;
border-style: solid;
border-color: rgb(40, 40, 40);
border-radius: 2px 5px 2px 5px / 5px 2px 5px 2px;
border-radius: 2px;
border-radius: 2px 5px / 5px;
box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
}
.loginForm {
width: 320px;
height: 250px;
padding: 10px 15px 25px 15px;
overflow: hidden;
}
.login-fields > .login-bottom input#login-button_normal {
float: right;
padding: 2px 25px;
cursor: pointer;
margin-left: 10px;
}
.login-fields > .login-bottom input#login-remember {
float: left;
margin-right: 3px;
}
.spacer {
padding-bottom: 10px;
}
/* ELEMENT OF INTEREST HERE! */
input[type=text],
input[type=password] {
width: 100%;
height: 20px;
padding: 5px 10px;
background-color: rgb(215, 215, 215);
line-height: 20px;
font-size: 12px;
color: rgb(136, 136, 136);
border-radius: 2px 2px 2px 2px;
border: 1px solid rgb(114, 114, 114);
box-shadow: 0 1px 0 rgba(24, 24, 24,0.1);
}
input[type=text]:hover,
input[type=password]:hover,
label:hover ~ input[type=text],
label:hover ~ input[type=password] {
background:rgb(242, 242, 242) !important;
}
input[type=submit]:hover {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 -10px 10px rgba(255,255,255,0.1);
}
<div id="mainContainer">
<div id="login" class="loginForm">
<div class="login-top">
</div>
<form class="login-fields" onsubmit="alert('test'); return false;">
<div id="login-email" class="login-field">
<label for="email" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">E-mail address</label>
<span><input name="email" id="email" type="text"></input></span>
</div>
<div class="spacer"></div>
<div id="login-password" class="login-field">
<label for="password" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Password</label>
<span><input name="password" id="password" type="password"></input></span>
</div>
<div class="login-bottom">
<input type="checkbox" name="remember" id="login-remember"></input>
<label for="login-remember" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Remember my email</label>
<input type="submit" name="login-button" id="login-button_normal" style="cursor: pointer" value="Log in"></input>
</div>
</form>
</div>
</div>
According to the CSS basic box model, an element's width and height are applied to its content box. Padding falls outside of that content box and increases the element's overall size.
As a result, if you set an element with padding to 100% width, its padding will make it wider than 100% of its containing element. In your context, inputs become wider than their parent.
You can change the way the box model treats padding and width. Set the box-sizing CSS property to border-box to prevent padding from affecting an element's width or height:
border-box : The width and height properties include the padding and border, but not the margin... Note that padding and border will be inside of the box.
Note the browser compatibility of box-sizing (IE8+).
At the time of this edit, no prefixes are necessary.
Paul Irish and Chris Coyier recommend the "inherited" usage below:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
For reference, see:
* { Box-sizing: Border-box } FTW
Inheriting box-sizing Probably Slightly Better Best-Practice.
Here's a demonstration in your specific context:
#mainContainer {
line-height: 20px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: rgba(0, 50, 94, 0.2);
margin: 20px auto;
display: table;
-moz-border-radius: 15px;
border-style: solid;
border-color: rgb(40, 40, 40);
border-radius: 2px 5px 2px 5px / 5px 2px 5px 2px;
border-radius: 2px;
border-radius: 2px 5px / 5px;
box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
}
.loginForm {
width: 320px;
height: 250px;
padding: 10px 15px 25px 15px;
overflow: hidden;
}
.login-fields > .login-bottom input#login-button_normal {
float: right;
padding: 2px 25px;
cursor: pointer;
margin-left: 10px;
}
.login-fields > .login-bottom input#login-remember {
float: left;
margin-right: 3px;
}
.spacer {
padding-bottom: 10px;
}
input[type=text],
input[type=password] {
width: 100%;
height: 30px;
padding: 5px 10px;
background-color: rgb(215, 215, 215);
line-height: 20px;
font-size: 12px;
color: rgb(136, 136, 136);
border-radius: 2px 2px 2px 2px;
border: 1px solid rgb(114, 114, 114);
box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1);
box-sizing: border-box;
}
input[type=text]:hover,
input[type=password]:hover,
label:hover ~ input[type=text],
label:hover ~ input[type=password] {
background: rgb(242, 242, 242);
!important;
}
input[type=submit]:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 10px rgba(255, 255, 255, 0.1);
}
.login-top {
height: auto;/*85px;*/
}
.login-bottom {
padding: 35px 15px 0 0;
}
<div id="mainContainer">
<div id="login" class="loginForm">
<div class="login-top">
</div>
<form class="login-fields" onsubmit="alert('test'); return false;">
<div id="login-email" class="login-field">
<label for="email" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">E-mail address</label>
<span><input name="email" id="email" type="text" /></span>
</div>
<div class="spacer"></div>
<div id="login-password" class="login-field">
<label for="password" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Password</label>
<span><input name="password" id="password" type="password" /></span>
</div>
<div class="login-bottom">
<input type="checkbox" name="remember" id="login-remember" />
<label for="login-remember" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Remember my email</label>
<input type="submit" name="login-button" id="login-button_normal" style="cursor: pointer" value="Log in" />
</div>
</form>
</div>
</div>
Alternatively, rather than adding padding to the <input> elements themselves, style the <span> elements wrapping the inputs. That way, the <input> elements can be set to width:100% without being affected by any additional padding. Example below:
#login-form {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: rgba(0, 50, 94, 0.2);
margin: 20px auto;
padding: 10px 15px 25px 15px;
border: 4px solid rgb(40, 40, 40);
box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
border-radius: 2px;
width: 320px;
}
label span {
display: block;
padding: .3em 1em;
background-color: rgb(215, 215, 215);
border-radius: .25em;
border: 1px solid rgb(114, 114, 114);
box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1);
margin: 0 0 1em;
}
label span:hover {
background: rgb(242, 242, 242);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 10px rgba(255, 255, 255, 0.1);
}
input[type=text],
input[type=password] {
background: none;
border: none;
width: 100%;
height: 2em;
line-height: 2em;
font-size: 12px;
color: rgb(136, 136, 136);
outline: none;
}
.login-bottom {
margin: 2em 1em 0 0;
}
input#login-button {
float: right;
padding: 2px 25px;
}
input#login-remember {
float: left;
margin-right: 3px;
}
<form id="login-form">
<label>E-mail address
<span><input name="email" type="text" /></span>
</label>
<label>Password
<span><input name="password" type="password" /></span>
</label>
<div class="login-bottom">
<label>
<input type="checkbox" name="remember" id="login-remember" />Remember my email
</label>
<input type="submit" name="login-button" id="login-button" value="Log in" />
</div>
</form>
The other answers seem to tell you to hard-code the width or use a browser-specific hack. I think there is a simpler way.
By calculating the width and subtracting the padding (which causes the field overlap). The 20px comes from 10px for left padding and 10px for right padding.
input[type=text],
input[type=password] {
...
width: calc(100% - 20px);
}
If all above fail, try setting the following properties for your input, to have it take max space but not overflow:
input {
min-width: 100%;
max-width: 100%;
}
Try changing the box-sizing to border-box. The padding is adding to width of your input elements.
See Demo here
CSS
input[type=text],
input[type=password] {
width: 100%;
margin-top: 5px;
height: 25px;
...
}
input {
box-sizing: border-box;
}
+box-sizing
try code this
*, ::after, ::before {
box-sizing: border-box;
}
Padding is added to the overall width. Because your container has a pixel width, you are better off giving the inputs a pixel width too, but remember to remove the padding and border from the width you set to avoid the same issue.
This is tricky, and situational. There is a bit of confusion in these comments, let's summarize the solutions:
The first valid approach is explained by showdev in the accepted answer. BUT, this is not final.
In fact: if you add some padding to the input, now it works. If you add some margin it is still overflowing. It seems that box-sizing is ignored. Also fiddling with min-width and max-width is useless.
To apply margin, the only working solution is explained by Al Zziwa, using calc() to reduce the width by the amount of margin. For example, adding margin to left and right:
input {
margin: 0 20px;
width: calc(100% - 40px);
}
If you don't like this solution, the workaround is to avoid the margin in the input, instead use a wrapper where you apply padding or margin.
You also have an error in your css with the exclamation point in this line:
background:rgb(242, 242, 242);!important;
remove the semi-colon before it. However, !important should be used rarely and can largely be avoided.
I tried these solutions but never got a conclusive result. In the end I used proper semantic markup with a fieldset. It saved having to add any width calculations and any box-sizing.
It also allows you to set the form width as you require and the inputs remain within the padding you need for your edges.
In this example I have put a border on the form and fieldset and an opaque background on the legend and fieldset so you can see how they overlap and sit with each other.
<html>
<head>
<style>
form {
width: 300px;
margin: 0 auto;
border: 1px solid;
}
fieldset {
border: 0;
margin: 0;
padding: 0 20px 10px;
border: 1px solid blue;
background: rgba(0,0,0,.2);
}
legend {
background: rgba(0,0,0,.2);
width: 100%;
margin: 0 -20px;
padding: 2px 20px;
color: $col1;
border: 0;
}
input[type="email"],
input[type="password"],
button {
width: 100%;
margin: 0 0 10px;
padding: 0 10px;
}
input[type="email"],
input[type="password"] {
line-height: 22px;
font-size: 16px;
}
button {
line-height: 26px;
font-size: 20px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Log in</legend>
<p>You may need some content here, a message?</p>
<input type="email" id="email" name="email" placeholder="Email" value=""/>
<input type="password" id="password" name="password" placeholder="password" value=""/>
<button type="submit">Login</button>
</fieldset>
</form>
</body>
</html>
In your parent div set .parent { height: fit-content; }
I leave this here in case it may help someone even if it's not the case in the code of the question but I think it can be related to the question subject itself.
I just stumbled in an occasion I was using a form styled with CSS grids and the inputs were overflowing.
The solution has been to add:
grid-template-columns: 100%
as the default auto value was causing the overflow.
Padding is essentially added to the width, therefore when you say width:100% and padding: 5px 10px you're actually adding 20px to the 100% width.
Do you want the input fields to be centered?
A trick to center elements: specify the width of the element and set the margin to auto, eg:
margin : 0px auto;
width:300px
A link to your updated fiddle:
http://jsfiddle.net/4x2KP/5/
I want to inherit the width of my suggestion div from the input field's width and at the same time overlap it from the objects. My CSS below overlaps but does not inherit the width of the input field. I've tried making it to 100% but it becomes longer than the input field.
.suggestion {
cursor: pointer;
background: #FFF;
box-shadow: 0 2px 2px 0 rgba(34,36,38,.15);
padding: 5px 20px 5px 20px;
border-radius: .28571429rem;
border: 0px solid rgba(34,36,38,.15);
z-index: 1;
position: absolute;
width: inherit;
}
.search-res{
margin-bottom: 5px;
}
.search-res:hover{
margin-bottom: 5px;
color: #2196f3;
}
.warning {
color: orange
}
<input type="text" formControlName="name" placeholder="Enter Name..." maxlength="32">
<div class="suggestion" *ngIf="suggestions">
<div *ngFor="let suggestion of suggestions" class="search-res" (click)="onSelectSuggestion(suggestion.name)">
{{suggestion.name}}
</div>
</div>
Here's an example:https://codepen.io/anon/pen/KvgoPX
What I changed was:
For the suggestion div to be absolute, it'll need to be relative to the input in some way. That's what there's an input container around the outside. That can be any width you want.
There's another object in there to show that it overlays.
.inputContainer {
width:200px;
position:relative;
background:green;
}
input {
width:100%;
}
.suggestion {
cursor: pointer;
background: #FFF;
box-shadow: 0 2px 2px 0 rgba(34,36,38,.15);
padding: 5px 20px;
border-radius: .28571429rem;
border: 0px solid rgba(34,36,38,.15);
z-index: 1;
box-sizing:border-box;
text-align:center;
position: absolute;
width: 100%;
}
.search-res{
margin-bottom: 5px;
}
.search-res:hover{
margin-bottom: 5px;
color: #2196f3;
}
.warning {
color: orange
}
<div class="inputContainer">
<input type="text" formControlName="name" placeholder="Enter Name..." maxlength="32">
<div class="suggestion" *ngIf="suggestions">
<div *ngFor="let suggestion of suggestions" class="search-res" (click)="onSelectSuggestion(suggestion.name)">
{{suggestion.name}}
</div>
</div>
</div>
<div class="otherStuff"> This is where other objects are </div>
What i am doing wrong with this table constructed with divs?
Why header row and cell row don't have the same width?
Another problem is, when resizing browser window header an cell losing their justify. I'd like to have the same movement for both header and cells.
if you resize your browser window you will see borders moving different.
here is my code
html, body {
width: 100%;
height: 95vh;
overflow: hidden;
background-color: rgba(31, 30, 30, 1);
}
.records {
width: 99%;
overflow-x: hidden;
overflow-y: auto;
}
.header-cell {
display: inline-block;
width: 9%;
height: 20px;
margin-top: 2px;
margin-left: -4px;
border: 1px solid #fff;
background: #3a3a3a;
color: #fff;
white-space: nowrap;
}
.cell {
display: inline-block;
width: 9%;
height: 20px;
margin-top: 2px;
margin-left: -4px;
border: 1px solid #fff;
background: #ccc;
color: #494949;
white-space: nowrap;
}
.header {
position: fixed;
width: 100%;
}
.row1 {
padding-top: 4px;
}
/* scrollbars */
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
-webkit-border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .5);
border-radius: 10px;
background: rgba(204, 51, 0, .9);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255, 0, 0, .4);
}
/* scrollbars */
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
-webkit-border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .5);
border-radius: 10px;
background: rgba(204, 51, 0, .9);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255, 0, 0, .4);
}
<div class="records">
<div class="header">
<div class="header-cell">#</div>
<div class="header-cell">Movie</div>
<div class="header-cell">Distributor</div>
<div class="header-cell">Country</div>
<div class="header-cell">Language</div>
<div class="header-cell">Name</div>
<div class="header-cell">Role</div>
<div class="header-cell">Born</div>
<div class="header-cell">Star Sign</div>
<div class="header-cell">Episodes</div>
</div>
<div style="padding-top:19px;">
<div class="cell">145</div>
<div class="cell">Game Of Thrones</div>
<div class="cell">HBO</div>
<div class="cell">USA</div>
<div class="cell">English</div>
<div class="cell">
Peter Dinklage
</div>
<div class="cell">Tyrion Lannister</div>
<div class="cell">June 11, 1969</div>
<div class="cell">Gemini</div>
<div class="cell">2-3-4-6-11</div>
</div>
<div style="padding-top:1px;">
<div class="cell">146</div>
<div class="cell">Game Of Thrones</div>
<div class="cell">HBO</div>
<div class="cell">USA</div>
<div class="cell">English</div>
<div class="cell">
Kit Harington
</div>
<div class="cell">Jon Snow</div>
<div class="cell">December 26, 1986</div>
<div class="cell">Capricorn</div>
<div class="cell">1-2-3-6-9</div>
</div>
</div>
I have updated your html and styles, The width of the entries row and the float: left; used instead of display: inline-block;
HTML
<div class="records" >
<div class="header">
<div class="header-cell">#</div>
<div class="header-cell">Movie</div>
<div class="header-cell">Distributor</div>
<div class="header-cell">Country</div>
<div class="header-cell">Language</div>
<div class="header-cell">Name</div>
<div class="header-cell">Role</div>
<div class="header-cell">Born</div>
<div class="header-cell">Star Sign</div>
<div class="header-cell">Episodes</div>
</div>
<div style="padding-top:19px;width:100%">
<div class="cell">145</div>
<div class="cell">Game Of Thrones</div>
<div class="cell">HBO</div>
<div class="cell">USA</div>
<div class="cell">English</div>
<div class="cell">Peter Dinklage</div>
<div class="cell">Tyrion Lannister</div>
<div class="cell">June 11, 1969</div>
<div class="cell">Gemini</div>
<div class="cell">2-3-4-6-11</div>
</div>
<div style="padding-top:1px;width:100%">
<div class="cell">146</div>
<div class="cell">Game Of Thrones</div>
<div class="cell">HBO</div>
<div class="cell">USA</div>
<div class="cell">English</div>
<div class="cell">Kit Harington</div>
<div class="cell">Jon Snow</div>
<div class="cell">December 26, 1986</div>
<div class="cell">Capricorn</div>
<div class="cell">1-2-3-6-9</div>
</div>
</div>
Style
html,body {
width:100%;
height:95vh;
background-color: rgba(31,30,30,1);
overflow:hidden;
}
.records {
width:99%;
overflow-x:hidden;
overflow-y:auto;
}
.header-cell {
height: 20px;
width: 9%;
background: #3a3a3a;
color: #ffffff;
/* display: inline-block; */
/* margin-left: -4px; */
white-space: nowrap;
border: 1px solid #fff;
/* margin-top: 2px; */
float: left;
}
.cell {
height: 20px;
width: 9%;
background: #cccccc;
color: #494949;
/* display: inline-block; */
/* margin-left: -4px; */
float: left;
white-space: nowrap;
border: 1px solid #fff;
/* margin-top: 2px; */
}
.header {
/*position:fixed; */
width:100%;
}
.row1 {
padding-top:4px;
}
/* scrollbars */
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;}
::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px; background: rgba(204,51,0,0.9); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }
/* scrollbars */
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;}
::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px; background: rgba(204,51,0,0.9); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }
Refer the update fiddle :
https://jsfiddle.net/5Ldv5m1a/3/
This is a highly unconventional way of making a table. HTML has the <table> element where tables have <tr> (table row) elements and <td> (table cell) elements. The layout would look like this:
<table class="tabName">
<tr class="header">
<td>Element1</td>
<td>Element2</td>
<td>Element3</td>
<td>Element4</td>
</tr>
<tr>
<td>Element1</td>
<td>Element2</td>
<td>Element3</td>
<td>Element4</td>
</tr>
<tr>
<td>Element1</td>
<td>Element2</td>
<td>Element3</td>
<td>Element4</td>
</tr>
</table>
This will create 2 rows with 4 elements in each row excluding the header. Using the class name for the first table row, you can set special CSS specs on the header and other rules for the non-headers. If you want CSS rules for just the header use this:
.header td{
/*header styles*/
}
If you want to style the cells that are not part of the header use this CSS rule:
td:not(.header td){
/*non-header cell styles*/
}
For future reference, keep in mind that divs are only used to "package" a set of elements together when they share a common set of rules. So avoid rewriting the same rules for multiple elements by using the same class names for both or grouping them within a div. For example, if you have Ok and Cancel buttons together, you would put them inside a div because they will use exact same CSS rules except for the button color.
Try this
.records {
display: table;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
}
.btlrow {
display: table-row;
}
.cell {
background: #cccccc none repeat scroll 0 0;
border: 1px solid #fff;
color: #494949;
display: table-cell;
height: 20px;
margin-top: 2px;
white-space: nowrap;
}
/* scrollbars */
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;}
::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px; background: rgba(204,51,0,0.9); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }
/* scrollbars */
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;}
::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px; background: rgba(204,51,0,0.9); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }
<div class="records" >
<div class="btlrow">
<div class="cell">#</div>
<div class="cell">Movie</div>
<div class="cell">Distributor</div>
<div class="cell">Country</div>
<div class="cell">Language</div>
<div class="cell">Name</div>
<div class="cell">Role</div>
<div class="cell">Born</div>
<div class="cell">Star Sign</div>
<div class="cell">Episodes</div>
</div>
<div class="btlrow">
<div class="cell">145</div>
<div class="cell">Game Of Thrones</div>
<div class="cell">HBO</div>
<div class="cell">USA</div>
<div class="cell">English</div>
<div class="cell">Peter Dinklage</div>
<div class="cell">Tyrion Lannister</div>
<div class="cell">June 11, 1969</div>
<div class="cell">Gemini</div>
<div class="cell">2-3-4-6-11</div>
</div>
<div class="btlrow">
<div class="cell">146</div>
<div class="cell">Game Of Thrones</div>
<div class="cell">HBO</div>
<div class="cell">USA</div>
<div class="cell">English</div>
<div class="cell">Kit Harington</div>
<div class="cell">Jon Snow</div>
<div class="cell">December 26, 1986</div>
<div class="cell">Capricorn</div>
<div class="cell">1-2-3-6-9</div>
</div>
</div>
Your code need few changes in the CSS file and few CSS changes in HTML file. Below are the changes.
HTML:
<div class="records" >
<div class="header">
<div class="header-cell">#</div>
<div class="header-cell">Movie</div>
<div class="header-cell">Distributor</div>
<div class="header-cell">Country</div>
<div class="header-cell">Language</div>
<div class="header-cell">Name</div>
<div class="header-cell">Role</div>
<div class="header-cell">Born</div>
<div class="header-cell">Star Sign</div>
<div class="header-cell">Episodes</div>
</div>
<div style="padding-top:19px;display: table-row;">
<div class="cell">145</div>
<div class="cell">Game Of Thrones</div>
<div class="cell">HBO</div>
<div class="cell">USA</div>
<div class="cell">English</div>
<div class="cell">Peter Dinklage</div>
<div class="cell">Tyrion Lannister</div>
<div class="cell">June 11, 1969</div>
<div class="cell">Gemini</div>
<div class="cell">2-3-4-6-11</div>
</div>
<div style="padding-top:1px;display: table-row;">
<div class="cell">146</div>
<div class="cell">Game Of Thrones</div>
<div class="cell">HBO</div>
<div class="cell">USA</div>
<div class="cell">English</div>
<div class="cell">Kit Harington</div>
<div class="cell">Jon Snow</div>
<div class="cell">December 26, 1986</div>
<div class="cell">Capricorn</div>
<div class="cell">1-2-3-6-9</div>
</div>
</div>
CSS:
html,body {width:100%;height:95vh;background-color: rgba(31,30,30,1); overflow:hidden;}
.records {width:99%; overflow-x:hidden; overflow-y:auto; display: table}
.header-cell {background:#3a3a3a;color:#ffffff;display:table-cell;border:1px solid #fff;}
.cell {background:#cccccc;color:#494949;display:table-cell;border:1px solid #fff;}
.header {display: table-row;}
.row1 {padding-top:4px;}
/* scrollbars */
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;}
::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px; background: rgba(204,51,0,0.9); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }
/* scrollbars */
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;}
::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px; background: rgba(204,51,0,0.9); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }
I would have the form in the left, but i obtained the form in the right:
I really don't know what is the problem. Probably some Css is in contrast with bootstrap. I would have the text-field separated (i obtained everything merged)
this is the css of my form:
<div class="container">
<div class="row">
<div class="col-sm-12">
<legend>Mr. Sosa:</legend>
</div>
<!-- panel preview -->
<div class="col-sm-5">
<h4>Add payment:</h4>
<div class="panel panel-default">
<div class="panel-body form-horizontal payment-form">
<div class="form-group">
<label for="concept" class="col-sm-3 control-label">Concept</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="concept" name="concept">
</div>
</div>
<div class="form-group">
<label for="description" class="col-sm-3 control-label">Description</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="description" name="description">
</div>
</div>
<div class="form-group">
<label for="amount" class="col-sm-3 control-label">Amount</label>
<div class="col-sm-9">
<input type="number" class="form-control" id="amount" name="amount">
</div>
</div>
<div class="form-group">
<label for="status" class="col-sm-3 control-label">Status</label>
<div class="col-sm-9">
<select class="form-control" id="status" name="status">
<option>Paid</option>
<option>Unpaid</option>
</select>
</div>
</div>
<div class="form-group">
<label for="date" class="col-sm-3 control-label">Date</label>
<div class="col-sm-9">
<input type="date" class="form-control" id="date" name="date">
</div>
</div>
</div>
</div>
</div>
Do you have any idea? thank you
application.css.scss
#banner {
background: #9c9;
padding: 10px;
border-bottom: 2px solid;
font: small-caps 40px/40px "Times New Roman", serif;
color: #282;
text-align: center;
img {
float: left;
}
}
#notice {
color: #000 !important;
border: 2px solid red;
padding: 1em;
margin-bottom: 2em;
background-color: #f0f0f0;
font: bold smaller sans-serif;
}
#columns {
background: #141;
#main {
margin-left: 17em;
padding: 4em;
background: white;
}
#side {
float: left;
padding: 1em 2em;
width: 13em;
background: #141;
ul {
padding: 0;
li {
list-style: none;
a {
color: #bfb;
font-size: small;
}
}
}
}
}
bootstrap_and_overrides.css
/*
=require twitter-bootstrap-static/bootstrap
Use Font Awesome icons (default)
To use Glyphicons sprites instead of Font Awesome, replace with "require twitter-bootstrap-static/sprites"
=require twitter-bootstrap-static/fontawesome
*/
sign_in.css
body, html {
height: 100%;
background-repeat: no-repeat;
}
h2 {
font: small-caps 40px/40px "Times New Roman",serif;
text-align: center
}
.card-container.card {
margin-left: 310px;
max-width: 370px;
padding: 40px 40px;
}
.card {
background-color: #F7F7F7;
/* just in case there no content*/
padding: 20px 25px 30px;
margin: 0 auto 25px;
margin-top: 50px;
/* shadows and rounded borders */
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.btn {
font-weight: 600;
height: 36px;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: default;
}
.profile-img-card {
width: 96px;
height: 96px;
margin: 0 auto 10px;
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
Try using normalize.css and reset.css and see if that makes a difference.
Also go to your browser and inspect element on the form container and see where its getting its align property from?(this will help you identify where the style is applied and so you can try tweaking it in the browser itself first)
If I use bootstrap, it messes the alignment up on my page. Member names should be appeared right next to icon, but with Bootstrap, they overlap the icon.
How can I fix this?
Also, when the browser window is made smaller, the square line gets messed up too. I want the data to have a border when the window is small.
So I don't want it to look like this:
But rather, like this:
If possible I want to have these icon, and name in middle not on the top.
DEMO http://jsfiddle.net/sbq7X/
HTML
<div class="store_row">
<div class="store_left">
<div class="store_title">walmart</div>
<div class="store_location">Located in California</div>
</div>
<div class="store_right">
<div class="store_icon">
<img class="img-polaroid" src="http://www.miraiha.net/wpblog/wp-content/uploads/2010/10/designreviver-free-twitter-social-icon-300x266.jpg" />
</div>
<div class="introduction">
<div class="name1">John Tailor</div>
<div class="name2">Mike Smith</div>
<div class="name3">Jessica Swan</div>
</div>
</div>
</div>
<div class="store_row">
<div class="store_left">
<div class="store_title">walmart</div>
<div class="store_location"><span class='text-error'>Located in California</span></div>
</div>
<div class="store_right">
<div class="store_icon">
<img class="img-polaroid" src="http://media-cache-ec1.pinterest.com/avatars/walmarthub-1349815045_600.jpg" />
</div>
<div class="introduction">
<div class="name1">John Tailor</div>
<div class="name2">Mike Smith</div>
<div class="name3">Jessica Swan</div>
</div>
</div>
CSS
div.store_row{
min-width: 300px;
margin-bottom: 20px;
margin-left: 10px;
margin-right: 10px;
border:1px solid;
display:table;
}
div.store_left{
width: 300px;
display:inline-block;
vertical-align:top;
}
div.store_right{
width: 300px;
display:inline-block;
vertical-align:top;
background-color: #FFFFFF;
}
div.store_title{
background-color: #000000;
color: #FFFFFF;
height: 35px;
padding:5px;
}
div.store_location{
height: 35px;
border-right:1px solid;
background-color: #FFFFFF;
padding:5px;
}
div.store_icon{
width: 70px;
height: 70px;
display:inline-block;
}
div.store_icon img{
width:100%;
height:100%;
}
div.introduction{
display:inline-block;
vertical-align:top;
width:200px;
text-align: left;
}
.... and bootstrap
img-polaroid class has 4px padding and it causes the problem:
.img-polaroid {
padding: 4px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
See the fiddle where it's removed.
EDIT: The alignment is working fine as well. You have static width for the all elements and they're too wide for fiddle. I've decreased their size so they are inline now.