How to do adaptive layout according to the size of device

Find code here before you post.
Locked
support
Posts: 356
Joined: Sat Apr 27, 2013 9:22 am

How to do adaptive layout according to the size of device

Post by support »

There are two ways to implement such adaptive layout.

1. Use 'position: relative'
   
xui.Class('App', 'xui.Module',{
    Instance:{
        iniComponents : function(){
            // [[Code created by CrossUI RAD Studio
            var host=this, children=[], append=function(child){children.push(child.get(0));};
            
            append(
                xui.create("xui.UI.Dialog")
                .setHost(host,"xui_ui_dialog3")
                .setLeft("14.166666666666666em")
                .setTop("4.166666666666667em")
                .setWidth("29.166666666666668em")
                .setHeight("27.5em")
                .setCaption("Resize the dialog ....")
                .setMinBtn(false)
                .setMaxBtn(false)
            );
            
            host.xui_ui_dialog3.append(
                xui.create("xui.UI.Block")
                .setHost(host,"xui_ui_block2")
                .setWidth("8em")
                .setHeight("8em")
                .setPosition("relative")
                .setHtml("<div style=\"text-align: center;\">Block 1</div>")
                );
            
            host.xui_ui_dialog3.append(
                xui.create("xui.UI.Block")
                .setHost(host,"xui_ui_block3")
                .setWidth("8em")
                .setHeight("8em")
                .setPosition("relative")
                .setHtml("<div style=\"text-align: center;\">Block 2</div>")
                );
            
            host.xui_ui_dialog3.append(
                xui.create("xui.UI.Block")
                .setHost(host,"xui_ui_block4")
                .setWidth("8em")
                .setHeight("8em")
                .setPosition("relative")
                .setHtml("<div style=\"text-align: center;\">Block 3</div>")
                );
            
            host.xui_ui_dialog3.append(
                xui.create("xui.UI.Block")
                .setHost(host,"xui_ui_block12")
                .setWidth("8em")
                .setHeight("8em")
                .setPosition("relative")
                .setHtml("<div style=\"text-align: center;\">Block 4</div>")
                );
            
            return children;
            // ]]Code created by CrossUI RAD Studio
        }
    }
});
xui.Class('App', 'xui.Module',{
    Instance:{
        iniComponents : function(){
            // [[Code created by CrossUI RAD Studio
            var host=this, children=[], append=function(child){children.push(child.get(0));};
            
            append(
                xui.create("xui.UI.Dialog")
                .setHost(host,"xui_ui_dialog3")
                .setLeft("14.166666666666666em")
                .setTop("4.166666666666667em")
                .setWidth("29.166666666666668em")
                .setHeight("27.5em")
                .setCaption("Resize the dialog ....")
                .setMinBtn(false)
                .setMaxBtn(false)
            );
            
            host.xui_ui_dialog3.append(
                xui.create("xui.UI.Block")
                .setHost(host,"xui_ui_block2")
                .setWidth("8em")
                .setHeight("8em")
                .setPosition("relative")
                .setHtml("<div style=\"text-align: center;\">Block 1</div>")
                );
            
            host.xui_ui_dialog3.append(
                xui.create("xui.UI.Block")
                .setHost(host,"xui_ui_block3")
                .setWidth("8em")
                .setHeight("8em")
                .setPosition("relative")
                .setHtml("<div style=\"text-align: center;\">Block 2</div>")
                );
            
            host.xui_ui_dialog3.append(
                xui.create("xui.UI.Block")
                .setHost(host,"xui_ui_block4")
                .setWidth("8em")
                .setHeight("8em")
                .setPosition("relative")
                .setHtml("<div style=\"text-align: center;\">Block 3</div>")
                );
            
            host.xui_ui_dialog3.append(
                xui.create("xui.UI.Block")
                .setHost(host,"xui_ui_block12")
                .setWidth("8em")
                .setHeight("8em")
                .setPosition("relative")
                .setHtml("<div style=\"text-align: center;\">Block 4</div>")
                );
            
            return children;
            // ]]Code created by CrossUI RAD Studio
        }
    }
});
   
2. Use 'dock:top' and ''dockStretch:fixed"
   
xui.Class('App', 'xui.Module',{
    Instance:{
        iniComponents : function(){
            // [[Code created by CrossUI RAD Studio
            var host=this, children=[], append=function(child){children.push(child.get(0));};
            
            append(
                xui.create("xui.UI.Dialog")
                .setHost(host,"xui_ui_dialog3")
                .setLeft("14.166666666666666em")
                .setTop("4.166666666666667em")
                .setWidth("29.166666666666668em")
                .setHeight("27.5em")
                .setCaption("Resize the dialog ....")
                .setMinBtn(false)
                .setMaxBtn(false)
                .setConDockPadding({
                    "left":5,
                    "top":5,
                    "right":5,
                    "bottom":5
                })
                .setConDockSpacing({
                    "width":5,
                    "height":5
                })
                .setConDockStretch("fixed")
            );
            
            host.xui_ui_dialog3.append(
                xui.create("xui.UI.Block")
                .setHost(host,"xui_ui_block2")
                .setDock("top")
                .setWidth("8em")
                .setHeight("8em")
                .setHtml("<div style=\"text-align: center;\">Block 1</div>")
                );
            
            host.xui_ui_dialog3.append(
                xui.create("xui.UI.Block")
                .setHost(host,"xui_ui_block3")
                .setDock("top")
                .setWidth("8em")
                .setHeight("8em")
                .setHtml("<div style=\"text-align: center;\">Block 2</div>")
                );
            
            host.xui_ui_dialog3.append(
                xui.create("xui.UI.Block")
                .setHost(host,"xui_ui_block4")
                .setDock("top")
                .setWidth("8em")
                .setHeight("8em")
                .setHtml("<div style=\"text-align: center;\">Block 3</div>")
                );
            
            host.xui_ui_dialog3.append(
                xui.create("xui.UI.Block")
                .setHost(host,"xui_ui_block12")
                .setDock("top")
                .setWidth("8em")
                .setHeight("8em")
                .setHtml("<div style=\"text-align: center;\">Block 4</div>")
                );
            
            return children;
            // ]]Code created by CrossUI RAD Studio
        }
    }
});
xui.Class('App', 'xui.Module',{
    Instance:{
        iniComponents : function(){
            // [[Code created by CrossUI RAD Studio
            var host=this, children=[], append=function(child){children.push(child.get(0));};
            
            append(
                xui.create("xui.UI.Dialog")
                .setHost(host,"xui_ui_dialog3")
                .setLeft("14.166666666666666em")
                .setTop("4.166666666666667em")
                .setWidth("29.166666666666668em")
                .setHeight("27.5em")
                .setCaption("Resize the dialog ....")
                .setMinBtn(false)
                .setMaxBtn(false)
                .setConDockPadding({
                    "left":5,
                    "top":5,
                    "right":5,
                    "bottom":5
                })
                .setConDockSpacing({
                    "width":5,
                    "height":5
                })
                .setConDockStretch("fixed")
            );
            
            host.xui_ui_dialog3.append(
                xui.create("xui.UI.Block")
                .setHost(host,"xui_ui_block2")
                .setDock("top")
                .setWidth("8em")
                .setHeight("8em")
                .setHtml("<div style=\"text-align: center;\">Block 1</div>")
                );
            
            host.xui_ui_dialog3.append(
                xui.create("xui.UI.Block")
                .setHost(host,"xui_ui_block3")
                .setDock("top")
                .setWidth("8em")
                .setHeight("8em")
                .setHtml("<div style=\"text-align: center;\">Block 2</div>")
                );
            
            host.xui_ui_dialog3.append(
                xui.create("xui.UI.Block")
                .setHost(host,"xui_ui_block4")
                .setDock("top")
                .setWidth("8em")
                .setHeight("8em")
                .setHtml("<div style=\"text-align: center;\">Block 3</div>")
                );
            
            host.xui_ui_dialog3.append(
                xui.create("xui.UI.Block")
                .setHost(host,"xui_ui_block12")
                .setDock("top")
                .setWidth("8em")
                .setHeight("8em")
                .setHtml("<div style=\"text-align: center;\">Block 4</div>")
                );
            
            return children;
            // ]]Code created by CrossUI RAD Studio
        }
    }
});
   

Locked