Как вкладывать * положение: липкое * внутри mat-extension-panel => css grid - PullRequest
Новая
       4

Как вкладывать * положение: липкое * внутри mat-extension-panel => css grid

0 голосов
/ 03 января 2019

Внутри гармошки у меня есть сетка с 2 столбцами (действительно больше, но для простоты здесь), оба переменной длины (создатель динамических форм). В левом столбце у меня есть несколько кнопок, которые я хочу оставить на экране при прокрутке вниз по правому столбцу. Сетка css или панели расширения противоречат липким? Я пытался найти скрытие переполнения, когда я читал, что вы не можете этого сделать, но я не нашел этого. Ты видишь, чего мне не хватает и почему моя липкая не остается?

.html 

...
<mat-expansion-panel>
   <mat-expansion-panel-header>
        Header
   </mat-expansion-panel-header>
   <div class="grid">
        <div id="left">
           <div class=sticky>
              stay on screen
           </div>
        </div>
        <div id="right">
              some other really long content
        </div>                      
    </div>
    </mat-expansion-panel>
</mat-accordion>
...

.css 

.sticky {
    position: sticky;
    top:0;
}

.grid {
    display: grid;
    grid-template-columns: 2fr 8fr;
}

1 Ответ

0 голосов
/ 08 апреля 2019

<mat-expansion-panel> переполнен: скрыт ;Вы можете зафиксировать положение закрепления, удалив его, например так: 

.mat-expansion-panel {
 overflow: inherit !important;
}

Но это приведет к пустому пространству после панели, если любая панель будет свернута.Подробнее об этой проблеме css: https://github.com/w3c/csswg-drafts/issues/865

...