Расположение: фиксированное текстовое поле слева с прокручиваемыми картами MDL справа - PullRequest
Новая
       12

Расположение: фиксированное текстовое поле слева с прокручиваемыми картами MDL справа

0 голосов
/ 27 сентября 2018

У меня возникла проблема с исправлением текста на двух моих страницах.У меня есть поле слева с небольшим текстом и две карты MDL справа, содержащие диалоги.

Моя проблема в том, что, как только я поместил в текст термин фиксированной позиции, мой тексткарты перекрывают его и выравнивают влево.Я пытался сдержать их, но это не помогло, может быть, я что-то сделал неправильно.

Мне нравится, как это выглядит сейчас, но я хотел бы, чтобы карты MDL прокручивались независимо.,Опять же, возможно, это простое исправление, и я что-то упустил, но вот что у меня есть: 

 <div class="mdl-layout__content">

        <main>

          <div class="boxed-1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lectus. Phasellus maximus, ex nec bibendum volutpat, justo erat pellentesque massa, vel malesuada sem lectus tincidunt orci. Aenean eleifend est sit amet dapibus ullamcorper.
            Nam ornare finibus ex vitae interdum. Sed quis purus eros. Sed ut porttitor dolor, eget ultrices justo. Sed eu leo porta, mattis libero eu, sagittis metus. Vivamus nec lobortis nisi. Suspendisse posuere enim arcu, at interdum dui congue vitae.
            Aliquam vestibulum accumsan magna. Vivamus a arcu nunc. Cras euismod lacinia augue sed elementum. Phasellus dignissim semper mi at sollicitudin. Vivamus maximus semper nulla. Donec luctus, dolor non viverra aliquam, enim arcu imperdiet sem,
            et pretium dui ante ac lectus.
          </div>

          <div class="cards">


            <div class="demo-card-wide mdl-card mdl-shadow--2dp">
              <div class="mdl-card__title">
                <h2 class="mdl-card__title-text"></h2>
              </div>
              <div class="mdl-card__supporting-text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
              </div>
              <div class="mdl-card__actions mdl-card--border">
                  <button class="mdl-button mdl-button--raised mdl-js-button dialog-button">View Product</button>

                  <dialog id="dialog" class="mdl-dialog">
                      <h3 class="mdl-dialog__title">Product 1</h3>
                      <div class="mdl-dialog__content">
                        <p>
                          This is an example of the Material Design Lite dialog component.
                          Please use responsibly.
                        </p>
                      </div>
                      <div class="mdl-dialog__actions">
                        <button type="button" class="mdl-button">Close</button>

                      </div>
                    </dialog>
           </div>

              <div class="mdl-card__menu">
                <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="material-icons">share</i>
    </button>
              </div>
            </div>

            <div class="demo-card-wide mdl-card mdl-shadow--2dp">
              <div class="mdl-card__title">
                <h2 class="mdl-card__title-text"></h2>
              </div>
              <div class="mdl-card__supporting-text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
              </div>
              <div class="mdl-card__actions mdl-card--border">
                  <button class="mdl-button mdl-button--raised mdl-js-button dialog-button-1">View Product</button>

                  <dialog id="dialog-1" class="mdl-dialog">
                      <h3 class="mdl-dialog__title">Product 2</h3>
                      <div class="mdl-dialog__content">
                        <p>
                          This is an example of the Material Design Lite dialog component.
                          Please use responsibly.
                        </p>
                      </div>
                      <div class="mdl-dialog__actions">
                        <button type="button" class="mdl-button">Close</button>

                      </div>
                    </dialog>

              </div>
              <div class="mdl-card__menu">
                <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="material-icons">share</i>
    </button>
              </div>
              <div class="mdl-card__menu">
                <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="material-icons">share</i>
    </button>
              </div>
            </div>
          </div>
        </div>
      </div>

        </main>

CSS: 

 .boxed-1{
      width: 40%;
      height: auto; 
      text-align: justify;
      display: flex;
      /* position: fixed; */
      vertical-align: center;
      padding: 15px;
      margin: 20px;
      background-color: #fff;
      font-family: 'Courier New', Courier, monospace;
    }

    .mdl-layout__content main {
    display: flex;
    align-items: right;
    }

     .demo-card-wide.mdl-card {
      width: 100%;
      /* margin-left: 90%; */
      font-family: 'Courier New', Courier, monospace;
      /* position: relative; */
    }

    .demo-card-wide > .mdl-card__title {
      color: #cccccc;
      height: 430px;
      background: url('images/placeholder.jpg') 0px;

    }

    .demo-card-wide > .mdl-card__menu {
      color: #fff;
    }

1 Ответ

0 голосов
/ 27 сентября 2018

Ваши элементы .boxed-1 и .cards удерживают пространство для левой и правой частей вашей гибкой компоновки, поэтому изменение .boxed-1 на position: fixed нарушает компоновку.Простое исправление без чрезмерного изменения вашего текущего подхода состояло бы в том, чтобы обернуть ваш текст в другой div и установить его в position: fixed, поэтому .boxed-1 по-прежнему удерживает желаемое пространство в вашей гибкой компоновке, а новый div предотвращаеттекст из прокрутки.Вам понадобится дополнительный CSS, чтобы новый div не перекрывал другие элементы.

Пример HTML: 

<main>
  <div class="boxed-1">
    <div class="fixed">
      Lorem ipsum...
    </div>
  </div>
  <div class="cards">
    <!-- cards html -->
  </div>
</main>

Пример CSS: 

main {
  display: flex;
}

.boxed-1 {
  width: 30vw;
  background-color: #fff;
  font-family: 'Courier New', Courier, monospace;
  text-align: justify;
}

.cards {
  width: 70vw;
}

.fixed {
  position: fixed;
  top: 20px;
  left: 20px;
  width: calc(30vw - 40px);
}
...