Reducing textarea on Create Thread layout

[ronwebb]

I would like to reduce the size of the textarea where users enter the body of the post when creating a new thread. (Users seem to be confused because they don't realize they have to scroll to see the "create thread" button at the bottom of the textarea.)



My problem is that I can't find the Layout Template where that would be adjusted. Yes, I know it's at my own risk, and yes, I think I'm familiar enough with HTML that I can handle it -- if I can just find it. Can anyone give me a hint? 

[Kami]

Dec 31, 2021 13:38:31 GMT -8 ronwebb said:

I would like to reduce the size of the textarea where users enter the body of the post when creating a new thread. (Users seem to be confused because they don't realize they have to scroll to see the "create thread" button at the bottom of the textarea.)



My problem is that I can't find the Layout Template where that would be adjusted. Yes, I know it's at my own risk, and yes, I think I'm familiar enough with HTML that I can handle it -- if I can just find it. Can anyone give me a hint? 

You can't find it because you don't adjust this in the templates 🤭 Your best bet is to right click on the text area, use "inspect element" to find the class for it, then use CSS in your theme CSS to adjust. If you have multiple themes you will need to adjust for each theme; you could also put it between style tags in the global headers but I do not recommend it because the CSS in the headers doesn't get cached and it's suboptimal for loading.

Let me know if this gets you where you need to go, or if you need more help.

[ronwebb]

Dec 31, 2021 14:31:44 GMT -8 Kami said:

You can't find it because you don't adjust this in the templates 🤭 Your best bet is to right click on the text area, use "inspect element" to find the class for it, then use CSS in your theme CSS to adjust. If you have multiple themes you will need to adjust for each theme; you could also put it between style tags in the global headers but I do not recommend it because the CSS in the headers doesn't get cached and it's suboptimal for loading.

Let me know if this gets you where you need to go, or if you need more help.

Thanks Kami!  Wow, fast response! I'll probably need more help, but I think it'll have to wait till next year. Happy New Year!

[ronwebb]

Dec 31, 2021 14:31:44 GMT -8 Kami said:

You can't find it because you don't adjust this in the templates 🤭 ...

Okay, this being Covid and all, not much partying going on so I took another look.  I clicked on the textarea and selected "Inspect", and found this bit of code (with the indents cleaned up for readability):


<div class="editors ui-resizable">
 <div class="editor bbcode-editor" style="height: 360px;">
   <textarea style="width: 100%; border: 0px; padding: 0px; height: 360px;" tabindex="3">
   </textarea>
 </div>

 <div class="editor visual-editor" style="height: 360px; display: none;">
   <iframe style="height: 360px;">
   </iframe>
 </div>

 <div class="ui-resizable-handle ui-resizable-s">
 </div>
</div>
So there are actually two textareas, with class="editor bbcode-editor" and class="editor visual-editor", only one of which is displayed at a time.

But unless I'm misunderstanding something (entirely possible, I admit all this conditional code and embedded styles and such are beyond my pay grade), it sure looks to me like both textareas are hard-coded with "height: 360px".

But hard-coded where?

---

FWIW, I think I also found the relevant section of the style sheet (for bbcode, and I assume the visual editor is similar). I don't see anything helpful there, however.
/* BBCode Editor */

@bbcode_editor_background_color: @posts_odd_background_color;
@bbcode_editor_text_color: @posts_odd_text_color;
@bbcode_editor_text_font_family: @empty;
.ui-wysiwyg .editors .bbcode-editor textarea { color: @bbcode_editor_text_color; font-family: @bbcode_editor_text_font_family; background-color: @bbcode_editor_background_color; }
Feel free not to respond till next year.  This is not at all urgent.  

[Kami]

As mentioned, the best place to change this would be in your style sheet(s, if you have multiple themes). If you haven't worked with a stylesheet before, the best way to make edits is to scroll all the way to the bottom of the sheet and add in the changes on new lines — CSS stands for cascading style sheet, meaning that properties that occur at the "top" of the sheet will be overridden by anything that comes after it (assuming they modify the same area).

So, here my recommendation would be to pop this into the bottom of your style sheet:

.bbcode-editor textarea, .visual-editor iframe {

  height: 200px;

}

change 200 to whatever suits you*

** you may need to add an !important after the px, but try it without first.

*note that these changes a) will not reflect on the mobile version of the forum as we can only edit basic colours on the mobile version (you can disable mobile version via your admin panel but it's not recommended unless you have a mobile compatible theme); and b) will likely be weird for anyone with a larger screen resolution since they'd be able to see the post button without scrolling (there is a way to display this only for certain resolutions, so let me know if you want that option).

[Chris]

Dec 31, 2021 15:36:53 GMT -8 ronwebb said:

<div class="editors ui-resizable">
  <div class="editor bbcode-editor" style="height: 360px;">
    <textarea style="width: 100%; border: 0px; padding: 0px; height: 360px;" tabindex="3">
    </textarea>
  </div>

  <div class="editor visual-editor" style="height: 360px; display: none;">
    <iframe style="height: 360px;">
    </iframe>
  </div>

  <div class="ui-resizable-handle ui-resizable-s">
  </div>
</div>

So there are actually two textareas, with class="editor bbcode-editor" and class="editor visual-editor", only one of which is displayed at a time.

But unless I'm misunderstanding something (entirely possible, I admit all this conditional code and embedded styles and such are beyond my pay grade), it sure looks to me like both textareas are hard-coded with "height: 360px".

But hard-coded where?

The hard coding is right there in the posted HTML (height: 360px;).
But as you can see it is enforced on both the textarea and iframe as well as their respective containers so all would have to be addressed in order to properly adjust the height of the editor.

Inline styles take precedence over any CSS rule applied to it so for a rule to overcome this inherent disadvantage it must use the !important modifier as Kami mentioned.

.editor, .bbcode-editor textarea, .visual-editor iframe { 
   
  height: 200px!important;

}

The implications, if any, of such a change will shake out through time however (e.g. ill effects on codes that assume a hard-coded 360px height)