md-Menü override default max-Breite im Winkel 2
Ich bin mit Winkel-2 , Eckig-Material, und ich bin bereit zum anzeigen von mehr Daten im md-Menü und, daher, ich muss die max-Breite des md-Menü auf einen höheren Wert. Seine default-Wert ist 280px.
<img src="/assets/images/ic-notifications.png" [mdMenuTriggerFor]="appMenu"/>
<md-menu #appMenu="mdMenu" [overlapTrigger]="false" yPosition="below" xPosition="before" class="notifications-dropdown">
<button md-menu-item >
<div class="row notification-row">
<div>
<span class="image-container"> Option 1 </span>
</div>
</div>
</button>
</md-menu>
In der CSS-Datei, so mache ich das:
.mat-menu-panel.notifications-dropdown {
max-width:none;
width: 100vw;
margin-left: -8px;
margin-top: 24px;
overflow: visible;
}
.notification-row{
width: 424px;
}
In der Konsole, ich kann erkennen, die Klasse, in der der standardmäßige Wert ist: max-width:280px;
, und wenn ich edit es in meine Konsole, es funktioniert perfekt, aber obwohl ich versuche zu überschreiben, es in mein CSS-code, ich bin nicht in der Lage, das zu tun. Ich habe versucht, auch:
.mat-menu-panel{
max-width: 600px;
}
Und so:
.cdk-overlay-container .mat-menu-panel{
max-width:600px;
width: 100vw;
margin-left: -8px;
margin-top: 24px;
}
Wie kann ich diese Standardeinstellung außer Kraft setzen-Wert?
- Haben Sie versucht
!important
oder ein stärkeres Selektor (z.B. auch der Eltern etc)? - Versuchen Sie, die
.mat-menu-panel.notifications-dropdown
Stile zu einem globalen stylesheet anstelle der Komponente styles. Siehe auch dieser Anleitung - Ja, ich habe versucht, es auf diese Weise:
.mat-menu-panel.notifications-dropdown { max-width:600px !important; width: 100vw; margin-left: -8px; margin-top: 24px; overflow: visible; }
- Ich habe es mit <style> tags in meiner index.html. Kein Ergebnis.
- Ja, wenn ich es zu diesem Zeitpunkt nicht in meine index.html mit` <style> tags, aber ich habe es in meiner globalen CSS-Datei, es funktionierte. Ja, das ist die Antwort. Danke, @WillHowell !
Du musst angemeldet sein, um einen Kommentar abzugeben.
Legen Sie die Ansicht Kapselung None auf Ihre Komponente:
Dann in deinem css-Komponente können Sie genau das tun, was Sie versucht:
class
In einigen Fällen, die der wrapper über
.mat-menu-panel
werden kann.cdk-overlay-pane
, in diesem Fall css sollte so etwas wie dieses.Durch die css-Spezifität-Regeln 2 Klassen von Spezifität erforderlich sind, um die Standardeinstellungen außer Kraft setzen.