Бутстрап липкий верх в ряду - PullRequest
Новая
       18

Бутстрап липкий верх в ряду

0 голосов
/ 08 марта 2019

Привет. Я хочу прикрепить div к верхней части экрана, когда позиция прокрутки перемещается ниже.

Пример, который я видел, не работает. В частности 

  <div class="row sticky-top" *ngIf="selectedItems.length > 0">
                    <div class="col"></div>
                        <app-tree-view-selection-component class="item-padding" *ngFor="let item of selectedItems"
                            id="{{item.id}}" type="{{item.type}}" backgroundColor="{{item.backgroundColor}}" displayValue="{{item.displayValue}}"
                            (click)="removeItem($event)"></app-tree-view-selection-component>
                    </div>
                </div>

В контексте 

{{selectedItems | json}}
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <section class="widget" widget>
                <header>
                    <h4>Tree View </h4>

                    <div class="widget-controls">
                        <h4><small>from:</small> {{this.settingsService.dataSetFromDate | date: 'dd/MM/yyyy' }}
                            <small>to:</small> {{this.settingsService.dataSetToDate | date: 'dd/MM/yyyy' }} &nbsp;&nbsp;
                            <i class="fas fa-sync-alt fa-spin fa-lg session-loading" *ngIf="!loaded"
                                style="font-size:20px; color:silver;"></i></h4>

                    </div>
                </header>
                <div class="widget-body">
                    <div class="row">
                        <div class="col-2"> Enter search text:</div>
                        <div class="col-4"> <input type="text" class="form-control" [(ngModel)]="no" /> </div>
                        <div class="col-2"> <button class="btn btn-success btn-lg"
                                (click)="filter()">Filter</button>&nbsp;&nbsp;
                            <button class="btn btn-success btn-lg" (click)="reset()">Reset</button></div>
                        <div class="col-2"><button class="btn btn-success btn-lg"
                                (click)="fetch()">Fetch</button>&nbsp;&nbsp;</div>
                    </div>
                    <div class="row">
                        <div class="col-1">
                            <small>options</small>
                        </div>
                        <div class="col-2">Show<input type="checkbox" [(ngModel)]="isEnrolment"></div>
                        <div class="col-2">Select Mode<input type="checkbox" [(ngModel)]="selectMode"></div>
                        <div class="col-2"></div>
                        <div class="col-4"><span><span>Resize visualization: {{height}}px</span>
                                <p-slider [(ngModel)]="newHeight" [min]="150" [max]="15000"
                                    (onChange)="handleChange($event)"></p-slider>
                            </span></div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <hr />
                        </div>
                    </div>
                    <div class="row sticky-top" *ngIf="selectedItems.length > 0">
                        <div class="col">
                            <app-tree-view-selection-component class="item-padding" *ngFor="let item of selectedItems"
                                id="{{item.id}}" type="{{item.type}}" backgroundColor="{{item.backgroundColor}}"
                                displayValue="{{item.displayValue}}" (click)="removeItem($event)">
                            </app-tree-view-selection-component>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div #chart id="chart" [style.height.px]="height"></div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

"bootstrap": "^ 4.1.3",

Здесь - простая скрипка, демонстрирующая проблему.

Любая помощь будет высоко ценится!

...