Aurelia JS - Kendo UI vertical sliders with height in percent?

问题

I've taken a version of the code posted on Aurelia JS - iterate through children (kendo UI) elements? and modified it slightly, here:

• https://gist.run/?id=323de53223d2ec872f17361378639556

I would basically like to express that the vertical sliders should be 90% of the height of the enclosing div; note that:

• If there is no CSS height: specification, the sliders get some height, and that is it
• If I set the CSS height (either via div.eqSlider in basic-use.css, or as an inline style attribute) in either px or em, then all is fine
• But, if I set the CSS height in percent % (either via div.eqSlider in basic-use.css, or as an inline style attribute), or to calc(90%-10px) or similar - then the display is completely messed up, as shown on the image below:

So, is it somehow possible to set the height of these sliders to 90% of the height of the enclosing div - and if so, how?

回答1:

Ok, I think I fixed it - the problem was as is typical in these cases: by default, divs and such don't have a height defined, and their height gets computed based on their contents. Since the sliders in the example are the content, without any other further specification, their height in procent then either becomes recursive, or is percentage of height 0.

Which is why then one must ensure that the entire chain from body to the enclosing div have a height defined in % (in essence, 100%, except it may show scrollbar). And I thought I had done that in the previous example - but I made a mistake in the .css: I used a .example selector (for a class), whereas I should have used #example selector (for an id); and that broke the height calculation of the chain of nested divs.

I noticed that once I assigned borders to each and every div in the nested chain; and then could correct so they all have defined height. Once all of the divs - and thus the enclosing one - have a height, then the sliders can get a height in percent, either in the .css file, or by assignment from JavaScript (via slider.wrapper.css("height", "50%");)

And so, the corrected code is now on:

• https://gist.run/?id=fcfc066733ad903fa0575388a1637e4f

... and the output looks as expected:

来源：https://stackoverflow.com/questions/42346425/aurelia-js-kendo-ui-vertical-sliders-with-height-in-percent