2017-07-23 1 views
1

J'ai un élément de menu dans le coin supérieur droit de mon application web, et le code est ci-dessous. Le problème est, il est large, et au lieu de s'étirer, il suffit d'ajouter une barre de défilement au menu et j'ai essayé un tas de css pour le réparer mais je n'arrive pas à le comprendre.Comment faire pour supprimer Matériel angulaire design Menu Boîte barres de défilement

MISE À JOUR: J'ai ajouté overflow: hidden !important; comme suggéré dans l'une des réponses, et qui a enlevé la barre de défilement, mais maintenant il est pas assez large et je ne peux pas accéder à tous les boutons. Essayé width: 800px !important avec le débordement, mais il n'a pas changé la largeur.

<button md-fab [md-menu-trigger-for]="settings"> 
    <md-icon>settings</md-icon> 
</button> 

<md-menu class="menu-overflow-hidden" x-position="before" #settings="mdMenu"> 
    <div style="display: flex; flex-direction: row; text-align: center"> 
    <div style="flex: 1; padding: 24px"> 
     <label>Left Side</label> 
     <button md-menu-item routerLink=""> Option 1 </button> 
     <button md-menu-item routerLink=""> Option 2 </button> 
    </div> 
    <div style="flex: 1; padding: 24px"> 
     <label>Right Side</label> 
     <button md-menu-item routerLink=""> Option 3 </button> 
     <button md-menu-item routerLink=""> Sign Out </button> 
    </div> 
    </div> 
</md-menu> 

style.css

.menu-overflow-hidden { 
    overflow: hidden !important; 
} 
+0

Vous devriez avoir attaché le CSS aussi. Mais je vais faire un punt à overflow, overflow-x, ou overflow-y. Mais je vois quelque chose qui indique la flexbox aussi. Voir ici un [guide] (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) pour cela. – JGFMK

+0

Oh, le css était juste en ligne, somethign comme '' et je l'ai essayé sur des éléments différents, mais il n » ai pas Je fais quelque chose n'importe où. Je vais vérifier ce guide de flexbox. – Jus10

+0

C'est un super tutoriel! Je l'ai marqué, merci! Malheureusement, je pense que dans ce cas, le problème se pose avant le conteneur flexbox. si j'ajoute une autre div immédiatement après l'élément md-menu, avec une largeur de 500px, il ajoute toujours une barre de défilement, mais maintenant à une zone de 500px. Donc, ça le rend plus large, mais la largeur du menu md semble être fixe, avant même que j'utilise flexbox. – Jus10

Répondre

1

Vous devez ajouter overflow: hidden à .mat-menu du panneau.

<button md-fab [md-menu-trigger-for]="settings"> 
    <md-icon>settings</md-icon> 
</button> 

<md-menu class="menu-overflow-hidden" x-position="before" #settings="mdMenu"> 
    <div style="display: flex; flex-direction: row; text-align: center"> 
    <div style="flex: 1; padding: 24px"> 
     <label>Left Side</label> 
     <button md-menu-item routerLink=""> Option 1 </button> 
     <button md-menu-item routerLink=""> Option 2 </button> 
    </div> 
    <div style="flex: 1; padding: 24px"> 
     <label>Right Side</label> 
     <button md-menu-item routerLink=""> Option 3 </button> 
     <button md-menu-item routerLink=""> Sign Out </button> 
    </div> 
    </div> 
</md-menu> 

Ajouter au fichier CSS principal.

.menu-overflow-hidden { 
    overflow: hidden !important; 
} 

J'ai créé un plunker pour vous montrer comment supprimer la barre de défilement Voir exemple plunker https://plnkr.co/edit/wDPmRi?p=preview

Un problème avec vous enveloppant le menu md-point en deux groupes est qu'il brise le MD- la gestion des événements de clavier de menu qui est utilisée pour la fonctionnalité de tabulation. Vous perdez donc de l'expérience utilisateur.

Pour ce dont vous avez besoin peut-être un popover est une meilleure idée, qui met en œuvre encore le piégeage mise au point. Vous pouvez utiliser ce popover here.

+0

Plunker semble simplement dire « Chargement du matériel angulaire App ... » et obtient beaucoup pour 404 erreurs. Mais je l'ai fait, et il a supprimé la barre de défilement! Wohoo !! Je ne peux pas sembler changer la largeur de la liste déroulante maintenant, donc les boutons sur le côté droit sont coupés, et même avec! Important juste après le débordement: caché, je ne peux toujours pas sembler changer la largeur de celui-là . Merci pour ce btw! – Jus10

+0

J'ai fixé les importations sur le plunker. L'équipe matérielle a déplacé l'emplacement de leur @ angular/cdk. Je vais essayer de changer la largeur maintenant et mettre à jour le plunker. –

+0

Vous devez ajouter 'max-width: none! Important;' vérifier plunker styles.css par exemple. –