Trix WYSIWYG Editor change default rows/vertical height of textfield

Question

I read through the Trix documentation and an answer did not jump out at me for this. It appears that the Trix WYSIWYG editor defaults to 3 displayed rows:

Any chance this can be toggled to more rows, for example: 15 or so rows:

hmm, I see it has to do with the css min-height attribute. I'll keep looking at it. — Neil, Jun 08 '18 at 21:31

score 3 · Accepted Answer · answered Jun 08 '18 at 21:52

It is a matter of setting the min-height css attribute. Using javascript, this works if you only have one trix-editor on the page:

$('trix-editor').css("min-height", "350px");

If you have multiple trix editors on the page and you only want to change the default height for that one: what I did is I wrapped the trix editor in a div, set a class on that div, and used find:

$('.solution-trix-field-wrapper').find($('trix-editor')).css("min-height", "350px");

thank you for your answer: but where would one add this code on a rails 6 project? — BenKoshy, Feb 17 '20 at 05:34

score 2 · Answer 2 · edited Feb 17 '20 at 05:39

2

Yes, you are right, but I have solved the different way.

You can be overriding the default CSS like trix-content class

.trix-content{
    height: 350px;
}

you can increase the height using this CSS if you want to use scroll after some depth then overflow-y: auto; like

.trix-content{
    height: 350px;
    overflow-y: auto;
}

after 350px it will automatically add the scrollbar.

Where should I add the code?

Try adding it to your stylesheets/application.scss file (if you're using sass - or equivalent files).

edited Feb 17 '20 at 05:39

BenKoshy

33,477
14
111
80

answered Jun 08 '18 at 22:29

fool-dev

7,671
9
40
54

thank you for your answer: but where would I add this code on a rails 6 project? – BenKoshy Feb 17 '20 at 05:34
I know this answer is two years old but nonetheless I think it's worth pointing out that OP had issues with .trix-editor, not .trix-content. – inmydelorean Apr 15 '20 at 17:22

score 0 · Answer 3 · answered Mar 13 '22 at 20:29

0

In rails 7 I had to override the min-height of the trix-editor element. Code in app/assets/stylesheets/actiontext.css

trix-editor {
  min-height: 15em;
}

answered Mar 13 '22 at 20:29

antonkronaj

1,237
12
13

Trix WYSIWYG Editor change default rows/vertical height of textfield

3 Answers3

Where should I add the code?