Aurelia JS-Kendo UI垂直滑块的高度百分比? [英] 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

我基本上想表达的是，垂直滑块应为封闭的div高度的90％；请注意:

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

• 如果没有CSS height:规范，则滑块会达到一定高度，就是这样
• 如果我在px或em中设置CSS height(通过basic-use.css中的div.eqSlider或作为内联style属性)，那么一切都很好
• 但是，如果我将CSS height设置为百分比%(通过basic-use.css中的div.eqSlider或作为内联style属性)，或者设置为calc(90%-10px)或类似内容，则显示完全搞砸了，如下图所示:

• 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:

那么，是否可以将这些滑块的高度设置为封闭的div高度的90％-如果是，怎么办?

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?

推荐答案

好吧，我想我已经解决了-问题在这些情况下是很典型的:默认情况下，divs等没有定义高度，并且根据其内容计算它们的高度.由于示例中的滑块是的内容，没有其他任何其他说明，因此它们的按百分比显示的高度将变为递归或为高度0的百分比.

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.

这就是为什么必须确保从body到封闭的div的整个链的高度定义为％(本质上为100％，但它可能显示滚动条).我以为我在上一个示例中做到了-但是我在.css中犯了一个错误:我使用了.example选择器(用于类)，而我应该使用了#example选择器(用于id)；这样就破坏了嵌套div链的高度计算.

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.

我注意到，一旦我为嵌套链中的每个div分配了边框；然后可以更正，以便它们都具有定义的高度.一旦所有的divs以及周围的divs都具有高度，那么滑块就可以在.css文件中或通过JavaScript的赋值(通过slider.wrapper.css("height", "50%");)获得以百分比为单位的高度

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:

这篇关于Aurelia JS-Kendo UI垂直滑块的高度百分比?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！