Hi,
I have been playing around for quite a while now with trying to override the CSS and finding the right combination to be able to have form controls to auto-resize when users change the size of the window or the Panels. I am not an expert in CSS which might explain why I find it challenging… help would be very, very, very appreciate!!!
Here is my expected behaviour:
- field set should be resized with the form so it fill the form all the time
- inputBox should resize on the right to grow with the form as it grow or shrink
- Grid should also resize to grow/shrink on the right when form is resized or shrink
- Checkbox should stay centred in the form no matter the size of the form
here is my code:
var str = [
{type: "settings",
position: "label-left"
},
{type: "block", name:'myFirstBlock', id:"firstBlock", offsetLeft:0, blockOffset:10,
list:[
{ type:"fieldset" , name:"firstFieldSet", label:"firstFieldSet", offsetLeft: 0,
list:[
{ type: "container", labelWidth:150,
name: "theContainer",
inputWidth: 200,
inputHeight: 70
},
{ type:'block', list:[
{type:'button', name:'btOne', value:"One", width:35 },
{type: 'newcolumn', offsetLeft: '15px'},
{type:'button', name:'btTwo', value:"Two", labelWidth:40, offsetLeft: 2, width:35}
]},
{ type: "select", name:"options",
options: [{
text: "option 1",
value: "option1"
}, {
text: "option 2",
value: "option2"
}, {
text: "option 3",
value: "option3"
}]
}
]},
{ type:"fieldset", label:"secondFieldSet", name:"secondFieldSet", offsetLeft: 0,
list:[
{ type:"input" , label:"input 1"},
{ type:"input" , label:"input 2" },
{ type:"input" , label:"input 3" },
{ type:"button", name:"btThree", value: "Three"}
]}
]
},
{type: "block", name:'mySecondBlock', id:"secondBlock", offsetLeft:0,
list:[
{ type:"fieldset" , name:"thirdFieldSet", offsetLeft: 0,
list:[
{ type:"input" , label:"input 4" },
{ type:"input" , label:"input 5" },
{ type: "label", label:"label", label:"label", labelWidth:120,
list: [
{ type: "checkbox", label:"firstCheck", value:"firstCheck"},
{ type:"newcolumn"},
{ type: "checkbox", label:"secCheck", value:"secCheck", offsetLeft: 10 }
]}
]
},
{ type: "newcolumn"},
{ type:"fieldset" , name:"fourthFieldSet", labelAlign:"left", offsetLeft: 0,
list:[
{ type:"input" , label:"label 6" },
{ type:"input" , label:"label 7" },
{ type: "checkbox", label:"thirdCheck", value:"thirdCheck" },
{ type:"input" , label:"label 8" }
]
}
]
}
];
var dhxLayout = new dhtmlXLayoutObject("parentId", "2U");
var a = dhxLayout.cells('a');
a.setText("Panel A");
var myForm = a.attachForm(str);
var b = dhxLayout.cells('b');
b.setText("Panel B");
b.attachObject ('secondBlock');
var informationGrid = new dhtmlXGridObject(myForm.getContainer("theContainer"));
informationGrid.setHeader ( "Col1, Col2, Col3" );
informationGrid.setInitWidths("90,90,70");
informationGrid.setColAlign("left,left,left");
informationGrid.setColumnIds("col1", "col2", "col3");
informationGrid.init();
…
<div id="parentId" style="position:absolute; width:600px; height:600px;"></div>thanks a lot for your help!
Sylvain