Search code examples
htmlcssruby-on-railscss-frameworks

Why is that, when using CSS framework, all forms are 100% width by default?

And how can I work around it? I have just realized this -- or maybe it's unique me. No matter which CSS framework I use, forms occupy the entire width. I've tried resizing according to their keywords (e.g. "is-9" in Bulma), but none worked.

I created a section that wraps around the form that's written in ERB and wrote a CSS that sets max-width of that section.

Is this the only way to deal with this? Or is there a standard way that I'm missing? I cannot find any information related to this.

UPDATE:

Per the fantastic suggestions by the commenters, I have identified the specific CSS code within the CSS framework causing this, then I have overridden that code with my own in the application stylesheet.

This however seems cumbersome. Is this how CSS frameworks are used? Do they always set min-width as well as default width for forms to 100%?

Solution

  • As mentioned in the comments, I suggest you:

    • Open up the developer console in your browser.
    • Look at the styles applied to your forms to see where the undesired behavior is coming from.
    • Override it with your own CSS.

    As to whether this is how CSS frameworks are used, I don't have a definitive answer. But, in my experience, the answer is "yes" and having the ability to override more general behaviors (in the framework) with more specific ones (in your application) puts the "Cascading" in Cascading Style Sheets.