Form controls go down when not fit in window

eiwai · March 11, 2016, 4:30am

Hi,

I have window with fixed size. But some controls are not fit inside the window and it make the controls to go down. I don’t want like that.

How can make it like below photo?

Below is the code.

dhxWins = new dhtmlXWindows();

                  var body = document.body,
                      html = document.documentElement;

                  var height = Math.max(body.scrollHeight, body.offsetHeight,
                                         html.clientHeight, html.scrollHeight, html.offsetHeight);

                  if (height > 760)
                      height = 760;
                  w1 = dhxWins.createWindow("w1", 0, 0, 900, 230);

                  dhxWins.window("w1").centerOnScreen();
                  dhxWins.window("w1").setModal(true);
                 w1.button("minmax").disable();
                  w1.button("park").disable();
                  w1.setText("Add Remark");

                  dhxLayout = w1.attachLayout("1C");
                  dhxLayout.cells("a").hideHeader();
                  dhxLayout.cells("a").setWidth(1500);
                  
                  var mon = mygrid.getColLabel(2);
                  var tue = mygrid.getColLabel(11);
                  var wed = mygrid.getColLabel(20);
                  var thurs = mygrid.getColLabel(29);
                  var fri = mygrid.getColLabel(38);
                  var sat = mygrid.getColLabel(47);
                  var sun = mygrid.getColLabel(56);

                  myRemarkForm = dhxLayout.cells("a").attachForm([
                        { type: "settings", labelWidth: 100 },
                        {
                            type: "block", blockOffSet: 0, list: [

                                  { type: "button", name: "SaveRemark", value: "Save", offsetLeft: 0, offsetTop: 0, width: "70" },
                                  { type: "newcolumn", offset: 5 },
                                  { type: "button", name: "CloseRemark", value: "Close", offsetLeft: 0, offsetTop: 0, width: "70" },
                                  { type: "newcolumn", offset: 5 },
                                  { type: "label", label: "<span class='LblMessage' >Max Char (80)</span>" }


                            ]
                        }
                        ,
                         {
                             type: "block", blockOffSet: 0, list: [
                            { type: "label", label: "<span class='LabelHeader' >" + mon + "</span>", name: "lblMon" },
                            { type: "input", name: "txtMonRemark", value: "", inputWidth: 150, maxLength: getMaxFieldLengthByName("Code") },
                            { type: "newcolumn" },
                            { type: "label", label: "<span class='LabelHeader' >" + tue + "</span>", name: "lblTue" },
                            { type: "input", name: "txtTueRemark", value: "", inputWidth: 150, maxLength: getMaxFieldLengthByName("Code") },
                            { type: "newcolumn" },
                            { type: "label", label: "<span class='LabelHeader' >" + wed + "</span>", name: "lblWed" },
                            { type: "input", name: "txtWedRemark", value: "", inputWidth: 150, maxLength: getMaxFieldLengthByName("Code") },
                            { type: "newcolumn" },
                            { type: "label", label: "<span class='LabelHeader' >" + thurs + "</span>", name: "lblThurs" },
                            { type: "input", name: "txtThursRemark", value: "", inputWidth: 150, maxLength: getMaxFieldLengthByName("Code") },
                            { type: "newcolumn" },
                            { type: "label", label: "<span class='LabelHeader' >" + fri + "</span>", name: "lblFri" },
                            { type: "input", name: "txtFriRemark", value: "", inputWidth: 150, maxLength: getMaxFieldLengthByName("Code") },
                            { type: "newcolumn" },
                            { type: "label", label: "<span class='LabelHeader' >" + sat + "</span>", name: "lblSat" },
                            { type: "input", name: "txtSatRemark", value: "", inputWidth: 150, maxLength: getMaxFieldLengthByName("Code") },
                            { type: "newcolumn" },
                            { type: "label", label: "<span class='LabelHeader' >" + sun + "</span>", name: "lblSun" },
                            { type: "input", name: "txtSunRemark", value: "", inputWidth: 150, maxLength: getMaxFieldLengthByName("Code") }
                             ]
                         }

                  ]);
                  myRemarkForm.setFontSize("8pt");
                  myRemarkForm.adjustParentSize();

Thanks in advance.

Andrei · March 14, 2016, 10:42am

Hi

Could you please provide us complete demo including all correspondnig js/css files?
Please also add information regarding current and expected behaviour.

Here is a small guide how to make a complete demo:
docs.dhtmlx.com/tutorials__auxil … pport.html

If you don’t want to share your demo here for any reasons - you can send it to support@dhtmlx.com, if so - please include link to this forum topic.

If you’re using PRO Edition please send your demo to support@dhtmlx.com

eiwai · March 23, 2016, 9:09am

Hi Andrei,

Thank you for your reply. I got it fixed. For other people searching for solution, below is the fixed I do.

I put css class like below.

And add className when initialize form

myRemarkForm = dhxLayout.cells(“a”).attachForm([
{ type: “settings”, labelWidth: 100 },
{
type: “block”, blockOffSet: 0, list: [

                                  { type: "button", name: "SaveRemark", value: "Save", offsetLeft: 0, offsetTop: 0, width: "70" },
                                  { type: "newcolumn", offset: 5 },
                                  { type: "button", name: "CloseRemark", value: "Close", offsetLeft: 0, offsetTop: 0, width: "70" },
                                  { type: "newcolumn", offset: 5 },
                                  { type: "label", label: "<span class='LblMessage' >Max Char (80)</span>" },
                                  { type: "newcolumn", offset: 5 },
                                  { type: "label", label: "", name: "lblMsg" }


                            ]
                        }
                        ,
                         {
                             type: "block", blockOffSet: 0, className: "NoLineBreak", list: [
                            { type: "label", label: "<span class='LabelHeader' >" + mon + "</span>", name: "lblMon" },
                            { type: "input", name: "txtMonRemark", value: "", inputWidth: 150, maxLength: getMaxFieldLengthByName("SCHREMARK") },
                            { type: "newcolumn" },
                            { type: "label", label: "<span class='LabelHeader' >" + tue + "</span>", name: "lblTue" },
                            { type: "input", name: "txtTueRemark", value: "", inputWidth: 150, maxLength: getMaxFieldLengthByName("SCHREMARK") },
                            { type: "newcolumn" },
                            { type: "label", label: "<span class='LabelHeader' >" + wed + "</span>", name: "lblWed" },
                            { type: "input", name: "txtWedRemark", value: "", inputWidth: 150, maxLength: getMaxFieldLengthByName("SCHREMARK") },
                            { type: "newcolumn" },
                            { type: "label", label: "<span class='LabelHeader' >" + thurs + "</span>", name: "lblThurs" },
                            { type: "input", name: "txtThursRemark", value: "", inputWidth: 150, maxLength: getMaxFieldLengthByName("SCHREMARK") },
                            { type: "newcolumn" },
                            { type: "label", label: "<span class='LabelHeader' >" + fri + "</span>", name: "lblFri" },
                            { type: "input", name: "txtFriRemark", value: "", inputWidth: 150, maxLength: getMaxFieldLengthByName("SCHREMARK") },
                            { type: "newcolumn" },
                            { type: "label", label: "<span class='LabelHeader' >" + sat + "</span>", name: "lblSat" },
                            { type: "input", name: "txtSatRemark", value: "", inputWidth: 150, maxLength: getMaxFieldLengthByName("SCHREMARK") },
                            { type: "newcolumn" },
                            { type: "label", label: "<span class='LabelHeader' >" + sun + "</span>", name: "lblSun" },
                            { type: "input", name: "txtSunRemark", value: "", inputWidth: 150, maxLength: getMaxFieldLengthByName("SCHREMARK") }
                             ]
                         }

                  ]);

Thank you.