2017-12-21 2 views
0

숨겨진 내용이있는 테이블 행에있는이 드롭 다운 메뉴가 있습니다. Sample image드롭 다운 메뉴 오버플로 자동으로 div로 숨김

통제하지 않아서 나는 ancestor html을 만질 수 없습니다. 이 예가 https://css-tricks.com/popping-hidden-overflow/인데도 div가 여전히 넘치는 div 내에 있습니다.

고정 된 위치로 HTML 끝에이 드롭 다운 콘텐츠를 배치 할 필요없이 어떤 해결책이 있습니까?

id가 'thedropdownmenu'인 드롭 다운 메뉴와 div가 클래스 이름 'dataTables_scrollBody'로 오버플로되어 있습니다. jsfiddle을 확인하십시오.

Code Sample

<div class="dataTables_scroll"> 
     <div class="dataTables_scrollBody" style="position: relative; overflow: auto; width: 100%;"> 
      <table id="myDataTable" class="display no-footer DTTT_selectable dataTable" aria-describedby="myDataTable_info" role="grid" style="width: 1960px;"> 
       <thead> 
       </thead> 
       <tbody> 
       <tr role="row" class="odd"> 
        <td> 
         <div id="756d44c4-21f8-4cb7-bfb2-f3e8803630c1_Ajuntar" data-requiredfields="12" class="tableAction tableActionDropdown tableActionActive" onclick="checkIfChangeWithReasonActionIsActive(this, event)"> 
          <div id="thedropdownmenu" class="dropdown open"> 
          <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"><span id="" class="tableActionOption icon-reject" title="Ajuntar"></span></a> 
          <ul class="dropdown-menu" role="menu"> 
           <li class="dropdown-item"><a class="tableAction" tabindex="-1" href="#" value="5a3a930462168e45246c9da7" data-option="687a2389-abfa-4915-8eec-86ea3b7f0509">Falta DNI</a></li> 
           <li class="dropdown-item"><a class="tableAction" tabindex="-1" href="#" value="5a3a930462168e45246c9da7" data-option="a5d7cd22-34bd-4cc3-9534-d19d5c31f6f0">Faltan Escrituras</a></li> 
           <li class="dropdown-item"><a class="tableAction" tabindex="-1" href="#" value="5a3a930462168e45246c9da7" data-option="23065843-eac4-4a56-964e-c22dc9755fc7">Falta SEPA</a></li> 
          </ul> 
          </div> 
         </div> 
        </td> 
       </tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
+0

[내가 들를 수있는 항목] (http://stackoverflow.com/help/on-topic) 및 [ask] 및 [mcve]를 만드는 방법을 확인하고 싶을 수 있습니다. 시도한 코드와받은 오류를 게시하십시오. 가능한 한 구체적이어야 더 나은 답변으로 이어질 것입니다. 우리는 당신이 무엇을 요구하고 있는지 전혀 모른다. 무엇을하고 싶니, 무슨 일이 일어나고 있습니까 (당신의 말을 사용하십시오)? 어떤 오류가 발생합니까? – happymacarts

+0

드롭 다운을 어디에 표시 하시겠습니까? – happymacarts

+0

@happymacarts 드롭 다운이 정확한 위치에 있는지, 이미지를 확인하십시오. 문제는 조상 div 중 하나가 자동으로 설정된 오버플로가있어서 해당 div 아래에 드롭 다운이 표시되도록하는 것입니다. –

답변

1

I은 ​​고정 된 위치를 사용하는 방법을 참조. html을 다른 장소로 변경하고 싶지 않다면 다른 방법은 없습니다. 예 :

.dropdown-menu{ 
    position: fixed; 
    left: 0; 
    top: 0; 
    right: auto; 
} 

희망이 있습니다.

+0

드롭 다운의 html을 바꿀 수있다. 도움이된다면. 어쨌든 솔루션을 사용해 보겠지만, 왼쪽, 최상위 값을 설정하려면 일부 j가 필요합니다. 맞습니까? –

+0

"다른 곳으로 html 변경"이라고 말하면, 그것을 조상에게 옮기는 것을 의미합니다. –