2

Trying to help the client's designer with a CSS-related problem she's having with input fields in a Smart capture form (in Cloud Pages).

The problem is that Firefox treats padding differently than does Chrome with input fields. In Chrome, if you add 20px padding top and bottom, the line height is respected and the field's overall height is increased to accommodate the padding.

In Firefox, if you have a font size of 1.5em and a line height of 1.5em, but add top and bottom padding of 1em, the line height is effectively eliminated and text will not display.

The trick would seem to be to increase the field's height, but the f.css file that contains some default Fuel UX CSS style for forms and is overriding the custom CSS on the Smart Capture form. f.css is located here:

https://xx.sx.exacttarget.com/cloudpages/css/f.css

The style overriding height is this:

.fuelux input[type='text'],
.fuelux input[type='number'],
.fuelux input[type='email'] {
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
    height: 23px !important;
}

Is there a way to edit the f.css file or override it?

2
  • Just wondering if you ever were able to solve this? – Matt May 11 '17 at 5:15
  • 1
    The designer and I tried several changes and what ultimately worked was using "height: auto" and adding "!important" to the end of the line, like this: height: auto !important; – Karl Barndt May 12 '17 at 14:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.