2017-09-20 6 views
1

Les bords du tiroir dans la disposition de l'application du composant angulaire avec AngularDart ne dessinent pas tandis que scrolling contenu à material-content, comment puis-je résoudre ce problème? enter image description hereLes bords du tiroir dans la disposition de l'application du composant angulaire avec Angular Dart

app_component.html

<material-drawer persistent #drawer="drawer" [attr.end]="end ? '' : null"> 
<material-list *deferredContent> 
    <div group class="mat-drawer-spacer"></div> 
    <div group> 
     <material-list-item> 
      <material-icon icon="inbox"></material-icon>Inbox 
     </material-list-item> 
     <material-list-item> 
      <material-icon icon="star"></material-icon>Star 
     </material-list-item> 
     <material-list-item> 
      <material-icon icon="send"></material-icon>Sent Mail 
     </material-list-item> 
     <material-list-item> 
      <material-icon icon="drafts"></material-icon>Drafts 
     </material-list-item> 
    </div> 
    <div group> 
     <div label>Tags</div> 
     <material-list-item> 
      <material-icon icon="star"></material-icon>Favorites 
     </material-list-item> 
    </div> 
</material-list> 
</material-drawer> 
<material-content> 
    <header class="material-header shadow"> 
     <div class="material-header-row"> 
      <material-button icon 
         class="material-drawer-button"(trigger)="drawer.toggle()"> 
      <material-icon icon="menu"></material-icon> 
     </material-button> 
     <span class="material-header-title">Simple Layout</span> 
     <div class="material-spacer"></div> 
     <nav class="material-navigation"> 
      <a href="#AppLayout">Link 1</a> 
     </nav> 
     <nav class="material-navigation"> 
      <a href="#AppLayout">Link 2</a> 
     </nav> 
     <nav class="material-navigation"> 
      <a href="#AppLayout">Link 3</a> 
     </nav> 
    </div> 
</header> 
<div class="content-test"> 
    Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri. 
    Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri. 
    Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri. 
    Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri.Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri.Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri. 
    Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri.Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri.Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri. 
    Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri. 
    Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri. 
    Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri.Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri. 
    Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri. 
    Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri. 
    Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri. 
    Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri.Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri.Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri. 
    Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri.Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri.Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri. 
    Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri. 
    Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri. 
    Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri.Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
    legere iriure blandit. Veri iisque accusamus an pri. 
    </div> 
    <div class="controls"> 
     <h3>Options</h3> 
     <material-toggle [(checked)]="end" label="end"> 
     </material-toggle> 
    </div> 
</material-content> 

app_component.dart

import 'package:angular/angular.dart'; 
import 'package:angular_components/angular_components.dart'; 

@Component(
    selector: 'my-app', 
    templateUrl: 'app_component.html', 
    styleUrls: const [ 
    'app_component.css', 
    'package:angular_components/src/components/app_layout/layout.scss.css'], 
    directives: const [ 
     DeferredContentDirective, 
     MaterialButtonComponent, 
     MaterialIconComponent, 
     MaterialPersistentDrawerDirective, 
     MaterialToggleComponent, 
     MaterialListComponent, 
     MaterialListItemComponent, 
    ], 
    providers: const [materialProviders], 
    ) 
class AppComponent { 
    bool end = false; 
} 

Répondre

0

Une façon de résoudre ce problème est en permettant au principal contenu pour faire défiler de manière indépendante comme ceci:

material-content { 
    max-height: 100%; 
    overflow-y: scroll; 
} 

Produit ceci:

enter image description here