Project

General

Profile

vertical resizing for complete browser window (layoutSizeAware) does not work properly?

Added by Michael Leitman almost 12 years ago

Hey there :)

I would like to create a fully dynamically size in wt, handle all size Changes to create different controls (like for example the "frog" on css-tricks.com)

So i created my own widget, which is derived from Wt::WContainerWidget and setLayoutSizeAware(true)

Directly on my WApplication i add an Layout and in this layout some of my SizeAware-ContainerWidgets.

With setRow/ColumnStretch(x, 1) i managed to behave like i want,

but with one unexpected behavior :-/

if the browser window gets smaller and smaller, at some point it reaches the minimum size where all widgets fit in and it shows scrollbars,

which is principle correct.

But if i then scroll down, i see that the widgets don't use their full height (but only the "actual visible browserwindow height"), as i want them to :-/

What am i doing wrong? :-s


Replies (13)

RE: vertical resizing for complete browser window (layoutSizeAware) does not work properly? - Added by Michael Leitman almost 12 years ago

I realized, that i have the same problem,

if i have a WTreeTable in a sizeAware ContainerWidget in a Layout.

If the tree collapses/expands it seems that the parent ContainerWidget not changes its size, an the tree overlaps the container.

Also, if i set a Colum Resizeable from a WGridLayout,

an then resize the colum, it is possible to set its width smaller than the actual content :(

RE: vertical resizing for complete browser window (layoutSizeAware) does not work properly? - Added by Michael Leitman almost 12 years ago

okay, i get a solution for the resizable Columns:

To prevent the column beeing smaller than the actual content i just set "min-width" per css style :)

But i still have problems with the correct, sizeaware Height :(

Is there nobody who can help me,

or is my question just not clear? xD

RE: vertical resizing for complete browser window (layoutSizeAware) does not work properly? - Added by Koen Deforche almost 12 years ago

Hey,

It is not entirely clear (the screenshots are quite complex too).

It would be helpful if you could create a small test case on what you want ?

Another thing that would be useful to us: can you see how the latest git behaves ?

Regards,

koen

RE: vertical resizing for complete browser window (layoutSizeAware) does not work properly? - Added by Michael Leitman almost 12 years ago

Hello Koen :)

Thanks for your answer, it's really difficult for me to describe my problem in english :(

I attached a test case of my problem, here a few word:

For WContainerWidgets i use my own Implementation, which is derived from the WContainerWidget and setLayoutSizeAware(true) to propagate size changes back to the server.

i also added a Name and WText inside my Container to identify my controls in the html.

The attached .zip contains the .cpp and .h file, with a teststyles.css and a .png "spacer_left".

Maybe you need the resources folder from the examples for the "column Resize slider" (i don't know how to name this thing correctly which shows up if WGridLayout->setColumnResizable() is called xD)

So if i connect (i used Chrome) to my application, after a short time everything resizes and i see the output as in the attached screenshot "startup.png"

With the button "toggle RowStretch" ich can toggle the RowStretch (0 or 1) for the last Row (inside widget is "Bottom") in the layout in the green bordered Containert (as the name suggests xD)

The button "resize me" onclick just changed his height (100 or 200).

So, and there we are, my points are the follwing:

Notification of resize

In this startup config (RowStretch is not set, so the right Container is divided into to containers (Top and Bottom) with equal height, all containerWidgets are inserted to a WGridLayout with SetSizeAware(true) and Alignment = 0)

if i resize the first Column (through this slider), i received only resizeChange Events (seen on console) for "Top" and "Bottom".

Is this the supposed behavior? I would like to get the new width for the "Left" Container directly, but now i have to caculate it of my own.

If i resize the whole browser window in width, i get sizeChanged for "Right" (the green-bordered), "Top" and "Bottom",

if i resize the whole browser window in height, updates for "Left", "Center", "Right", "Top" and "Bottom" are received, which seems correct.

If i resize width and height at the same time, also everything is fine.

Now i set RowStretch(1, 1) per "toggle RowStretch" button.

After this, if i resize i get no more ResizeEvents for Right and Bottom.

As you see in a more complicated Layout with more nested Layouts i have to calculate much to get the correct height for a specific widget.

Am i doing the whole Layout wrong or did i just miss something?

Browser window height

Another point is, if the browser window hits a height, smaller than the actual application content as seen in the attached screenshots ("toSmall.png" and "toSmall_rowStretch.png" with RowStretch(1, 1) )

Why does the Layout does not use the "whole real browser height" ?

This is very ugly, because i use a background image as you see on the left side... and i want this to fit the whole height.

Also, if i have RowStretch(1, 1) the nested container "Top" with the yellow border "overlaps" (does this word exits? o.O) overlaps his parent ("Right" with green border). "Bottom" is directly under "Top", which seems correct, except they are not in their parent.

Without RowStretch, "Top" and "Bottom" are in their parent, respecting his height,

but the Content of "Top" (the "resize me" button) completely ignore this.

I attached another screenshot, of what i want, "goal.png".

Is this possible? How?

Or i am just missing an overflow setting? :-/

best regards

the incredible Leitman

LayoutTests.rar (2.1 KB) LayoutTests.rar test case
startup.PNG (10.6 KB) startup.PNG application after startup
toSmall.PNG (6.22 KB) toSmall.PNG browser window smaller than app
toSmall_rowStretch.PNG (4.59 KB) toSmall_rowStretch.PNG browser window smaller than app, rowStretch(1, 1)
goal.PNG (4.61 KB) goal.PNG this is what i want

RE: vertical resizing for complete browser window (layoutSizeAware) does not work properly? - Added by Michael Leitman almost 12 years ago

"Another thing that would be useful to us: can you see how the latest git behaves?"

Maybe this is a really dumb question, but it's my first time xD

Where do i get "the latest git" ? (blush)

https://github.com/kdeforche/wt and there just download the .zip?

... because is think i just wasted a few hours, downloading "Looking for the latest version? Download wt-3.2.1-rc2.tar.gz (17.1 MB)" from here:

http://sourceforge.net/projects/witty/files/wt/3.2.1/

installed it on my windows, used it in the above test example and get the exactly same results xD

RE: vertical resizing for complete browser window (layoutSizeAware) does not work properly? - Added by Michael Leitman almost 12 years ago

ok, i now got the latest git (i hope ) from github.com

compiled and installed on my windows developement machine.

My results with the above test case are as following:

if i have the same code, after displaying the site, there are endless sizeChanged Events.

everytime once with width and height, and then --2 px

(e.g.: w = 400, h = 400, than 402, 402, again 400, 400, ... and so on, never stopping)

But if i don't use borders for my WContainerWidgets, the endless updating stops :)

Another point is, that i don't see the "column resize slider" ( no bg, no image) but i can resize the first column... but only make it smaller o.O

And last, but not least, that didn't solved my problem :(

Still, if i change the height that the content does not fit anymore,

i get a (in my opinion) strange behavior:

I attach the actual screenshots with this version

startup_git.PNG (10.7 KB) startup_git.PNG application after startup with new git
toSmall_git.PNG (6.16 KB) toSmall_git.PNG browser window smaller than app with new git
toSmall_rowStretch_git.PNG (6.03 KB) toSmall_rowStretch_git.PNG browser window smaller than app, rowStretch with new git

RE: vertical resizing for complete browser window (layoutSizeAware) does not work properly? - Added by Michael Leitman almost 12 years ago

I also attach the output, if i start my Application with the css borders:

_192.168.1.67 - - [2012-Jun-18 15:25:54.164969] "POST /TestSizeAware?wtd=1IXxzqgMTQNaloJY HTTP/1.1" 200 29

[2012-Jun-18 15:25:54.180594] 5660 - [info] "WebRequest: took 31.25ms"

Right size changed to: 588, 382

was: 0, 0

Right size changed to: 586, 380

was: 0, 0

192.168.1.67 - - [2012-Jun-18 15:25:54.211844] "POST /TestSizeAware?wtd=1IXxzqgMTQNaloJY HTTP/1.1" 200 29

[2012-Jun-18 15:25:54.211844] 5660 - [info] "WebRequest: took 31.25ms"

Right size changed to: 588, 382

was: 0, 0

Right size changed to: 586, 380

was: 0, 0

192.168.1.67 - - [2012-Jun-18 15:25:54.243094] "POST /TestSizeAware?wtd=1IXxzqgMTQNaloJY HTTP/1.1" 200 29

[2012-Jun-18 15:25:54.243094] 5660 - [info] "WebRequest: took 15.625ms"

Right size changed to: 588, 382

was: 0, 0

Right size changed to: 586, 380

was: 0, 0_

... and so on

RE: vertical resizing for complete browser window (layoutSizeAware) does not work properly? - Added by Koen Deforche almost 12 years ago

Hey,

Can you retry with latest git ? I couldn't reproduce most of your problems (perhaps because of changes that were not yet available in git).

W.r.t. scrollbars: the new layout management code will honor setMinimumSize() constraints --- if all widgets are at their minimum size, it will start to overflow the container, and with an overflow: auto CSS declaration this container will then show scrollbars, which is what I understand you're after ?

Regards,

koen

RE: vertical resizing for complete browser window (layoutSizeAware) does not work properly? - Added by Michael Leitman almost 12 years ago

Hey Koen :)

i just tried with the latest git, here my results:

1) My first problem is, if i use external css to add borders to my WContainerWidgets (to visualize their size) i get continously sizechanges with +--2px:

[2012-Jun-21 13:33:13.952683] 6120 - [info] "WebRequest: took 62.5ms"

_Right size changed to: 989, 304

was: 0, 0

Right size changed to: 987, 302

was: 0, 0

192.168.1.67 - - [2012-Jun-21 13:33:13.983933] "POST /TestSizeAware?wtd=FFMD69qWPxBaoD5U HTTP/1.1" 200 30

[2012-Jun-21 13:33:13.999558] 6120 - [info] "WebRequest: took 31.25ms"

Right size changed to: 989, 304

was: 0, 0

Right size changed to: 987, 302

was: 0, 0

192.168.1.67 - - [2012-Jun-21 13:33:14.046433] "POST /TestSizeAware?wtd=FFMD69qWPxBaoD5U HTTP/1.1" 200 30

[2012-Jun-21 13:33:14.062058] 6120 - [info] "WebRequest: took 62.5ms"

Right size changed to: 989, 304

was: 0, 0

Right size changed to: 987, 302

was: 0, 0_

propagated back from my derived ContainerWidget:

virtual void layoutSizeChanged( int w, int h )
{
    std::cout << m_name.toUTF8() << " size changed to: " << w << ", " << h << "\n";
    std::cout << " was: " << width().toPixels() << ", " << height().toPixels() << "\n";
}

if i don't use borders like ->addStyleClass("bordered-red"); the endless output stops.

2) The horizonzal scroller for resizable cols does not show up / is not usable in the newest git... also the html looks a bit different.

I attached screenshots with wt3.2.1 and the newest git for IE8 and Chrome.

NoResizeHandler_git.PNG and ResizeHandler_3.2.1.PNG

3)

W.r.t. scrollbars: the new layout management code will honor setMinimumSize() constraints --
if all widgets are at their minimum size, it will start to overflow the container, 
and with an overflow: auto CSS declaration this container will then show scrollbars, 
which is what I understand you're 
after ?

What i want to achieve at first, is that the height of the root (with root i mean the overall parent of my app, the underlaying WContainerWidget) uses the full Size of the browser window

!not only the visible area!

Means, if the browser window gets resized as far that the actual content inside does not fit in height, it gets scrollbars, which is correct imho.

But the actual height of the root (and his nested Layout main_layout in my example) is set to the visible Area of the browser.

I need this because i have a Background image for my Application,

and if the browser window is smaller than the content, doesn't show up if i scroll down.

i will try to explan what i want with the attached image FullHeight.PNG:

I used the attached test example in this case:

Added a WGridLayout (1 row, 3 columns) directly to root(), and added a background image per css background: url(spacer_left.png) repeat-y 0 0; to root() -> what, in my opinion means the whole application / body?

If the Browserwindow has enough height, so that all content fits in, there are no problems, the image on the left goes from the very top to bottom.

But if i resize the browser window (so that for example the resizeButton has a height of 200 and overlaps the visible area) a vertical scrollbar appears which covers the FULL content height.

But the body (also div with class "Wt-domRoot" and all other nested divs) only have a height of (in this case) 169px.

This has the result that the background image doesn't reach the bottom of my app, which is very ugly :(

In my opionion the body and Wt-domRoot should have a size of about 230px which represents the whole scrollable range of the vertical scrollbar?

Is this a completely wrong suggestion or am i just doing anything false or missing something?

As a counterexample, if i go to http://css-tricks.com/ resize my browser height,

the body / inner divs have a height over 5000 pixels... thats the same behavior as i want!

I attached a screenshot of css-tricks.com

4) another point is, that i noticed the output

 [2012-Jun-21 14:39:50.045098] 4412 [/GuideExample d6N3ltdW9x8wFGB4] [warning] "WContainerWidget: setLayout(layout, alignment) is being deprecated (and does no longer have the special meaning it used to have). Use spacers or CSS instead to control alignment"

in the newest git.

Doest this mean e.g. ..->setLayout(layout, AlignmentTop) is not available anymore?

How do ich reach than such a layout? Adding another Row or Column and setting ->Row/ColumnStretch(x, 1) ?

Any help is much appreciated,

best regards

  • the incredible Leitman
FullHeight.PNG (73.4 KB) FullHeight.PNG example picture
cssTricks_FullHeight.PNG (108 KB) cssTricks_FullHeight.PNG counterexample, what i want

RE: vertical resizing for complete browser window (layoutSizeAware) does not work properly? - Added by Koen Deforche almost 12 years ago

Hey,

Odd enough, your test case works fine for me, unmodified, except for point 3.

The fact that the scrollbars are not shown however suggest that you need to clear your browser cache.

W.r.t. point 3, I see that latest git still has issue still on how to deal with with over-sized contents, per minimum-size constraints (when modifying your test case with a call to setMinimumSize() for one of the widgets). I'll look into it ASAP.

W.r.t. point 4: setLayout(..., AlignTop) had overloaded meanings:

  • not using active vertical layout management (leaving all contents to its "preferred" vertical size)
  • aligning the contents in the top.

So yes, for the latter case, you need to add an extra row with stretch. One of the improvements is however that you will get layout-size-aware feed-back always (which was one of your original problems), and which is only possible because now layout management is always actively done.

Regards,

koen

RE: vertical resizing for complete browser window (layoutSizeAware) does not work properly? - Added by Koen Deforche almost 12 years ago

Hey Michael,

I've pushed a change to git that properly implements your test case (according to my understanding) --- i.e. it fixes point 3. I did need to add somewhere a setMinimumSize() for one of the widgets that are managed by the layout in order to trigger this scrollbar.

Regards,

koen

RE: vertical resizing for complete browser window (layoutSizeAware) does not work properly? - Added by Michael Leitman almost 12 years ago

Hey again :)

Yesterday i updated to wt3.2.2 and the latest changes are just incredible :D

I wanted to thank you so much, this seems exactly as what i wanted! :)))

I found out, what was the problem with my stated point1:

I still used "setLayoutSizeAware(true)" WContainerWidgets and progressiveBootstrap: true,

which leads to problems with borders :-/

And, what i meant with point2 weren't the "Scrollbars of the browser", but the "Column resize Handler"... i really don't know how it's called,

so i try to explain what i mean with the use of a little code example

I built a WGridLayout with more columns and add widgets to them.

Then, i want to allow the user himself to change the width of each columns, so i add a button which reacts to a clicked event:

SHOW_RESIZE_HANDLER = !SHOW_RESIZE_HANDLER;
if (SHOW_RESIZE_HANDLER)
{
    this->main_layout->setHorizontalSpacing(2); // -> set because of ColumnResizable
    this->main_layout->setColumnResizable(0); // Sets whether the user may drag a particular column border.
}
else
{
    this->main_layout->setColumnResizable(0, false);
    this->main_layout->setHorizontalSpacing(0);
}

The change of "horizontalSpacing" to another value than "0" is (was at least in wt3.2.1) necessary to give space for the "resize handler" to show up.

But since i updated to wt3.2.2 this doesn't work anymore :( Neither in IE8, nor Chrome, FF, Opera or Safari.

The resize handler for manually resizing of the columns doesn't show up

RE: vertical resizing for complete browser window (layoutSizeAware) does not work properly? - Added by Michael Leitman almost 12 years ago

oh there we are again xD

Sorry, that was my (really stupid >.<) fault!

Just yesterday I noticed, that in wt3.2.2 the wt.css file in the resources changed (due to the new Layout Management, i think, there are new resize handler... and i dont had them in my css files :( )

So, after insterting / merging the correct classes, the resize handler now works fine:

/*
 * WGridLayout
 */

.Wt-hrh div, .Wt-vsh, .Wt-hrh2, .Wt-vsh2 {
    cursor: row-resize;
}

.Wt-hrh div, .Wt-vsh {
    margin: 2px;
}

.Wt-vrh div, .Wt-hsh, .Wt-vrh2, .Wt-hsh2 {
    cursor: col-resize;
}

.Wt-vrh div, .Wt-hsh {
    margin: 0px 2px;
}

.Wt-hrh div, .Wt-hrh2 {
    background: url(splitter-v.png) no-repeat 50% 50%;
}

.Wt-vrh div, .Wt-vrh2 {
    background: url(splitter-h.png) no-repeat 50% 50%;
}

.Wt-hrh div, .Wt-vrh div, .Wt-vrh2 {
    background-color: #EEEEEE;
}

.Wt-hsh, .Wt-vsh, .Wt-hsh2, .Wt-vsh2 {
    background-color: #8ea2bd;
}

.Wt-hrh div:hover, .Wt-vrh div:hover,
.Wt-vrh2:hover, .Wt-hrh2:hover {
    background-color: #8ea2bd;
}

So, thanks, now this whole thread can be closed,

i am done with it

thanks for any help

  • the incredible Leitman
    (1-13/13)