How to set variable height for components

Suite and Optimus Suite 5
#1

Hi,

I’m using dhtmlx v2.5 build 91111 in Chrome.

When using MultiMode = false, heights of each accordion component will automatically adjust to the maximum size possible which is fine.

When using MultiMode = true, the components will have a height which I set with setHeight(x). If iI don’t set the height, the default height will be 90. The result is that the height of the parent frame is larger than the sum of component minimun heights. I want one or more components to adjust so the full height of the parent frame is used.

I might be able to explain better by using following example:
dhtmlx.com/docs/products/dht … eight.html

In v2.5, LoadJSon isn’t included so I wonder if one’s able to use "" to set height or another way to get the same effect as in the example. It would be nice if I could set height = " or something alike.

Thanks in advance.

#2

Hi

sorry not sure I understand you correctly. all functionality we have respresented with demos.

#3

Hi
If i understant you right, you need to do the next:

dhxAccord = new dhtmlXAccordion("accordObj"); dhxAccord.enableMultiMode(); dhxAccord.addItem("a1", "Main Page"); dhxAccord.addItem("a2", "Site Navigation"); dhxAccord.addItem("a3", "Support & Feedback"); dhxAccord.addItem("a4", "Comments"); dhxAccord.cells("a1").setHeight('*'); dhxAccord.cells("a2").setHeight('*'); dhxAccord.cells("a3").setHeight('*'); dhxAccord.cells("a4").setHeight('*');

Result:

#4

Hi Andrei, Darya, thank you for your responses.

Like Daray’s example, 'd like to use it “*” but it doesn’t seem to work …

Here’s my example code:

[code]

<div id="parentId" style="position:absolute; width:1200px; height:800px;"></div>
<div id="a1_1" style="width:100%;height:100%;overflow:auto;">Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/></div>
<div id="a2_1" style="width:100%;height:100%;overflow:auto;">Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/></div>
<div id="a3_1" style="width:100%;height:100%;overflow:auto;">Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/></div>
<div id="a4_1" style="width:100%;height:100%;overflow:auto;">Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/></div>
[/code]

This code results as follows in Chrom (and IE9):

Test.png1680×923 9.29 KB

You see, I set the main div (left frame) to 800px, yet all 4 children have a height of 90px, when using “*” … :frowning:

#5

Locally your code works.
We need your completed demo to test it.
docs.dhtmlx.com/doku.php?id=othe … leted_demo

#6

When you said my code works, it should work :stuck_out_tongue: … so I removed all my css files … result height still 90 … then I went to search in the dhtmlx js files.

In dhtmxaccordion.js , there exists the line “this.itemH = 90;”, which is the source of my troubles … when I change 90 to another number the individual elements do change …

As I said, this is v2.5 build 91111 . I don’t know if this version supports using ‘*’ or another way (quick fix in js?) to have a variable height … yet if there is, please let me know :slight_smile:

Maybe the best option is to just upgrade to v3.5 … ?

I didn’t create a complete demo because I don’t think it’s still necessary but I’d be glad to provide if you still think so.

Thanks again for advice.

#7

Sorry, while I was checking, forgot to consider that you use 2.5. I checked in 3.5…
Yes, i recommend you to upgrade :slight_smile: