Menu icon Foundation
Input Text Box Styling Not Being Used

Hi there,

I've come across a strange problem where I have a Foundation form in the site's Masthead that is rendered using a partial. All of my Foundation code and App code is in app.scss -> app.css.

The text box is styled properly in some pages but not in others. On the pages where the text box uses Foundation styling, I can see my custom form styles on top of the Foundation form styles in the Browser Tools styles tab.

When it isn't styled correctly, I can see my custom form styles but the Foundation form styles are not showing, just the user agent's default styles?

I don't understand how this can be when all the pages use the same partial to render the form and share the same app.css? Can anyone suggest a solution?

Many thanks.

form

Hi there,

I've come across a strange problem where I have a Foundation form in the site's Masthead that is rendered using a partial. All of my Foundation code and App code is in app.scss -> app.css.

The text box is styled properly in some pages but not in others. On the pages where the text box uses Foundation styling, I can see my custom form styles on top of the Foundation form styles in the Browser Tools styles tab.

When it isn't styled correctly, I can see my custom form styles but the Foundation form styles are not showing, just the user agent's default styles?

I don't understand how this can be when all the pages use the same partial to render the form and share the same app.css? Can anyone suggest a solution?

Many thanks.

Rafi Benkual about 4 years ago

Are you using two different layouts? What are you using to compile the html?

Gazey Geester about 4 years ago

The layouts are the same, obviously, some of the content is different. When you said what am I using to compile the HTML, I assumed you meant to compress/minify the HTML? In that case, my CMF (ProcessWire) has a module called ProCache that minifies the HTML if you want it to. I turned off HTML minification, and the problem disappeared.

So, for now, problem solved but, I want my HTML minified. It's just whether I can throw the time at looking at the generated markup to see if there is a use-case that the HTML minifier is confused by or, whether my markup is slightly incorrect and the browser is tolerating it when not minified. I've checked as much as I can and my markup looks completely fine.

Dunno, but thanks for chiming in.