Form in layout cell doing an unwanted resize

Forms attached to a cell in a layout resize whenever the cell is:

  1. Expanded after a collapse
    OR 2. A new view is shown (showView) for the cell.

In this case the form definition tarts with:
{type: “settings”, position: “label-left”, labelWidth: 120, labelAlign: “right”, inputWidth: 500},

The form displays correctly if no collapse/expand or change of view is performed.

After an expand or change of view for the cell the form width and its fields becomes wider than the width of the cell and the label alignment is no longer correct. It’s like the form has forgotten those settings.

The item widths can be returned to 500 using foreachItem and then setItemWidth. But this is not a good work-around label alignments can’t be restored and it requires the code to know about the form settings - in this case I’m loading the form strusture from a json file.

Any ideas?

Can’t reproduce locally
Please, attach completed demo to test it … pport.html

Hi Darya,
Thanks for looking at this. I’m just a fraction busy to package up a support demo atm as it’s linked into an online data base.

I did manage a work-around for the time by:
i. Attaching a tabbar to the layout cell
ii. Attaching the form to the tabbar
iii. Hiding/showing the tabbar .hide() and show() methods of tabs

And the collapse of the layout cell no longer affects the form sizing.

When I get some spare time I’ll package up a support demo as having the form directly in the layout cell would be preferred.

Happy that you found the solution. We will wait for a demo to inspect the issue when you have a time for it. Thanx

Here’s the application.

index.html shows the forms as expected.

test1.html does not show the forms as expected. (1.26 MB)

If you use “myform1” and “myform2” view names, you need to call than names, not “form1” and “form2”
Plus your “def” view is empty cell, because when you call showView() - you switch to this view. And “myform1” will be ‘the second one’, not default (you fill it when call)

The “def” view is blank intentionally as I don’t want to show any form until a row in the grid has been selected.

myform1 and myform2 are the names for the javascript variables that refer to the two different form objects attached to the layout cell in the two views called “form1” and “form2”.

Why would the names for the form objects have anything to do with the names given to the views? Can’t the views be called anything - e.g. “view1” and “view2”? As I understood it from the documentation, to create a different view you first show that view…
and then attach forms/menus/toolbars/ribbons that need to appear in that view.

I want view “def” to be blank - that’s the view I’ll show until a row in the grid is selected.
I want view “form1” to show myform1 - that’s the view that is called by the grid onRowSelect event.
I want view “form2” to show myform2 -that view is shown on demand

That’s basically happening apart from this uncontrolled resizing of the form input field.


actually both your demos almost correct, please try attached index_new.html
put it next to index.html and test1.html into your demo. my comments inside started with ‘>>’ (1.94 KB)

Thank you Andrei.

That’s excellent. :smiley: