How to do adaptive layout according to the size of device

Find code here before you post.

How to do adaptive layout according to the size of device

Postby support » Fri Aug 25, 2017 2:22 am

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
}
}
});
   

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
}
}
});
   
support
 
Posts: 342
Joined: Sat Apr 27, 2013 9:22 am

Return to CrossUI Code Snaps

Who is online

Users browsing this forum: No registered users and 0 guests

cron