AppGini Community Forums

Posted: **2020-03-31 09:46**

Hi Jan, I have created my form very easily with your JV file. Two issues I have though, I am unable to add a collapsable panel to one of my tabs (see code below). The fields disappear from the tab and there is no collapsable panel (this is for row_9)

Code: Select all

var row_9 = dv.addLayout([3, 3, 5], "Products > Click to Show/Hide", true)
                .add(1, ["ProductGroup1", "ProductGroup2", "ProductGroup3", "ProductGroup4", "ProductGroup5", "ProductGroup6", "ProductGroup7", "ProductGroup8", "ProductGroup9", "ProductGroup10", "ProductGroup11", "ProductGroup12"])
                .add(2, ["ProductName1", "ProductName2", "ProductName3", "ProductName4", "ProductName5", "ProductName6", "ProductName7", "ProductName8", "ProductName9", "ProductName10", "ProductName11", "ProductName12"])
                .add(3, ["ProductVariant1", "ProductVariant2", "ProductVariant3", "ProductVariant4", "ProductVariant5", "ProductVariant6", "ProductVariant7", "ProductVariant8", "ProductVariant9", "ProductVariant10", "ProductVariant11", "ProductVariant12"])
                .sizeLabels(3);

dv.addTab( "TechnicalDetail-tab", "Technical Detail", "cog")
  .add(row_8)
  .add(row_9)
  .add(row_10);

Also the ProductGroup & ProductName are read only fields, the ProductVariant is a select2. The readonly fields are totally out of sync to the select2 box. I did try and add this

Code: Select all

$j(".form-control-static").css("padding", 0);

but it removed all the tabs and formatting.

thanks for your help

Bryan

Posted: **2020-03-31 12:01**

First of all please configure widths which sum up 12, for example [4,4,4] or [3,3,6], not [3,3,5]. But this will not solve your problem.

The readonly fields are totally out of sync to the select2 box

What do you mean by this? Can you please upload a screenshot. And which theme are you using?

Thanks,
Jan

Posted: **2020-03-31 12:27**

here is a screen shot Jan

: example.png (29.49 KiB) Viewed 5171 times

Posted: **2020-03-31 12:37**

Sorry, I cannot see any tab there.

And are there any errors in console

And can you please temporarily eliminate any other code in your TABLENAME-dv.js which could interfere with the tab-code you have posted.

Posted: **2020-03-31 13:48**

The image shows the fields are not aligned Jan, apologies I thought that was what you requested?

I will post a further image

Posted: **2020-03-31 13:56**

here is another image, let me know if this is what you were looking for, I am going to check the -dv.js file now and will update you.

Posted: **2020-03-31 13:57**

: example2.png (41.17 KiB) Viewed 5165 times

Posted: **2020-03-31 14:45**

OK, I think now I got your question/problem and now I understand what you want to achieve.

Please have a closer look, this is what you have configured:

: POWERPNT_uuYNWRA6vy.png (18.5 KiB) Viewed 5162 times

In each column the controls will be placed top-down. Different controls may have different heights, paddings and margins. So there is a real big chance that controls from the first column are not vertically aligned with controls from the middle or right column. There is definately no guarantee.

I guess this is what you want:

: POWERPNT_II20Rm5vdX.png (20.53 KiB) Viewed 5162 times

The multi-column layout is not a grid- or masonry- or tile-layout.

You should consider using the .inline() function instead or you will have to add a separate layout per field-triplet as shown in the second image above.

I know it may take a couple of minutes to change the code due to the non-normalized table design with many triplets of fields. Maybe it would be better to have a related details table using lookups?!

I Hope I was able to illustrate the problem and the solution.

Best,
Jan

AppGini Community Forums

Add Collapsable Panel to Tab and inline

Add Collapsable Panel to Tab and inline

Re: Add Collapsable Panel to Tab and inline

Re: Add Collapsable Panel to Tab and inline

Re: Add Collapsable Panel to Tab and inline

Re: Add Collapsable Panel to Tab and inline

Re: Add Collapsable Panel to Tab and inline

Re: Add Collapsable Panel to Tab and inline

Re: Add Collapsable Panel to Tab and inline