Угловая четкость: ожидаемое поведение при установке clrPosition в нижний правый угол

Любая идея использования [clrPosition]=bottom-right привела к созданию стиля

left: 0px; 
right: auto;

как показано ниже в HTML для соответствующего кода Clarity-Angular?

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;

Это потому, что я хочу, чтобы раскрывающийся список естественным образом увеличивался с левой стороны (автоматически) и был зафиксирован справа (0 пикселей) от содержащего блока. (Кстати, я попробовал [clrPosition]=bottom-left, но это не повлияло на left и right.)

На самом деле, если я внимательно присмотрюсь, какой-то CSS Clarity на самом деле пытается сделать правильные вещи для того же clr-dropdown-menu, вручную устанавливая left=auto и right=0, как показано на рисунке ниже, но его переопределение и, следовательно, в конечном итоге из-за этой проблемы я получаю горизонтальную прокрутку bar во всем моем приложении. Это основная проблема, которую я здесь исправляю.

введите описание изображения здесь

Можете ли вы проверить, является ли это ошибкой или ожидаемым поведением? Есть ли лучший способ установить ожидаемые значения для левых и правых сторон?

Я даже не могу переопределить left и right для исправления значений из-за большей специфичности, полученной Clarity CSS, поскольку он использовал атрибут style для установки стилей. Есть ли другой чистый способ, при котором мне не нужно менять CSS-код Clarity?


angular vmware-clarity clarity
person Usman    schedule 15.09.2017    source источник
comment
Clarity использует transform: translateX() and translateY() правила CSS для размещения раскрывающегося списка. Можете ли вы показать плункру с проблемой, которая у вас возникла? plnkr.co/uNwwZe   -  person Jeremy Wilken    schedule 15.09.2017
comment
Не уверен, что смогу воспроизвести его через plunkr. Свойство преобразования появляется при нажатии раскрывающегося списка. Моя проблема здесь, даже если никто никогда не нажимает на раскрывающийся список. Вы можете видеть из моего html, что видимость все еще скрыта. Тем не менее, clr-dropdown-menu вызывает эту проблему.   -  person Usman    schedule 16.09.2017

Ответы (1)


arrow_upward
2
arrow_downward

@baltoro: Вы пробовали использовать директиву *clrIfOpen на clr-dropdown-menu? См. Этот Plnkr: https://plnkr.co/edit/PDyoV6iLRgrtgGhzzRjM? / а>

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

При использовании *clrIfOpen plnkr следует избегать горизонтальных полос прокрутки, потому что меню удаляется из DOM, когда оно не открыто.

person takeradi    schedule 15.09.2017