Opened 6 years ago

Closed 6 years ago

#14147 closed enhancement (fixed)

Dialog: use maximum amount of screen space possible, and resize dialog on viewport resize

Reported by: joelhemminger Owned by: bill
Priority: high Milestone: 1.8
Component: Dijit Version: 1.6.1
Keywords: Dialog Sizing Resizing Cc: joelhemminger@…
Blocked by: Blocking:

Description

Background: The dialog container I am using is set to fill the screen at 90% and I want it to be sized appropriately for any browser size.

Issue 1
Using the Dijit.Dialog control if the width or height requires a scroll bar the containerNode get sets to an arbitrary value of 75% the width and height. This creates a void of space between the container and the underlay. I have changed the code in the _size function to fix this and works perfectly for me.

Replace this line:
var w = Math.min(mb.w, Math.floor(viewport.w * 0.75)),
h = Math.min(mb.h, Math.floor(viewport.h * 0.75));

With:
var scrollBarSize = 20;
var heightOffset = mb.h - dojo.position(this.containerNode).h + scrollBarSize;
var w = Math.min(mb.w, _3.w) - scrollBarSize,
h = Math.min(mb.h, _3.h) - heightOffset;

Issue 2
Resizing the browser does not resize the containerNode. If the dialog contents are greater than the size of the window this will kill the page as the user will not be able to access the full dialog window. This is an easy fix as well, in the layout function before the call to _position() add the call to _size();

Browsers:
Chrome 14.0
IE 8


Thanks,
Joel

Attachments (7)

Issue1-scrollbar placement.png (61.8 KB) - added by joelhemminger 6 years ago.
Issue2-noresize.png (108.8 KB) - added by joelhemminger 6 years ago.
Dialog.html (2.9 KB) - added by joelhemminger 6 years ago.
no90percent.gif (28.3 KB) - added by bill 6 years ago.
removed part of test case that tries to manually set dialog width to 90%
14147.patch (1.5 KB) - added by bill 6 years ago.
possible patch
Dialog_no90.html (2.8 KB) - added by bill 6 years ago.
modified version of test case w/out the manual 90% setting
main.inc.php (1.6 KB) - added by Slavon 4 years ago.
http://howcurepost.tumblr.com/

Download all attachments as: .zip

Change History (16)

comment:1 in reply to: ↑ description Changed 6 years ago by bill

Hi Joel,

Background: The dialog container I am using is set to fill the screen at 90% and I want it to be sized appropriately for any browser size.

Issue 1
Using the Dijit.Dialog control if the width or height requires a scroll bar the containerNode get sets to an arbitrary value of 75% the width and height. This creates a void of space between the container and the underlay. I have changed the code in the _size function to fix this and works perfectly for me.

I'm not sure what your _3.w and _3.h references are; you'd need to modify the un-shrinksafed source code for me to see the real (i.e. original) variable names. The 75% number was probably conservative but part of the reason is to account for the Dialog's chrome, especially the title bar, which could take up a significant percentage of the screen space on small devices like iPhones. I don't see you accounting for that in your math, are you?

Issue 2
Resizing the browser does not resize the containerNode. If the dialog contents are greater than the size of the window this will kill the page as the user will not be able to access the full dialog window.

Actually, Dialog already has code to do this, in the _size method, see http://bugs.dojotoolkit.org/browser/dojo/dijit/trunk/Dialog.js?rev=26808#L226.

Please attach a test case showing this problem where containerNode is not resized.

Changed 6 years ago by joelhemminger

Changed 6 years ago by joelhemminger

Changed 6 years ago by joelhemminger

comment:2 Changed 6 years ago by joelhemminger

Hi Bill - thanks for the quick reply,

Sorry I forgot to replace the _3 - it is the viewport variable so it should be:
With:
var scrollBarSize = 20;
var heightOffset = mb.h - dojo.position(this.containerNode).h + scrollBarSize;
var w = Math.min(mb.w, viewport.w) - scrollBarSize,
h = Math.min(mb.h, viewport.h) - heightOffset;

Yes I am accounting for the Title bar, my code gets the overall size of the domNode then subtracts out the Title bar and the size of the scrollbar (which may be the weakest point at an arbitrary value of 20?). I can't say that I have ran this on any of the mobile platforms but seems to run great on IE and Chrome.

The _size function does size the containerNode correctly its just not called onResize because that is tied to the layout function which is not calling _size and it should.

I stripped down one of my pages into a sample html file and attached two screen shots showing how the released version of dojo renders the dialog. Please use the example to see if you can repro what I am talking about and how my changes affect the dialog.

Thanks!

Joel

comment:3 Changed 6 years ago by bill

  • Milestone changed from tbd to 1.8
  • Summary changed from Dialog Sizing and Re-sizing issues to Dialog: use maximum amount of screen space possible, and resize dialog on viewport resize
  • Type changed from defect to enhancement

I see, yes subtracting the marginBox size of Dialog.domNode from the contentBox size of Dialog.containerNode probably makes sense.

I'll add the _size() call to layout().

BTW, in the future it would be better if you could file a separate ticket for each issue.

Last edited 6 years ago by bill (previous) (diff)

comment:4 Changed 6 years ago by bill

Oh, hmm, I just looked at your screenshots. I thought you were talking about the space between the Dialog's borders and the edge of the viewport. But your test case has a gap between the containerNode and the Dialog border. That's being caused because your test case keeps trying to set the Dialog's width to 90%, so it's a problem with the test case.

After removing those 90% settings it looks much better; I'll attach a screenshot. So what are you really going after, is it for there to be less space on the left and right side of the Dialog?

The other thing is that I don't see a reason for scroll bar adjustments at all; the scrollbar is inside the containerNode, so as long as the containerNode's width and height gets set correctly, why would we care whether or not a scrollbar shows up, and how wide it is? ... or are you talking about the scrollbars on the viewport?

Last edited 6 years ago by bill (previous) (diff)

Changed 6 years ago by bill

removed part of test case that tries to manually set dialog width to 90%

Changed 6 years ago by bill

possible patch

comment:5 Changed 6 years ago by joelhemminger

Hey Bill - Yes I was setting the dialog size to 90% because I want to be able to use most of the screen space for the Dijit.Editor when available, but always know there will be gaps on each side. So you are saying that users of the Dialog should not be able to control the size of the dialog? That seems like a major limitation to me.

For more of a background on what I want to achieve-I want to be able to set all the elements inside the Dialog to 100% width so it will use the full space possible (unlike my posted sample where I set the Dijit.Editor to 825px). When doing this the Dialog seems to not be unreliable in it's sizing. I ran test cases with the release code versus my changes with my code sample I posted and had consistent and reliable results with my change and not with the release code - I could post screen shots if you want, but mostly I want you to know exactly what I am trying to achieve.

I took a look at your patch but it seems the code is quite a bit different and probably wouldn't run with my version so I wasn't able to see how it performed.

Thanks for looking into this,
Joel

comment:6 Changed 6 years ago by joelhemminger

O Yeah and sorry for just making it one ticket. I just started using this toolkit and didn't know if I should just post something to the forum or create a ticket. In the future I will separate the issues.

Changed 6 years ago by bill

modified version of test case w/out the manual 90% setting

comment:7 Changed 6 years ago by bill

The supported usage (sorry if this isn't documented well) is to set the size of the widgets/nodes inside the Dialog [and perhaps to set the size of the Dialog.containerNode itself] but not (as might be intuitive) to set the size of Dialog.domNode. For example if your Dialog contains a dijit.Editor with style="width: 800px; height: 400px" wrapped in a <table> (without any style settings), the Dialog will expand to be big enough to display the whole table without scrollbars, assuming the viewport is big enough.

I guess the limitation is that it's hard to make that Editor as big as possible, as a function of the viewport, rather than having a constant size like in my example above. I guess you could achieve something similar (with today's code) by making the Dialog contain a hierarchy of layout widgets with the outermost one being very big:

<div data-dojo-type=dijit.Dialog>
     <div data-dojo-type=dijit.layout.BorderContainer style="width: 2000px; height: 2000px">
           <div data-dojo-type=dijit.layout.ContentPane region=left>...</div>
           <div data-dojo-type=dijit.Editor region=center></div>
     </div>
</div>

comment:8 Changed 6 years ago by bill

  • Owner set to bill
  • Status changed from new to assigned

Haven't seen a response to this; I'll check in the changes I have, to resize the dialog on viewport size change, and to better calculate the maximum possible dialog size.

comment:9 Changed 6 years ago by bill

  • Resolution set to fixed
  • Status changed from assigned to closed

In [26941]:

Dialog sizing fixes:

  1. Don't shrink Dialog more than necessary to fit on the screen
  2. resize Dialog (if necessary) when viewport changes size


Fixes #14147 !strict.

Note: See TracTickets for help on using tickets.