Предотвратить зависание от изменения высоты ссылки - PullRequest
Новая
       31

Предотвратить зависание от изменения высоты ссылки

0 голосов
/ 05 декабря 2018

Используя Angular, Angular Material и Angular Flex-Layout, я создал группу ссылок, стилизованных под карты или плитки.Когда ссылки не отображаются, отображаются значок и заголовок ссылки.При наведении курсора значок и заголовок больше не отображаются и заменяются информационным текстом.

Для элементов с большим количеством информационного текста это изменение состояния приводит к увеличению высоты элементов.

Я могу исправить это путем жесткого кодирования min-height с помощьюпиксели.Однако, если я попытаюсь использовать проценты, например 110%, размер ссылок не изменится.То же самое верно для div, окружающего ссылки с именем .container.

Вот выдержка: 

<div class="container" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">

  <a mat-flat-button color="primary" fxFlex href="https://example.com/footprints">
    <div class="hoverOff"><fa-icon [icon]="faToolbox"></fa-icon>Broken</div>
    <div class="hoverOn">Is your request causing an impact to a business-critical function, which is impacting daily production?</div>
  </a>

  <a mat-flat-button color="primary" fxFlex href="https://example.com/divisions/dev/Lists/Requests/NewForm.aspx?isProject=Yes">
    <div class="hoverOff"><fa-icon [icon]="faPuzzlePiece"></fa-icon>Project</div>
    <div class="hoverOn">Is your request a new product or service?<br>
      Requires and RFI or RFP?<br>
      Requires more than 500 or more internal resource hours<br>
      Necessitates a cost greater then $100,000?<br>
      New banking center or remodel?<br>
      New Partnership, divestiture or branch closure?
    </div>
  </a>

</div>

<style>
.mat-flat-button {
    white-space: normal;
    line-height: normal;
}

a {
    color: white !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

fa-icon {
    display: block;
    font-size: 75px;
}

.mat-primary {
    background-color: #00539B !important;
}

a .hoverOn {
    display: none;
}

a:hover .hoverOn {
    display: block;
}

a:hover .hoverOff {
    display: none;
}
</style>

Я создал пример этого в StackBlitz.

Как я могу разрешить это изменение высоты без жесткого кодирования для пикселей?

Ответы [ 2 ]

0 голосов
/ 05 декабря 2018

Если вы хотите настроить css ссылок, вы можете добавить что-то вроде этого к a css: 

 max-height:60vh; (or use percentage instead of vh, but set a max-height)   
 overflow-y:auto;
 overflow-x:hidden;

Надеюсь, это поможет.

Пример (Я установил для вас размер иконки 35pt)

0 голосов
/ 05 декабря 2018

Добавление следующего в ваш CSS предотвратит изменение высоты при прокрутке, при использовании 45% высоты области просмотра vh

.container{
  height:45vh
}

Также использование следующего расширит контейнер на 10% за пределыvh на общую сумму 110% 

.container{
  height:110vh
}

Stackblitz

https://stackblitz.com/edit/angular-w1exhe?embed=1&file=src/app/app.component.css

...