How do I use CSS with simple form?


Tags: css,simple-form

Problem :

I have a text_area that is showing up with a height that is too large.

I am using simple form and I have read their documentation, but am still unclear on how to apply a css class to a text_area.

My form:

  <div class="field">
    <p>What's on your mind?</p>
    <%= f.text_area :content, :wrapper_html => { :class => 'height-100px' }, placeholder: "Thought leads to action..." %>
  </div>

My css:

.height-100px {
   height:100px;
}

When I apply CSS to a div surrounding the input field it truncates the height, but inserts a scrollbar. Clearly, I am not applying the right css in that case.

I think this is an easy question to answer, but let me know. Thanks!



Solution :

I ended up applying the class name "mf" to the section and using the generic "textarea" element to style all textareas on the site using this:

.mf {
textarea { 
height:50px;
}
}

Would have been nice to apply the class name directly on the simpleform element, but it would not work for me...


    CSS Howto..

    How can I ensure that text is inside rounded div?

    How can I make a similar shape to a parallelogram in css?

    How to make columns scroll independently using CSS?

    Symfony3 - how can I add a photo using Symfony

    How to highlight one image over other using jquery css? [duplicate]

    How can i apply and/or remove a CSS class upon user selection on Radiobuttons with JQuery?

    How to edit a div inside PHP using CSS

    Box-shadow is overlapping other elements, how can I fix it?

    How to left-align and right-align elements in one row using flexbox?

    how do i hide anchor text without hiding the anchor

    How to show a div behind navigation on rollover

    How to use custom underline with breakline in CSS?

    Sidebar, Navigation and Content how to do it?

    How do you make these div elements display correctly?

    outlook.com how to target css at a specific class

    How to get a floating-DIV to fill available space within its parent DIV?

    How to exclude a CSS formatting? [duplicate]

    How do I load a nested web page in a
    tag using only javascript and html?

    how to Resize Quick TIme Player to the size of an HTML/CSS DIV

    HTML/CSS: How to get some text to align on right and other text on left on same line of table cell

    How to generate css using google chrome inspector to further use them?

    How do I alter my Jquery slideshow to change size in different screen resolutions

    How can I force each piece of a quadrant to inhabit only its fourth of the area (HTML/CSS)?

    How to have vertical record and header in HTML table using CSS

    How to fade between classes in a conditional query

    How do I center a character in a box using CSS?

    How to change color of disabled html controls in IE8 using css

    how to make background 100% on a top menu

    How do I align an inner div with the bottom of an outer div?

    CSS - How to use “vertical-align : middle” with a table near an image?