Project

General

Profile

setLayoutSizeAware() is protected?

Added by Mark Travis 7 days ago

I'm trying to get a WTextEdit and a WTextArea to resize themselves when the neighboring div is resized.

I thought this would be handled by setLayoutSizeAware() from WWidget, however, I find it is a protected method.

Is that a feature or a bug?


Replies (2)

RE: setLayoutSizeAware() is protected? - Added by Matthias Van Ceulebroeck 6 days ago

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

RE: setLayoutSizeAware() is protected? - Added by Mark Travis 6 days ago

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.

    (1-2/2)