Add Collapsable Panel to Tab and inline

This sub-forum is for discussing all topics related to AppGini Helper JavaScript Library, provided by bizzworxx as a third-party AppGini plugin.
Post Reply
bescott53

Add Collapsable Panel to Tab and inline

Post by bescott53 » 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

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Add Collapsable Panel to Tab and inline

Post by jsetzer » 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
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

bescott53

Re: Add Collapsable Panel to Tab and inline

Post by bescott53 » 2020-03-31 12:27

here is a screen shot Jan
example.png
example.png (29.49 KiB) Viewed 2601 times

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Add Collapsable Panel to Tab and inline

Post by jsetzer » 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.
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

bescott53

Re: Add Collapsable Panel to Tab and inline

Post by bescott53 » 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

bescott53

Re: Add Collapsable Panel to Tab and inline

Post by bescott53 » 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.

bescott53

Re: Add Collapsable Panel to Tab and inline

Post by bescott53 » 2020-03-31 13:57

example2.png
example2.png (41.17 KiB) Viewed 2595 times

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Add Collapsable Panel to Tab and inline

Post by jsetzer » 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
POWERPNT_uuYNWRA6vy.png (18.5 KiB) Viewed 2592 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
POWERPNT_II20Rm5vdX.png (20.53 KiB) Viewed 2592 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
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

Post Reply