In my main layout, I have a horizontal ‘header’ cell at the top of the browser window. In it, I want to put a logo, information area, a selector, and user logout buttons… Ideally - I want to position the logo on the left hand side of the area, and the rest on the right hand side, leaving the middle to be used for positioning of ‘dhtmlx.message’ messages… The elements are not of constant and predictable size, so I would like to use relative positioning and float inside that header cell.
It appears that using two fieldsets (or blocks) to in the form to wrap the elements in will help me achieve that, however - I don’t seem to be able to control the floating of the cell inside layout without affecting everything else. The default float of the main layout and its cells is ‘float:left’, which looks to be set in dhtmlx.css by:
.dhxlist_obj_dhx_skyblue div.dhxlist_base {
float: left;
position: relative;
}
My code so far looks like this:
////////////////////////////////
var a = main_layout.cells(‘a’);
a.setHeight(50);
a.hideHeader();
var str_toparea = [
{ type:“block” , name:“header_logo_block”, position:“”, className:“header_logo_block”, list:[
{ type:“label” , name:“header_logo”, label:“”, className:“header_labels”, position:“” }
] },
{ type:“newcolumn” , position:“” },
{ type:“block” , name:“header_info_block”, position:“”, className:“header_info_block”, list:[
{ type:“select” , name:“header_select”, label:“”, position:“”, className:“header_labels”, options:[
{ value:“SelectOption1”, text:“Option1”, selected:true },
{ value:“SelectOption2”, text:“Option1” }
] },
{ type:“newcolumn” , position:“” },
{ type:“label” , name:“header_loggedin_username”, label:“LoggedInUsername”, className:“header_labels”, position:“” },
{ type:“newcolumn” , position:“” },
{ type:“button” , name:“header_logout_button”, value:“Sign Out”, className:“header_labels”, position:“” }
] }
];
var form_toparea = a.attachForm(str_toparea);
////////////////////////////////
So far, I have been trying to do the styling by applying a custom CSS class to the blocks, as that appears to be the highest point up the CSS tree I can do it.
Is it possible to control the styling parameters of a specific cell within a layout? Is the above achievable, or am I stuck having all the elements float from the left of the cell?
cheers,
jordan