Clarté angulaire: Quel est le comportement attendu de la mise en clrPosition en bas à droite

Toute idée si vous utilisez [clrPosition]=bottom-right a donné lieu dans le styleClarté angulaire: Quel est le comportement attendu de la mise en clrPosition en bas à droite

left: 0px; 
right: auto;

comme indiqué ci-dessous dans HTML pour correspondre Code Clarté-angulaire?

Clarté-angulaire

<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>

Je me attendais à un style de:

left: auto; 
right: 0px;

C'est parce que je veux le menu déroulant pour une croissance organique Sur la gauche côté main (auto) et être fixé vers la droite (0px) du bloc contenant. (BTW, j'ai essayé [clrPosition]=bottom-left mais il a causé aucun changement à left et right.)

En fait, si je regarde de près, certains CSS Clarity est en train d'essayer de faire la bonne chose pour le même clr-dropdown-menu en réglant manuellement left=auto et right=0 Comme le montre l'image ci-dessous, mais il devient dérouté et donc finalement à cause de ce problème, je reçois une barre de défilement horizontale dans toute mon application. C'est le principal problème que je suis en train de régler ici.

Pouvez-vous vérifier si ce un bug ou le comportement attendu? Existe-t-il un meilleur moyen de définir la gauche et la droite aux valeurs attendues?

Je ne peux même pas remplacer la gauche et la droite pour corriger les valeurs en raison de la plus grande spécificité acquise par Clarity CSS car elle utilisait l'attribut 'style' pour définir les styles. Existe-t-il un autre moyen de ne pas modifier le code CSS de Clarity?

Source

2017-09-15 baltoro

Clarity utilise les règles CSS 'transform: translateX() et translateY()' pour le positionnement de la liste déroulante. Pouvez-vous montrer un plunkr avec le problème que vous rencontrez? https://plnkr.co/uNwwZe –

Je ne sais pas si je peux le reproduire via plunkr. La propriété Transformer apparaît lorsqu'un clic sur la liste déroulante se produit. Mon problème est là même si personne ne clique sur la liste déroulante. Vous pouvez voir à partir de mon code HTML que la visibilité est toujours cachée. Néanmoins, le menu clr-dropdown provoque ce problème. – baltoro

@baltoro: Avez-vous essayé d'utiliser la directive *clrIfOpen sur le clr-dropdown-menu? S'il vous plaît se référer à cette 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>

Utilisation du *clrIfOpen plnkr devrait éviter les barres de défilement horizontales car le menu est retiré du DOM lorsqu'ils ne sont pas ouverts.

Source

2017-09-15 22:49:13 takeradi

Clarté angulaire: Quel est le comportement attendu de la mise en clrPosition en bas à droite

Répondre

Questions connexes