0

任何想法，如果使用[clrPosition]=bottom-right导致风格

left: 0px; 
right: auto;

如下所示的HTML中对应的 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>

我期待一种风格：

left: auto; 
right: 0px;

那是因为我希望下拉菜单在左侧（自动）有机地增长并固定在包含块的右侧（0px）。（顺便说一句，我确实尝试[clrPosition]=bottom-left过，但它没有导致leftand的变化right。）

clr-dropdown-menu实际上，如果我仔细观察，一些 Clarity CSS 实际上正试图通过手动设置来做正确的事情，left=auto如下right=0图所示，但它被覆盖了，因此最终由于这个问题，我在我的整个应用程序。这是我在这里解决的主要问题。

在此处输入图像描述

你能检查一下这是一个错误还是预期的行为？有没有更好的方法将左右设置为预期值？

由于 Clarity CSS 使用 'style' 属性设置样式时获得了更高的特异性，我什至无法覆盖 left 和 right 以更正值。有没有其他干净的方式我不必更改 Clarity 的 CSS 代码？

4

1 回答 1

2

@baltoro：您是否尝试*clrIfOpen在clr-dropdown-menu? 请参考此 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>

使用*clrIfOpenplnkr 应该避免水平滚动条，因为菜单在未打开时会从 DOM 中删除。

于 2017-09-15T22:49:13.573 回答