Wt

Hello Mark,

the aim of WWidget::setLayoutSizeAware() is to be able to listen to WWidget::layoutSizeChanged().
Via this, you can do some manual resizing, based on the dimensions the layout manager returns to you.

This means that WWidget::layoutSizeChanged() would be overridden with an implementation to manage this, and as such, the feature is set up as such by design.

Based on what you said, my instinct would be to either:

• wrap the WTextEdit and WTextArea both in a layout manager that manages their size together. (e.g. the edit being 40%, the area 60%, based on the total 100% the layout manager sees, which isn't the whole width of the page, as the neighboring <div> exists). This layout manager becomes a child of the overarching layout that manages the combo of the edit and area, and of the neighboring`.
• if you dislike too many layout managers (I know I do!), manage them "manually" with some custom HTML/CSS, by means of a WTemplate (similar to the theme approach below, but a little more custom CSS required of course)
• if you are using a theme, delegate to the theme (e.g. grid system for Bootstrap), along the lines of:

<div class="row">
  <div class="col-sm-5">
    ${edit}
  </div>
  <div class="col-sm-5">
    ${area}
  </div>
  <div class="col-sm-2">
    ${neighbor}
  </div>
</div>

Does this help you along, or did I miss something?

Best,
Matthias

Ah, but that would be too easy!

I've got it set up in WTemplate using row and col. Specifically, the big container is col-2 and col-10. Within col-10 are 3 major rows. The third row down contains either the WTextEdit or the WTextArea, depending on what they select from the WStackedWidget. The row directly above is a WContainerWidget of smaller WContainerWidgets. If they resize the larger WContainerWidget, the WTextEdit/WTextArea widget should resize itself to take up the remaining space. A WContainerWidget is needed to contain the WTextEdit/WTextArea along with the WPushButtons associated with the text editors. I can get the WContainerWidgets to show a lower-right handle to resize and the container below resizes accordingly, but the editors themselves don't resize to fill their new container size.

All of this used to be handled elegantly with the old style WBoxLayout manager, but that isn't compatible with Bootstrap 5, Grid, and Flex. Unless the WBoxLayout modules have been re-written to be compatible in the intervening years?

Otherwise, I'm looking at implementing something along the lines of this "fiddle":

https://jsfiddle.net/6j10L3x2/1/

I could keep the WTemplates for the most part, but I'd need to change the col2:col10 and row:row:row structure of the XML to a flex layout and figure out where to insert the javascript to handle it.

Ah, I think this may just be something to do with TinyMCE specifically.

On lower versions (I think 4 and below), once the JS to replace the <textarea> runs, it will be replaced with a <span> containing TinyMCE-specific DOM. Here, depending on the current state, the height of certain element is thus hardcoded.
I think a higher TinyMCE version may resolve this, or, failing that some CSS. A quick test said a rule like:

.mceEditor table {
  height: 100%;
}

would resolve this. I also had to adapt .mceEditor .mceLast to ensure it displayed correctly, by setting its height (e.g. to 20px, but better make that relative).

That is, if I understood the explanation, and the only thing to change was the editor's height.

I understood is that, from the fiddle, Flex 3 can change dimensions, and depending on the height the editor has left, it should set the remaining available height accordingly.