full screen dialog?

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

full screen dialog?

denov
All,

Is it possible to create a true 100% full screen dialog?  If I set the height and width of dialog and  or the inner div (per https://dojotoolkit.org/reference-guide/1.10/dijit/Dialog.html) too 100% the outer div.dijitLayoutContainer gets set to about 90%.


Thanks,
Deno
-- 
www.fullstacksystems.com

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: full screen dialog? - solved

denov
Ok, I solved it.

The part that's a bit weird is that I have to set the style of the dialog itself or I lose the title bar.  And if you try to remove the styles for dialog after show() you'll get a blink when it renders.


var da = new Dialog({ title: title,
                      content: dialogContent,
                      style: 'height:100%; width:100%; top:0; left:0; position:absolute; max-width: 100%; max-height: 100%',
                      draggable: false
                    }).placeAt('dialog');

da.show();
domClass.toggle(da.domNode, 'fullScreen', true);


.fullScreen {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

on the next problem..

- deno



On 3/8/2016 5:00 PM, Deno Vichas wrote:
All,

Is it possible to create a true 100% full screen dialog?  If I set the height and width of dialog and  or the inner div (per https://dojotoolkit.org/reference-guide/1.10/dijit/Dialog.html) too 100% the outer div.dijitLayoutContainer gets set to about 90%.


Thanks,
Deno
-- 
www.fullstacksystems.com




-- 
www.fullstacksystems.com

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: full screen dialog? - solved

Martin Jakobi-3

Hi Deno,

 

as an other suggestion, you can try to use  the Dialog#maxRatio property.

 

                               // maxRatio: Number

                               //                            Maximum size to allow the dialog to expand to, relative to viewport size

                               maxRatio: 0.9,

 

I have not tested maxRation=1.0, but an attempt would be worth it.

 

HTH

Martin

 

 

Deno Vichas wrote

 

Ok, I solved it.

The part that's a bit weird is that I have to set the style of the dialog itself or I lose the title bar.  And if you try to remove the styles for dialog after show() you'll get a blink when it renders.

var da = new Dialog({ title: title,
                      content: dialogContent,
                      style: 'height:100%; width:100%; top:0; left:0; position:absolute; max-width: 100%; max-height: 100%',
                      draggable: false
                    }).placeAt('dialog');
 
da.show();
domClass.toggle(da.domNode, 'fullScreen', true);
 
 
.fullScreen {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}


on the next problem..

- deno



On 3/8/2016 5:00 PM, Deno Vichas wrote:

All,

Is it possible to create a true 100% full screen dialog?  If I set the height and width of dialog and  or the inner div (per https://dojotoolkit.org/reference-guide/1.10/dijit/Dialog.html) too 100% the outer div.dijitLayoutContainer gets set to about 90%.


Thanks,
Deno

-- 
www.fullstacksystems.com






-- 
www.fullstacksystems.com

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: full screen dialog? - solved

denov
Martin,

I don't think setting maxRatio will work.  The code to figure out placement uses the content dom size in it's calc.   from dijit/Dialog.js

var node = this.domNode,
   viewport = winUtils.getBox(this.ownerDocument),
   p = this._relativePosition,
   bb = p ? null : domGeometry.position(node),
   l = Math.floor(viewport.l + (p ? p.x : (viewport.w - bb.w) / 2)),
   t = Math.floor(viewport.t + (p ? p.y : (viewport.h - bb.h) / 2))
   ;
domStyle.set(node, {
   left: l + "px",
   top: t + "px"
});


we've had a bit of a time getting showing dynamic content inside of dialog while keeping a responsive design and not using a pure dojo solution.



On 3/8/2016 9:57 PM, Martin Jakobi wrote:

Hi Deno,

 

as an other suggestion, you can try to use  the Dialog#maxRatio property.

 

                               // maxRatio: Number

                               //                            Maximum size to allow the dialog to expand to, relative to viewport size

                               maxRatio: 0.9,

 

I have not tested maxRation=1.0, but an attempt would be worth it.

 

HTH

Martin

 

 

Deno Vichas wrote

 

Ok, I solved it.

The part that's a bit weird is that I have to set the style of the dialog itself or I lose the title bar.  And if you try to remove the styles for dialog after show() you'll get a blink when it renders.

var da = new Dialog({ title: title,
                      content: dialogContent,
                      style: 'height:100%; width:100%; top:0; left:0; position:absolute; max-width: 100%; max-height: 100%',
                      draggable: false
                    }).placeAt('dialog');
 
da.show();
domClass.toggle(da.domNode, 'fullScreen', true);
 
 
.fullScreen {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}


on the next problem..

- deno



On 3/8/2016 5:00 PM, Deno Vichas wrote:

All,

Is it possible to create a true 100% full screen dialog?  If I set the height and width of dialog and  or the inner div (per https://dojotoolkit.org/reference-guide/1.10/dijit/Dialog.html) too 100% the outer div.dijitLayoutContainer gets set to about 90%.


Thanks,
Deno

-- 
www.fullstacksystems.com






-- 
www.fullstacksystems.com




-- 
www.fullstacksystems.com

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest