각도 상 :이 <code>[clrPosition]=bottom-right</code>를 사용하여 <strong>선명도 - 각도</strong> 코드 대응의 스타일 <strong>HTML</strong>에 아래 그림과 같이</p> <pre><code>left: 0px; right: auto; </code></pre> <p>에 결과 경우 오른쪽 아래

Question

어떤 생각에 clrPosition 설정의 행동을 어떻게 예상합니까?

선명도 - 각도

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

HTML : 나는 드롭 다운 유기적 성장 궁금하기 때문

left: auto; 
right: 0px; 

:

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

내가의 스타일을 기다리고 있었다 왼쪽에 (자동) 오른쪽에 고정 (0px) 블록을 포함하고 있습니다. (, BTW 나는 [clrPosition]=bottom-left을 시도했지만 그것은 left 및 right에 변화가 발생하지 않습니다.)

사실, 내가 자세히 본다면, 일부 선명도 CSS 실제로 수동으로 left=auto 및 right=0을 설정하여 같은 clr-dropdown-menu을 위해 옳은 일을하려고 아래 그림에서 볼 수 있듯이이 문제로 인해 오버라이드되어 결국 전체 앱에 가로 스크롤 막대가 생깁니다. 이것이 제가 여기서 고쳐야 할 주요한 문제입니다.

당신은 확인 할 수있는 경우에이 버그의 예상되는 동작? 왼쪽과 오른쪽을 예상 값으로 설정하는 더 좋은 방법이 있습니까?

스타일을 설정하기 위해 '스타일'속성을 사용함에 따라 Clarity CSS에서 얻은 높은 특이성으로 인해 값을 수정하기 위해 왼쪽 및 오른쪽을 재정의 할 수도 없습니다. Clarity의 CSS 코드를 변경할 필요가없는 깨끗한 방법이 있습니까?

Answer 1

@baltoro : clr-dropdown-menu에 *clrIfOpen 지시어를 사용해 보셨습니까? 이 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> 

때 열리지 메뉴는 DOM에서 제거되기 때문에 수평 스크롤을 방지해야 *clrIfOpen plnkr 사용.