Aurelia JS - Kendo UI вертикальные слайдеры с высотой в процентах?

Question

я взял версию кода, размещенных на Aurelia JS - iterate through children (kendo UI) elements? и ее немного модифицировал, здесь:

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

Я в основном хотел бы выразить, что вертикальные ползунки должны быть 90% от высота прилагаемого div; обратите внимание, что:

• Если нет CSS height: спецификации, ползунки получить некоторую высоту, и это его
• Если я устанавливаю CSS height (либо через div.eqSlider в basic-use.css, или как встроенный style атрибут) в любом px или em, то все прекрасно
• Но, если я установить CSS height в процентах % (через div.eqSlider в basic-use.css, или в качестве встраиваемого style атрибута), или calc(90%-10px) или аналогичный - то дисплей полностью перепутались, как показано на изображении ниже:

Таким образом, это как-то можно установить высоту этих ползунков до 90% от высоты прилагается div - и если да, то как?

Answer 1

ОК, я думаю, что я исправил его - проблема была такой же типичной в этих случаях: по умолчанию divs и т. Д. Не имеют определенной высоты, а их высота вычисляется на основе их содержимого. Так как ползунки в примере составляют содержание без каких-либо других дополнительных указаний, их высота в процентах тогда либо становится рекурсивной, либо составляет процент от высоты 0.

Вот почему тогда необходимо обеспечить, чтобы вся цепочка из body к прилагаемому div имеют высоту, определенную в% (по существу, 100%, за исключением того, что она может показывать полосу прокрутки). И я думал, что сделал это в предыдущем примере, но я ошибся в .css: я использовал селектор .example (для класса), тогда как я должен был использовать #example селектор (для id); и это нарушило расчет высоты цепи вложенных div.

Я заметил, что как только я назначил границы для каждого div в вложенной цепочке; и затем может исправить, чтобы все они определили высоту. После того, как все divs - и, следовательно, вложенные - имеют высоту, то ползунки могут получить высоту в процентах, либо в .css-файле, либо путем назначения из JavaScript (через slider.wrapper.css("height", "50%");)

Итак, исправленный код теперь на:

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

... и выход выглядит так, как ожидалось: