So today i was messing around with some inputs. I had 2 inputs; 1 text field, 1 submit button.
I set the heights to be identical on them both, but, for some bizarre reason they weren't. I tried resetting padding, max/min height. To no avail. In the end i settled for identical font-size and paddings to achieve equal heights. What is the reasoning behind this, can anyone explain the logic, is this intentional?
JSFiddle for demonstration: http://jsfiddle.net/FecEe/
HTML
<p>See how the heights are set to be the same, but yet, they are displated differently?</p>
<input class="sample1" type="text" name="email" placeholder="john#example.com">
<input class="sample1" type="submit" name="post" value="Enter">
<br><br>
<p>See how the height isn't set explicitly but the inherited height from the text and padding make the height the same?</p>
<input class="sample2" type="text" name="email" placeholder="john#example.com">
<input class="sample2" type="submit" name="post" value="Enter">
CSS:
.sample1{
height: 50px; /* ...? */
margin-top: 25px;
margin-right: 5px;
padding:10px;
font-size: 2em;
outline:none;
border: 1px solid black;
}
.sample2{
margin-top: 25px;
margin-right: 5px;
padding:10px;
font-size: 2em;
outline:none;
border: 1px solid black;
}
The default stylesheet in WebKit (and probably other browsers) is to blame:
input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
-webkit-align-items: flex-start;
text-align: center;
cursor: default;
color: ButtonText;
padding: 2px 6px 3px 6px;
border: 2px outset ButtonFace;
background-color: ButtonFace;
box-sizing: border-box
}
See that box-sizing: border-box? That's making your button's height behave intuitively (at least for me): the padding and borders "grow in" from your maximum height of 50px instead of "growing out".
The default box-sizing property of all elements (and therefore your textbox) is box-sizing: content-box, which is computed differently.
To fix it, just make them both use the same box model (I'd go with box-sizing: border-box;). Better yet, save yourself some trouble and do it for all elements:
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
There's even a polyfill for IE7 and IE6, if you support them.
use box-sizing: content-box; in sample1 class
.sample1 {
height: 50px;
margin-top: 25px;
margin-right: 5px;
padding: 10px;
font-size: 2em;
outline: none;
border: 1px solid black;
box-sizing: content-box;
}
.sample1 {
height: 50px;
margin-top: 25px;
margin-right: 5px;
padding: 10px;
font-size: 2em;
outline: none;
border: 1px solid black;
box-sizing: border-box;
}
Related
I have an input element that has a height that is 2px greater than expected.
Below is the css
.input {
font-size: 16px;
padding: 15px;
border: 1px solid black;
border-radius: 3px;
width: 400px;
}
<input class="input">
I would have expected the content height of the input to be 16px due to the font size. For some reason Chrome says my content box is 18px rather than 16px. I even tried to set line-height: 1 but did not work. Can someone explain this? I'd rather not hard code the height as a solution.
You can set box-sizing: content-box and set height: 16px
.input {
font-size: 16px;
padding: 15px;
border: 1px solid black;
border-radius: 3px;
width: 400px;
box-sizing: content-box;
height: 16px;
}
<input class="input">
It says this because of 1px border but to resolve this add box-sizing: border-box; to it.
It will surely solve your issue but if it doesn't let me know in the comments, I will try my best to help you.
I have the fiddle here: https://jsfiddle.net/ufLpqdtj/
My problem is trying to get my search box and button to always sit full width on the page regardless of the device it is running on.
In Javascript I could always make the text box width 100% minus the pixel width of the button (the button is always the same size) but I feel as if im missing something and that it can be done natively in CSS.
Any thoughts or suggestions?
#commonSearchContainer {
display: block;
clear: both;
width: 100%;
position: relative;
}
#commonSearchTerm {
width: 100%;
margin: 25px 0px 0px 0px;
padding: 5px;
border: 1px solid #999999;
height: 35px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.common-search-term-wrapper {
width: 90%;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.common-search-button {
background-color: #E9700D;
border: 1px solid #ccc;
display: inline-block;
margin: 25px 0px 0px 10px;
width: 80px;
color: #fff;
padding: 7px;
font-style: italic;
cursor: pointer;
}
<div id="searchSection" class="common-search-section">
<div class="common-search-term-wrapper">
<input id="commonSearchTerm" type="text" autocomplete="off" class="common-search-term">
</div>
<div id="commonSearchSubmit" class="common-search-button">
Search
<div style="clear: both;"></div>
</div>
</div>
What I typically do for that sort of layout is make a parent container around the elements (like you have) and give it position: relative and width: 100%.
Then I use position: absolute and display: inline-block on the inner elements. Set the width for the fixed-sized elements and use left or right to position all of the elements.
In your case, it would be something like this: https://jsfiddle.net/ufLpqdtj/1/
Well you shouldn't use the div as a button. There are html elements for that.
If correctly understood what you want to achieve...
form {
width: 100%;
display: inline-flex;
justify-content: center;
}
#commonSearchTerm {
width: 80%;
}
#searchButton {
width: 80px;
border-radius: 0;
background-color: red;
border: none;
padding: 2px;
color: white;
}
<form >
<input id="commonSearchTerm" type="text" autocomplete="off" class="common-search-term">
<input id="searchButton" type="submit">
</form>
This is using flexbox which is is more flexible when creating responsive stuff.
If i style input then the height affects a text input different then a button.
Why is this? And what can be done about it?
(and as a extra, why don't they align?)
<input type="text" value="foobar"/>
<input type="button" value="foobar"/>
css:
body {
background: red;
}
input {
border: 0;
height: 20px;
padding: 10px;
}
http://jsfiddle.net/clankill3r/sxbzav34/
Some of html elements such as input of type button has predefined styles in browsers. Among others, this results into input of type button to have box-sizing: border-box. Enforce this to be box-sizing: content-box, so your css will look like:
body {
background: red;
}
input {
border: 0;
height: 20px;
padding: 10px;
box-sizing: content-box;
}
One solution is to set line-height instead of height:
body {
background: red;
}
input {
border: 0;
line-height: 50px;
padding: 0 10px 0 10px;
height: 50px;
}
<input type="text" value="foobar"/>
<input type="button" value="foobar"/>
Fix: After testing on other browsers discover an issue. You have to use specific padding e.g. padding: 0 10px;(top and bottom have to be 0)
The size differs because the vertical padding is not added to the size of the button, but it is added to the size of the textbox. You can use height and line-height to set the height and vertical position of the text.
The alignment is off because they have different vertical alignment by default. If you specify a vertical alignment they will align themselves equally.
input {
vertical-align: bottom;
border: 0;
height: 40px;
line-height: 40px;
padding: 0 10px;
}
Demo: http://jsfiddle.net/Guffa/kx7wzufr/
Because of default styling of browsers. Give them different classes and style them.
You can assign two different classes to your text input field and the input button and then style them accordingly, please check this: DEMO.
HTML:
<input class="text" type="text" value="foobar" />
<input class="button" type="button" value="foobar" />
CSS:
body {
background: red;
}
.text {
border: 0;
height: 20px;
padding: 10px;
}
.button {
border: 0px;
padding: 12px 12px 13px 12px;
}
Each browser gives inputs special styling. If you take a look at Chrome developer tools and scroll down a little bit you'll see something along the lines of below. You have to overwrite those styles by adding a class or using input[type="button"]:
input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
padding: 2px 6px 3px;
border: 2px outset buttonface;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: buttonface;
box-sizing: border-box;
}
Please don't suggest I stop using <input type="submit"> I need to support non javascript-enabled users.
I have a submit button, and on :hover I apply a border to it. However I have noticed that in Firefox 15 and IE7 the border gets applied to the inside of the element. This appears to be because I have set a fixed width and a height to the element and behaves normally once I remove them. However due to browser inconsistencies I need the width and height to ensure the submit button is the same size in all browsers.
Does anyone know how to prevent the border from being drawn inside the element?
Relevant CSS:
#searchform .submit {
vertical-align: middle;
float: right;
height: 31px;
width: 31px;
position: relative;
left: -4px;
margin-right: -4px;
background-image: url(library/images/search-icon.png);
background-position: center center;
background-repeat: no-repeat;
background-color: #ffffff;
border: none;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topright: 5px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
#searchform .submit:hover {
margin: -2px -6px 0px 0px;
border: 2px solid #000;
}
Relevant HTML:
<input type="submit" value="" class="submit btn" />
Wonder if there is a box-sizing property being applied to this input. box-sizing: border-box would cause border & padding to occur within width and height. I wonder if you're using a CSS template that uses the * { box-sizing: border-box; } technique. Try
#searchform .submit { box-sizing: content-box; }
try to remove the margin when hover to the button?
#searchform .submit:hover {
border: 2px solid #000;
}
Why don't you use this:
border: 2px solid #3393B5;
Or:
border: 2px solid #fff;
Instead of:
border: 2px solid #000;
This css code has troubles for ie7. In ie6 is a total absolute mess.
The problem is that the input textbox gets bellow label.
Only work around is to float the div left but has problems then with sizing..
fieldset.label_side > label {
width: 100px;
position: relative;
float: left;
left: 0;
padding: 18px 20px 8px;
border-right: 1px solid #eee;
clear: left;
line-height: normal;
}
fieldset label{
font-size: 13px;
font-weight: bold;
padding: 15px 20px 10px;
margin-right: 10px;
display: inline-block;
color: #333;
}
fieldset.label_side > div {
width: auto;
margin-left: 140px;
padding: 15px 20px;
border-left: 1px solid #eee;
clear: right;
display: block;
}
.box-block fieldset input{
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
input.text{
width: 100% !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border : solid #eee 1px;
background-color: #fbfbfb;
line-height: 32px;
display: inline;
height: 32px;
padding: 0px 0 0 5px;
}
UPDATE
I found that the problem is because of the input width 100%.. I am looking how to fix it.
IE6 and IE7 don't play nice when the display is set to "inline-block";
Try adding the following to your label's CSS rule:
fieldset label{
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}
I would probably have a conditional sheet for IE browsers (usually how I deal with this problem). Here's a site that exlains the problem in better details than I ever could: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
May be you have to write vertical-align:top in your label & input . Write like this:
label, input{
vertical-align:top;
}
One solution that may work (it works for me) is to apply negative margin at input (textbox)... or fixed width for ie7 or to drop ie7 support.
I had the same problem and i hated to have extra divs for border etc!
So here is my solution which seems to work!
You should use a ie7 only stylesheet to avoid the starhacks.
input.text{
background-color: #fbfbfb;
border : solid #eee 1px;
width: 100%;
-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 32px;
*line-height:32px;
*margin-left:-3px;
*margin-right:-4px;
display: inline;
padding: 0px 0 0 5px;
}