Angular Klarheit: Was Verhalten der Einstellung clrPosition nach rechts unten

Jede Idee wird erwartet, dass bei Verwendung von [clrPosition]=bottom-right in den Stil führtAngular Klarheit: Was Verhalten der Einstellung clrPosition nach rechts unten

left: 0px; 
right: auto;

wie unten dargestellt in HTML gegeben für entsprechende Clarity-Angular Code?

Clarity-Angular

<clr-dropdown-menu [clrPosition]="'bottom-right'"> 
. 
. 
. 
</clr-dropdown-menu>

HTML:

<clr-dropdown-menu _ngcontent-c1="" 
     ng-reflect-position="bottom-right" 
     class="dropdown-menu" 
     style="position: absolute; top: 0px; bottom: auto; left: 0px; right: auto; 
     visibility: hidden;> 
    . 
    . 
    . 
</clr-dropdown-menu>

ich einen Stil erwarten:

left: auto; 
right: 0px;

Das ist, weil ich das Drop-Down-wollen organisch wachsen links Handseite (auto) und nach rechts (0px) des umschließenden Blocks fixiert werden. (BTW, habe ich versucht [clrPosition]=bottom-left aber es verursacht keine Änderung left und right.)

Eigentlich, wenn ich genau hinschaut, wird etwas Klarheit CSS tatsächlich versucht, das Richtige für die gleiche clr-dropdown-menu durch manuelles left=auto Einstellung zu tun und right=0 Wie im Bild unten zu sehen ist, aber es wird übersteuert und deswegen habe ich eine horizontale Bildlaufleiste in meiner App. Das ist das Hauptproblem, das ich hier festlege.

Können Sie überprüfen, ob dies ein Fehler oder erwartete Verhalten? Gibt es eine bessere Möglichkeit, links und rechts auf die erwarteten Werte zu setzen?

Ich kann nicht einmal links und rechts korrigieren, um Werte zu korrigieren wegen der höheren Genauigkeit, die von Clarity CSS erworben wurde, da es das Attribut 'style' zum Festlegen der Stile verwendete. Gibt es einen anderen sauberen Weg, an dem ich den CSS-Code von Clarity nicht ändern muss?

Quelle

2017-09-15 baltoro

Clarity verwendet die 'transform: translateX() und translateY()' CSS Regeln für die Positionierung des Dropdowns. Kannst du einen Plunkr mit dem Problem zeigen, das du hast? https://plnkr.co/uNwwZe –

Nicht sicher, ob ich es über plunkr reproduzieren kann. Die Transformationseigenschaft wird angezeigt, wenn auf das Dropdown-Menü geklickt wird. Mein Problem ist da, selbst wenn niemand auf das Dropdown-Menü klickt. Sie können aus meinem HTML-Code sehen, dass die Sichtbarkeit immer noch ausgeblendet ist. Das clr-dropdown-Menü verursacht dieses Problem. – baltoro

@baltoro: Haben Sie versucht, die *clrIfOpen Direktive auf der clr-dropdown-menu zu verwenden? Bitte auf diese Plnkr: https://plnkr.co/edit/PDyoV6iLRgrtgGhzzRjM?p=preview

<clr-dropdown> 
    <button clrDropdownTrigger class="btn"> 
    Dropdown Toggle 
    <clr-icon shape="caret down"></clr-icon> 
    </button> 

    <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right"> 
     <label class="dropdown-header">Dropdown header</label> 
     <a href="javascript://" clrDropdownItem>Action 1</a> 
     <a href="javascript://" clrDropdownItem>Action 2</a> 
     <div class="dropdown-divider"></div> 
     <a href="javascript://" clrDropdownItem>Link 1</a> 
     <a href="javascript://" clrDropdownItem>Link 2</a> 
    </clr-dropdown-menu> 
</clr-dropdown>

die *clrIfOpen plnkr verwenden, sollte die horizontalen Bildlaufleisten vermeiden, weil das Menü aus dem DOM entfernt wird, wenn sie nicht öffnen.

Quelle

2017-09-15 22:49:13 takeradi

Angular Klarheit: Was Verhalten der Einstellung clrPosition nach rechts unten

Antwort

Verwandte Themen