Forum | Appery.io

How do I change the height of a collapsible component? I have tried adding a property of height and setting it to 20px but it makes no difference.

To change height of Collapsblock content:

pre.ui-collapsible-content {height:100px;}/pre

To change height of Collapsblock header:

pre.ui-collapsible-heading-toggle {height:100px;}/pre

I have added this to my Swatch B and it doesn't appear to have made any difference to height of the collapsible box

.ui-collapsible-content-b {height:50px;}
.ui-collapsible-heading-toggle-b {height:50px;}

Not sure I understand this
[quote:]
I have added this to my Swatch B [/quote]
You need to add code posted above to CSS asset.

Sorry I'm quite new to CSS and I added it to the Themes sheet. I have now added to CSS file and it works but on every collapsible. How do I get it to change height on just one?

Thus use this CSS

To change height of Collapsblock content:

prediv[name = mobilecollapsblock_1] .ui-collapsible-content {height:60px;}/pre

Where mobilecollapsblock_1 - your Collapsblock name;

To change height of Collapsblock header:
pre
[name = mobilecollapsblockheader_2] .ui-collapsible-heading-toggle {height:60px;}/pre

Where mobilecollapsblockheader_2 - your Collapsblock header name;

Sorry I'm still trying to get this to work. I have a collapsible item called collapseSavings and when I add this line to my CSS file nothing changes?

[name = collapseSavings] .ui-collapsible-heading-toggle {height:20px;}

I've also tried
div[name = collapseSavings] .ui-collapsible-heading-toggle {height:20px;}

I'm also saving the file before checking but still makes no difference. Am I doing this right?

It's important where you add component names.

Note:

To change height of Collapsblock content:
pre
div[name = mobilecollapsblock_1] .ui-collapsible-content {height:60px;}/pre

mobilecollapsblock_1 - it's Collapsblock name http://prntscr.com/3wxpn7/direct
.ui-collapsible-content - it's class of content

To change height of Collapsblock header:

pre

[name = mobilecollapsblockheader_2] .ui-collapsible-heading-toggle {height:60px;}
/pre

mobilecollapsblockheader_2 - it's Collapsblock header name http://prntscr.com/3wxogr/direct
.ui-collapsible-heading-toggle - it's class of header

Please do not change the code, just replace given component names with yours.

This is what I have done, please see screenshot and this has been added as a new line in my CSS file

[name = collapseSavings] .ui-collapsible-heading-toggle {height:20px;}

This line is incorrect

pre[name = collapseSavings] .ui-collapsible-heading-toggle {height:20px;} /pre

As you use header class .ui-collapsible-heading-toggle with Collapseblock (collapseSavings) component.

You should use savingsHeader name instead.

pre[name = savingsHeader ] .ui-collapsible-heading-toggle {height:20px;} /pre