React & Bootstrap - Наложение столбцов одного брата в зависимости от высоты первого брата - PullRequest
Новая
       71

React & Bootstrap - Наложение столбцов одного брата в зависимости от высоты первого брата

0 голосов
/ 29 февраля 2020

Я пытаюсь наложить две родственные колонки. Наложение зависит от высоты первого брата (.block-overlay-part-1).

Насколько я знаю, я не могу сделать это чисто с CSS. Итак, я возвращаюсь к jQuery. Поскольку это React, с которой я работаю, я помещаю свой jQuery код в componentDidMount()

Проблема

Код ниже работает только, например, в 50% случаев. Те времена не работают, результаты не перекрываются и ломают дизайн. Другими словами, иногда он запускается / работает, иногда нет.

Текущий подход

Мой jQuery logi c:

Перекрытие 25% будет быть установленным как "установить отрицательное поле-дно на высоту брата * 0,25"

$(this).css("margin-bottom", -(parentHeight * _this.block.design.textMarginBottom));

Это помещается в пределах $(document).ready() и setTimeout() одной секунды. Но безуспешно. 

  componentDidMount() {

    let _this = this.props;

    $(document).ready(function () { // when DOM is ready
      setTimeout(function () {// my approach is to timeout 1 sec to load page

        let $targetGroup = $("#" + _this.block.design.id);

        $targetGroup.each(function () {

          let parentHeight = $(this).find(".block-overlay-part-1").height();

          $(this).find(".block-overlay-part-2-bottom, .block-overlay-part-2-top").each(function () {


            if (_this.block.design.textAlignTop) {
              $(this).css("margin-bottom", -(parentHeight * _this.block.design.textMarginBottom));
            } else {
              $(this).css("margin-top", -(parentHeight * _this.block.design.textMarginBottom));
            }

          });

        });

      }, 1); 
    });

  }

Bootstrap имеет вид:

  • Col - родитель с пользовательским идентификатором
    • Row
    • Col - Класс: .block-overlay-part-1
    • Col - Класс: .block-overlay-part-2 (+ -дно или-сверху)

вопрос

Что я должен исправить в своем коде / подходе. Или есть (другой) лучший способ?

...