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.
Related
I ran into an issue when making identically sized <textarea> and <p> side by side.
All is well when textarea is in focus, but as soon as unfocus, the textarea gets about 3px larger for no reason.
Anyone know how to prevent this from happening?
code:
<textarea id="keyInput" rows="1" inputType="text" onInput="keyFun()" autofocus></textarea>
and
#keyInput {
text-transform: uppercase;
float: left;
margin-right: 10px;
word-wrap: break-word;
box-sizing: border-box;
line-height: 1.5;
outline: none;
resize: none;
width: 350px;
font-size: 16px;
text-align: center;
outline: 7px solid white;
}
Any and all help to make the textarea size stable on focus and unfocus is greatly appreciated.
CodePen
if you remove
outline: 7px solid white;
It won't grow-and-shrink.
You can also set the background color to the same as html and so the effect is not obvious like so: outline: 7px solid #DFCFBE
HTML <textarea> shows dynamic text half its height when it first loads [when the page loads] like this:
When you focus and start typing or pushing left or right arrow keys, then it shows the text to its full height as it should like this.
How to make the dynamic text appear at its full height when it first loads without having to focus on the <textarea> and push right/left arrow keys? Here is the HTML and CSS codes:
textarea {
height: 55px;
background-color: #009688;
font-size: 55px;
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid white;
}
<textarea id="location" style="overflow:hidden"></textarea>
Thank you.
I think it is because the padding/margin you have added. Try running by removing the padding/margin and see if that works for you.
You want the height to include the padding and border size as you have used box-sizing so your height should be the size of the font plus top and bottom padding and border
In this case that is 55px (font) + 24px (12px top and 12px bottom padding) + 2px (border - you have no top and 2px bottom) = 81px
textarea {
height: 81px;
background-color: #009688;
font-size: 55px;
line-height:55px; /* added this just to ensure the line height is the same as the font size */
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid white;
}
<textarea id="location" style="overflow:hidden">someText</textarea>
Please check the updated one. Added line-height and updated attribute to rows=1 instead of giving height to textarea.
textarea {
min-height: 55px;
background-color: #009688;
font-size: 55px;
line-height: 60px;
width: 100%;
padding: 0 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid white;
}
<textarea id="location" rows="1" style="overflow:hidden"></textarea>
Just increase height as height and font-size is same:
textarea {
height: 80px;
background-color: #009688;
font-size: 55px;
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid white;
}
Adjust font-size and padding like
padding: 12px 12px;
and
font-size: 40px;
Try this: I just remove the padding. You can also add the padding just add more height
Explanation:
The size of font and the height of textarea is the same PLUS you have a padding.
textarea {
height: 55px;
background-color: #009688;
font-size: 55px;
width: 100%;
/*padding: 12px 20px;*/
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid white;
}
<textarea id="location" style="overflow:hidden">Prefilled</textarea>
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;
}
i'm trying to customize a text input with css, i want the text inside it to have a margin of 10px to the left so i use:
#text{
text-indent: 10px;
border: 1px solid #333;
outline: none;
padding: 0;
margin: 0;
width: 168px;
height: 20px;
border-radius: 4px;
}
It works in all browsers except for IE10 which seems to ignore the text-indent property, how can i fix it?
<input type="text" id="text" />
you can use padding-left, it works on all browsers:
#text {
padding: 0 0 0 10px;
border: 1px solid #333;
outline: none;
margin: 0;
width: 158px; //decrease width with the same padding vale so that the width would stay the same
height: 20px;
border-radius: 4px;
}
If you want to use a special rule for IE, adding display: inline-block and a line-height, along with the text-indent rule, will fix this as well. This is an old trick for both IE7-9 as well.
input.special {
text-indent: 150px;
display:inline-block;
line-height: 18px;
}
Does the trick.
This is good if you are using liquid or responsive widths and you don't want to have to adjust your input's width on account of the padding.
I am using Fx 9 and my following code breaks in it while it works in all other browsers including IE9.
EDIT
Please note that I just want to know about this particular code breaking not interested in how to actually get work done because I am learning CSS not doing work for any client.
HTML
<form id="sform" action="index.htm">
<input class="sfield" type="text" value="Search..." />
<input class="sbutton" type="button" value="Go" />
</form>
CSS
#sform {
display:inline-block;
border: solid 1px #d2d2d2;
padding: 10px 10px;
border-radius: 2em;
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #f1f1f1;
letter-spacing: -4px;
}
:not(#sform){
letter-spacing: -4px;
}
.sfield {
padding: 6px 35px 6px 8px;
border: solid 1px #bcbbbb;
width: 202px;
border-radius: 2em;
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.sbutton {
color: #fff;
background: #5f5f5f;
margin-left: -52px;
border: solid 1px #494949;
height: 27px;
width: 27px;
border-radius: 2em;
}
http://jsfiddle.net/UfK6K/8/
The behavior of your testcase will depend on the precise font size the user has set and the font that gets used. It will also depend on how the UA decides to handle negative letter spacing; the spec allows it to be capped or ignored altogether. From http://www.w3.org/TR/CSS21/text.html#spacing-props :
This value indicates inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits.
Add position: absolute; to .sbutton.
Is that the desired outcome?
Why use letter-spacing there anyway? I don't see the logic behind this decision.
I think you may have to rework that code, try with something like this, it's cleaner and it should work in all browsers, IE8+ just fine. Adjust to your needs:
html
<form id="sform" action="index.htm">
<input class="sfield" type="text" value="Search..." />
<input class="sbutton" type="button" value="Go" />
</form>
css
#sform, .sfield, .sbutton {
border-radius: 100px;
padding: 10px;
}
#sform {
position: relative;
display: inline-block;
background: #999;
border-radius: 100px;
}
.sfield {
border: 1px solid #999;
width: 300px;
}
.sbutton {
position: absolute;
right: 10px;
border: 0;
background: black;
color: white;
}
explanation:
Letter spacing increases or decreases the space between characters in a text and it seems you're using it to add padding.
Then, an absolute position element is positioned relative to the first parent element that has a position other than static.
Try removing all your letter-spacing and you'll see that the changes in the layout are minimal.
Take a look at my example and by logic you'll figure it out why it works.
example:
http://jsfiddle.net/elclanrs/7KGkJ/1/