How do I customize the number of rows in my rich_text_area for simple_form?

Question

I am using SimpleForm 5.0.2 along with ActionText.

I would like the main body field of my form to be multiple rows (say 10), but I can't figure out how to get it to work.

This is my current attempt:

<%= f.rich_text_area :body, class: 'form-control', name: "article-text", input_html: { rows: 10 }, placeholder: "Enter your article body here..." %>

That produces this HTML:

<trix-editor class="form-control" input_html="{:rows=>10}" placeholder="Enter your article body here..." id="article_body" input="article_body_trix_input_article" data-direct-upload-url="http://localhost:3000/rails/active_storage/direct_uploads" data-blob-url-template="http://localhost:3000/rails/active_storage/blobs/:signed_id/:filename" contenteditable="" role="textbox" trix-id="1" toolbar="trix-toolbar-1"></trix-editor>

Which looks like this:

Note that I also tried various iterations of input_html:, including but not limited to:

<%= ... input_html: { 'rows': '10' } ... %>

<%= ... input_html: { rows: "10" } ... %>

All to no avail.

How do I get this working?

score 9 · Accepted Answer · answered Apr 29 '20 at 08:23

9

It looks like the rich_text_area only accepts :class option so the :input_html does nothing here. But because the height is decided by CSS, we can achive what you want by overrding the default min-height CSS of trix-editor.

In app/assets/stylesheets/actiontext.scss

trix-editor {
  &.customized-min-height {
    min-height: 15em;
  }
}

In your view file

f.rich_text_area :body, class: "form-control customized-min-height"

answered Apr 29 '20 at 08:23

Thang

811
1
5
12

1

The form-control class was mandatory but problematic for me. The text area was not expanding vertically with text, so the text was outside the area. To fix it `height: unset !important;`. – rdupz Jan 14 '21 at 17:38
@rdupz, I included the `form-control` as in the original question, it is NOT mandatory. – Thang Jan 15 '21 at 16:39
Yes. When I say mandatory I mean it was set automatically by simple_form. – rdupz Jan 15 '21 at 16:41
Nice! Thanks for your clarification @rdupz – Thang Jan 15 '21 at 16:44

score 2 · Answer 2 · answered Nov 13 '20 at 18:09

2

You can set a min-height property for the trix editor, like so:

trix-editor {
  &.form-control {
    min-height: 20rem;
    height: auto;
  }
}

answered Nov 13 '20 at 18:09

SeHoon Park

21
1

Thank you. Not sure if this or @Thang is better. Both solved the problem which was only one line. Why is this needed? Something in my app changed because by default it was about four lines. But I know I have an issue because the icons for the edit tools don't show, only words. Rails 7, esbuild, cssbundling-rails, bootstrap. – Greg May 26 '23 at 17:52

How do I customize the number of rows in my rich_text_area for simple_form?

2 Answers2