Quick method to scale elements for mobile screen

Suite and Optimus Suite 8
#1

Is there a quick way to scale DHTMLX objects? I have a Layout that contains a Form and a Grid. It looks fine on a desktop PC monitor, but it’s tiny on a mobile device. I’d like to automatically scale it on the mobile device (roughly 3x the normal size) without having to rewrite the entire page with custom CSS. Below is the layout definition, if it helps or matters.

     UI.Layout = new dhx.Layout("divLayout",{
        rows:   [
            {
                height: "content",
                cols:   [
                    {id:"login-form-cell",css:"dhx_widget--bordered",header:"Check In",height:"content",width:320}
                ]
            },
            {id:"grid-cell",css:"dhx_widget--bordered",header:"Attendees"}     
        ]
    });

I tried using the CSS “scale” property, but it made the page unusable by shifting everything off the left of the page. I’m certain there must be something easier than rewriting the CSS for all the DHTMLX elements on the page, and I’m just not aware of it.

#2

There is no any special setting in this case.

You may try to prepare different css themes for the different screen resolutions and apply a needed depending on a target device:

1 Like