Support all sized/dimension mobiles

Discontinued products DHTMLX Touch
#1

Hi,

We are planning to build mobile based web application for our existing customer. We have totally 1000 customers approximately but they are having different models and different sizes (screen size).

What is the best way to handle this situation? i tried buildings few pages using dhtmlx touch controls in my web application but it does not appearing correctly in all mobiles, in some mobiles it goes out of screen.

please find attached one sample, i just created accordion controls it starts in the middle of my mobile. How to handle this?

Thanks
Gops

#2

My sample html - it appears in my mobile from the middle and goes out of screen. how can i bring this page into top of my mobile.

html,body{background-color:#ffffff;} .title {font-size: 15px;font-weight: bold;line-height: 16px;} .author {color: #635a12;font-size: 13px;font-weight: bold;} .dhx_list__item_selected .author{color: #ffffff;} .details {font-size: 13px;} KLJ Search 
	<script type="text/javascript" charset="utf-8">
	dhx.ui.fullScreen();
	dhx.ui({
		container:"ipad",
		type:"wide",
		cols:[
			{container:"accgrid",
				rows:[
				{ view:"accordion",
					type:"wide",
					rows:[
						{ 	
							header:"Text Search",
							body:{
								view:"text", id:"txttext", align:"top", label:"Catchword", name:"txttext",
								select:1
							}
						},
						{ 	
							header:"Party Search",
							body:{
								view:"text", id:"txtparty", align:"top", label:"Petitioner", name:"txtparty",
								select:0
							}
						},
						{ 	
							header:"Date Search",
							body:{
								view:"datepicker", id:"calendar1", label:'Date', timeSelect:true, labelAlign:"left", labelWidth:100,
							}
						}							
					]
				},
				{ view:"button", type:"form", label:"Search", click:"login();" }
			]}
		]
		
					
		});
		function login(){
			//alert("sdfdsf");
			/*shows "Checking ..." pop-up message within 750ms*/
			dhx.notice({ delay:750, message:"Searching ..."});

			/*gets form data*/
			//var formData = $$('loginForm').getValues();
			var whichcontent = $$('txttext');
			//alert(whichcontent.getValue());
			
			var partystr = $$('txtparty');
			//alert(partystr.getValue());
			
			var datestr = $$('calendar1');
			//alert(datestr.getValue());
			
			parent.location="kljtouchsql.asp?ptxt=" + partystr.getValue() + "&ttxt=" + whichcontent.getValue();
			//alert(whichcontent.getValue());
		}
		/*$$("details").bind($$("txtparty"));*/
	</script>
</body>
#3

Let me preference my comment with: I am a also a user, I am not dhtmlx support, so they may provide better advice.

Anyway, looking at the code, I would write it a bit differently. Allow dhtmlx to completely build the page using their libraries. That means, stop putting components inside of

tags.

To get a better idea, follow the first few steps in the tutorial: docs.dhtmlx.com/touch/doku.php?id=touch_start

Start off with the standard page:

<!DOCTYPE HTML>// specifies document type
<html>
    <head>
        <meta  name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">// meta tag
	<link rel="stylesheet" href="../../../codebase/touchui.css" type="text/css"> // dhtmlx touch file	
	<script src="../../../codebase/touchui.js" type="text/javascript"></script>  // dhtmlx touch file
    </head>
    <body>
    </body>
</html>

And leave they body completely empty.

Then include your own javascript file and immediately do this:

dhx.ready(function(){
 
  dhx.ui({
       ..\\ here you will place any component you would like to place on a page
    })

}

The dhx.ready() function will fire when the page has been loaded.

Then add what you want to display inside of dhx.ui()

And this will get you started in a great direction.

As far as supporting different devices: vastly different devices like an ipad and iphone should have 2 different layout and the only way I am aware to do this by detecting the device and running whichever layout you want to show.

This would entail creating 1 ui for the ipad and 1 ui for the iphone. Each UI can share lots of common code, like form validation, ajax handling, events, and etc…

Hope this helps a bit.