Project

General

Profile

Why does Wt::WDialog exceed the width of its parent?

Added by Zach Motsinger almost 7 years ago

I have a class that implements Wt::WContainerWidget (whose parent is Wt::WApplication's root()), and from inside that I have a function that calls the following code:

Wt::WDialog* dialog = new Wt::WDialog("title", this);
dialog->setMaximumSize(this->width(), this->height());
...
dialog->show();

However, on smaller browser windows (which is always the case on mobile devices) the edges of this dialog appear off-screen. There is no horizontal scrollbar, so this is indicative of the WDialog exceeding the width of its parent WContainerWidget.

How can I effectively force the size of my WDialog to be smaller than the width of the browser window?


Replies (9)

RE: Why does Wt::WDialog exceed the width of its parent? - Added by Koen Deforche almost 7 years ago

Hey,

The only option you have is to use resize("90", "90") e.g. to put a fixed size.

'this->width()' is probably going to return WLenght::Auto unless you set a width on the widget. It does not 'read' the width set by the browser for this widget.

Also note that a WDialog is special in the sense that it does not have a real parent widget --- it's a top level widget.

RE: Why does Wt::WDialog exceed the width of its parent? - Added by Zach Motsinger almost 7 years ago

Thanks for the reply! That is very helpful information.

Is there any way to find the current width of the browser and/or screen? I don't want to have the dialog take up the entire window when on a normal browser. Ideally I am looking to implement something similar to twitter bootstrap's grid system that automatically scales the widget based on the screen size.

RE: Why does Wt::WDialog exceed the width of its parent? - Added by Koen Deforche almost 7 years ago

You can use twitter's bootstrap system, but that cannot be used to size a 'dialog' itself. You can get the screen width/height from the app->environment().screenWidth()/Height().

RE: Why does Wt::WDialog exceed the width of its parent? - Added by Mark Petryk over 6 years ago

Koen, can you comment on this... I have queried environment().screenWidth() and I'm finding that it is returning the size of my display (in some cases) and in others the size of the browser. I was expecting it to return the size of the root() widget, I guess. But I'm surprised at the difference in reporting on the different browsers.

RE: Why does Wt::WDialog exceed the width of its parent? - Added by Wim Dumon over 6 years ago

Mark,

set a layout manager on the root and use a layout manager (e.g. VBoxLayout) to put a WContainerWidget in it that fills the entire root. Then use setLayoutSizeAware() and reiimplement layoutSizeChanged().

Wim.

RE: Why does Wt::WDialog exceed the width of its parent? - Added by Christian Meyer over 6 years ago

I had a similar Problem and found some workaround if you do not need the size on startup directly:

I placed an AuthWidget inside a Dialog and it misbehaved on mobile.

Now I use a JSignal to get the window width and height.

Unfortunately the Signal fires just after everything is loaded, so I can not use the Size at startup.

Environment::screenWidth()/Height() just gave me --1.

Is there a Possibility to get these JavaScript Variables at Startup?

The JavaScript part:

    std::string js = "var width = window.innerWidth"
            "|| document.documentElement.clientWidth"
            "|| document.body.clientWidth;"

            "var height = window.innerHeight"
            "|| document.documentElement.clientHeight"
            "|| document.body.clientHeight;" +
            _screenSignal->createCall("width", "height");

    doJavaScript(js);

The Signal part:

screenSignal = new Wt::JSignal<std::string, std::string>(this, "screenSignal");
screenSignal->connect(this, &HeilerSoftware::setScreenSize);

RE: Why does Wt::WDialog exceed the width of its parent? - Added by Koen Deforche over 6 years ago

Hey,

WEnvironment::screenWidth()/Height() should certainly work? They may be returning --1 only if you have a plain HTML session or if you're using a progressive bootstrap, and are trying to evaluate this function before the application progressed to 'ajax'.

However, as already mentioned, they return the width/height of the screen as opposed to the browser window. I agree that knowing the size of the window would be nice and could be made available similar to screen size. Can you file a feature request for this?

Koen

RE: Why does Wt::WDialog exceed the width of its parent? - Added by Eu Doxos almost 5 years ago

I just bumped into this one. I was playing a bit with the CSS in the web console and I don't understand why is width set to a fixed amount of pixels rather than being relative to the viewport width, like 90% and horizontally centered? It seems that the width is computed based on unwrapped text, which can exceed screen width very easily. Any easier solution than JS hacks? I am using bootstrap, FWIW.

    (1-9/9)