CODEWITHSUNDEEP
csszurb-foundation
Tom
Tom

Reputation: 1607

Changing height of Foundation form input field from

I'm using Foundation. Where I make a form the input field are very high like 40px. I want to make the less height like around 26px. I looked in the css setting file but you can change a lot but not the height. When I add the css code below it works in Chorme, but in FireFox the bottom part of the texted is hidden. 

input {
    height: 26px;
}

Does anyone have a idee?

Upvotes: 2

Views: 4173

Answers (1)

msturdy
msturdy

Reputation: 10794

Simplest and brutest (most brutey?) way to do it is:

input {
    height: 26px !important;
}

in your app.scss and compile your css.

However, there is a better way..

Check in the file at /bower_components/foundation/scss/foundation/components/_forms.scss and you'll see that the height of form elements is based on the font-size and form-spacing

height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));  // line 121

Which by default (in the same file) are:

$form-spacing: rem-calc(16) !default;    // line 14
$input-font-size: rem-calc(14) !default; // line 26

These can be found and uncommented in your _settings.scss file (same directory as your app.scss) to be overriden there before compiling again. Test well because these are general settings that will have an effect on most (if not all) form elements.

On the plus side, in your _settings.scss file they are immune from updates to the framework files, and will give you more consistency in your site-wide styles.

Upvotes: 5

Related Questions