How to set the width of collapsed layout

Suite and Optimus Suite 5
#1

When i have collapsed one of my fields, it has a width that is too small for a touchscreen. I want to adapt this width so it is more wide when collapsed. How do I do this?

#2

P.S. I don’t mean the layout components on the dhtmlxtouch library, but on the regular dhtmlx suite

#3

You need to modify dhtmlxlayout.js and redefine several css classes. What skin are you using ?

#4

skyblue

#5

dhtmlxlayout.js:

locate:
“dhx_skyblue” : {“hor_sep_height”: 5, “ver_sep_width”: 5, “cpanel_height”: 26, “cpanel_collapsed_width”: 18, “cpanel_collapsed_height”: 18},

and define new “cpanel_collapsed_width” and “cpanel_collapsed_height”

css classes that needs being redefined:

/container/
table.dhtmlxLayoutPolyContainer_dhx_skyblue td.dhtmlxLayoutSinglePoly div.dhtmlxPolyInfoBarCollapsedHor {
height:18px;
}
/arrow button/
table.dhtmlxLayoutPolyContainer_dhx_skyblue td.dhtmlxLayoutSinglePoly div.dhtmlxPolyInfoBarCollapsedHor div.dhtmlxInfoButtonShowHide_ver {
height:16px;
position:absolute;
right:4px;
top:1px;
vertical-align:top;
width:16px;
}

table.dhtmlxLayoutPolyContainer_dhx_skyblue div.dhtmlxPolyInfoBarCollapsedHor div.dhtmlxLineL {
height:16px;
}
table.dhtmlxLayoutPolyContainer_dhx_skyblue div.dhtmlxPolyInfoBarCollapsedHor div.dhtmlxLineR {
height:16px;
}
/vertical/
table.dhtmlxLayoutPolyContainer_dhx_skyblue td.dhtmlxLayoutSinglePoly div.dhtmlxPolyInfoBarCollapsedVer div.dhtmlxInfoBarButtonsFake {
background-image:url("…/imgs/dhxlayout_dhx_skyblue/dhxlayout_collapsedver.gif");
width:18px;
}
table.dhtmlxLayoutPolyContainer_dhx_skyblue td.dhtmlxLayoutSinglePoly div.dhtmlxPolyInfoBarCollapsedVer div.dhtmlxInfoButtonShowHide_hor {
height:16px;
left:1px;
position:absolute;
text-align:center;
top:6px;
vertical-align:top;
width:16px;
}
table.dhtmlxLayoutPolyContainer_dhx_skyblue div.dhtmlxPolyInfoBarCollapsedVer div.dhtmlxLineL {
width:16px;
}
table.dhtmlxLayoutPolyContainer_dhx_skyblue div.dhtmlxPolyInfoBarCollapsedVer div.dhtmlxLineR {
width:16px;
}