Angular 2-Komponenten-Tags bricht Layout-Stile

2 Ausgaben plnkr http://plnkr.co/edit/uGSGtK6FtiICc1HbYy5i?p=preview Angular 2-Komponenten-Tags bricht Layout-Stile

margin-left Pausen
flex-grow Pausen

und einige andere Regeln auch aufgrund von Komponenten-Tags.

Stile von anderen Teams zur Verfügung gestellt, sie separat gespeichert und einige von ihnen sind mit media-query verwandt, so kann ich nicht uglyhack mit :host { margin-left: auto; } verwenden. Auch einige Stile (flex-grow e.x.) haben numerische Werte und können nicht einfach auf echte Stile geändert werden.

Wie kann dies gelöst werden, ohne angular-spezifische Stile zu schreiben?

Quelle

2017-02-11 drow

margin-left bewegt sich nicht user nach rechts. wenn Sie es benutzen wollen es dann einen Stil

.header-user { 
    position: absolute; 
    right: 16px; 
    ... 
}

flex Layout funktioniert, wenn Sie einen Stil auf <flex-item> Element verwenden. Ja, eckig erstellt dieses Element innerhalb des Containers, der 1. Kind des Elternteils sein sollte div.

Quelle

2017-02-12 20:57:30

'margin-left bewegt den Benutzer nicht nach rechts' tut es. Fügen Sie einfach 'margin-left: auto' zu' header-user' hinzu und dies wird wie erwartet funktionieren. 'wenn Sie einen Stil auf Element' es kann nicht verwendet werden, so in vielen Fällen, sollten Stile nicht mit einem Framework in Zusammenhang stehen – drow

* 'Benutzer' muss am rechten Rand sein wegen 'margin-left: auto', aber 'Kopfzeile -user-Tag bricht das *, tatsächlich wurde es standardmäßig links relativ zum letzten Element positioniert. Es ist bereits in der Kopfzeile Benutzer hinzugefügt, die entfernt werden sollte. Styles sind nicht mit dem Framework verbunden, sondern beziehen sich auf HTML-Elemente des DOM. –

Angular 2-Komponenten-Tags bricht Layout-Stile

Antwort

Verwandte Themen