Twitter Bootstrap text field's height too small?
Adding <!DOCTYPE HTML>
should fix this. The same question was asked here: Text input rendering issue with Twitter Bootstrap
Twitter bootstrap form fields too small
It looks like you have two problems. The input type=text
problem and the radio
button problem. Without seeing your code, it appears as though your textbox problem is related to DOCTYPE
and your radio button problem is related to overriding CSS styles (can confirm if you post the inspector output for the radio buttons).
If your variables are showing as the correct values (eg. 18px height), which they are, then it is most definitely a DOCTYPE
issue.
From this article on A List Apart:
You’ve done all the right stuff, but your site doesn’t look or work as
it should in the latest browsers.You’ve written valid XHTML and CSS. You’ve used the W3C standard
Document Object Model (DOM) to manipulate dynamic page elements. Yet,
in browsers designed to support these very standards, your site is
failing. A faulty DOCTYPE is likely to blame.This little article will provide you with DOCTYPEs that work, and explain the practical,
real–world effect of these seemingly abstract tags.
Here's the recommended list of DOCTYPEs as per W3C:
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Decrease Twitter Bootstrap input field's height?
I couldn't find any and if there isn't how do I go about overriding the defaults?
Bootstrap's input field height is defined using attribute selectors e.g. input[type="text"], input[type="password"]
You can override it with your styles in the same selector format, or uses classes and such.
.mystyle input[type="text"] {
height: 14px;
font-size: 10px;
line-height: 14px;
}
How to decrease the height of the input text field in bootstrap?
Try this:
input.form-control {
height:25px !important;
}
Bootstrap: Email field has smaller height than text field
Try explicitly setting the font size of each field's div with the css font-size
property.
Example (in your css file):
div.email_field {
font-size: 16px;
}
div.text_field {
font-size: 12px;
}
Text input rendering issue with Twitter Bootstrap
This behavior is also triggered when the doctype is wrongly typed. In my case, <!DOCTYPE>
(wrong) was fixed to <!DOCTYPE HTML>
and the problem went away.
Bootstrap text input height
You can use css height attribute both as
inline css :
<input style="height:50px"/>
or class
<input class="inputfield"/>
and the css
.inputfield {
height: 50px
}
How do I customize twitter bootstrap's various input sizes without using !important?
Instead of using !important
, you can use an attribute selector which will override the default as it will be more specific than simply using a class
. Not good with specificity concept? Refer this article.
For calculating the specificity of your selectors, you can use this website.
[1] Using class[attr=class]
.input-large[class="input-large"] {
width: 400px;
}
OR
[2] Using tag[attr=class]
input[class="input-large"] {
width: 400px;
}
And using !important
is not an awful practice if you use it in the right place.
Note that above selectors, [1] will make all elements width
to 400px
having a class
of input-large
and in case of selector [2], it will set width
to 400px
for all input
elements having class
of input-large
, so if you want, you can call multiple classes i.e .class.class
on input
tag and use the selector below..
.input-large.input-large-altered {
width: 400px;
}
So this will select any element having both of these classes set, if you want to be more specific, and want to set only for input type="text"
than you can always write even a more specific selector like
input[type="text"].input-large.input-large-altered {
width: 400px;
}
So the above one will only target to input
element whose type
attribute is holding a value
of text
AND having both the classes i.e .input-large
.input-large-altered
Demo
Demo 2
Demo 3 (Multiple classes)
Related Topics
How Would You Do This: Tables or CSS
Select The Last 3 Child Elements
CSS: Style Applied to a Combination of Classes
How to Get a Negative Value with CSS Calc()
Svg Fill Color Not Working with Hex Colors
@Font-Face: Bold in Ff Is Bolder Than in Chrome
Bootstrap Button on Click Showing Default Colour
How to Color The Fontawesome Icon Colors
Helvetica Neue Light with @Font-Face .. Legal
Flexbox: Centered Element with Space-Around Elements on Either Side
How Would You Write Media Queries for Multiple Screen Sizes
Can't Load CSS File in Javafx 8
HTML Formatted Email Not Showing Up at All in Gmail But Is in Other Mail Clients