2014-07-22 12 views
1

SmartClient ListGrid와 Twitter Bootstrap 다중 선택이 공존하는 응용 프로그램이 있습니다. 불행히도, multiselect가 떨어지면 ListGrid가 겹치기 때문에 잘라내집니다. 문제는 ListGrid에서 div 태그가 오버플로되는 것을 허용하지 않는 것으로 보입니다.Isomorphic (SmartClient) ListGrid가 Div 태그가 오버플로를 허용하지 않음 (Twitter Bootstrap의 다중 선택과 충돌 함)

문서를 파헤 치면서 다양한 설정으로 재생했지만이 동작을 변경하는 방법을 알 수 없었습니다. 어떤 아이디어?

아래 코드 스 니펫은 일반적인 div 태그의 문제점을 보여줍니다. 샘플 div 태그가 ListGrid 위에 있어야합니다. 이 위젯 생성 DOM 요소에 매우 높은 Z- 색인 값을 설정 SmartClient를

<html> 
    <head> 
    <style> 
     .my-style { 
      overflow: visible; 
      border: 1px solid black; 
     } 
    </style> 
    <!--Deleted: jQuery & Isomorphic includes --> 
    <script> 
     $(document).ready(function() { 
      isc.ListGrid.create({ 
       top:0, left:100, 
       fields: [ {name:'X'}, {name:'Y'} ], 
       items: [] 
      }); 
      $('#main').html('<div class="my-style">This is a test</div>'); 
     }); 
    </script> 
    </head> 
    <body> 
    <div id="main" class="my-style"> 
     A sample div tag 
    </div> 
    </body> 
</html> 
+1

문제의 jsFiddle 예제를 생성 할 수 있습니까? 필요한 라이브러리를 모두로드 할 수 있는지 여부는 알 수 없지만 문제의 데모를 통해 사람들이 더 쉽게 작업을 조언 할 수 있습니다. – tonycoupland

+0

오버플로를 중요하게 만들 필요가 있습니다. // 오버플로 : 보이는 것!중대한; – ius

+0

나는 멀티 셀렉트와 그리드의'Z-index' CSS 속성을 조정함으로써이 문제를 해결할 수 있다고 생각한다. 시도 해봐. –

답변

1

. DOM Integration & Third-party Components 페이지는 타사 위젯과 Z- 색인 문제를 해결하기위한 몇 가지 옵션에 대해 설명 :

  1. 많은 위젯 라이브러리는 기존 HTML 요소 내부의 위젯을 렌더링 할 수있는 메커니즘을 제공합니다. 부트 스트랩 다중 선택 위젯이이 작업을 수행 할 수 있는지 여부는 알 수 없지만 해당하는 경우 사용자 정의 SmartClient 내 타사 위젯을 렌더링하는 방법에 대한 설명서 페이지의 예제 코드가 제공됩니다 Canvas.

  2. multiselect 위젯이 표시 될 때마다 ListGrid에서 getZIndex(true)을 호출하고 multiselect 요소의 zIndex를 더 높은 숫자로 동적으로 설정할 수 있습니다.

    이 접근 방식은 ListGrid이 최상위 위젯 (getParentCanvas()null을 반환 함)이라고 가정합니다. ListGrid이 다른 SmartClient 위젯 내에있는 경우, 최상위 위젯의 zIndex를 가져와야합니다.

  3. 지원되지 않는 옵션으로, 당신은 SmartClient를 낮은 Z- 색인 값을 사용하기 위해 _nextZIndex, _SMALL_Z_INDEX_BIG_Z_INDEX 클래스 속성을 수정할 수 있습니다.

    소스 코드를 살펴본 결과 bringToFront() Canvas 메서드는 위젯의 zIndex를 _BIG_Z_INDEX으로 설정합니다. "선택 목록을": 그것은 부트 스트랩 다중 선택 위젯처럼 보이는

    1. 가 SmartClient를가 multipleAppearance와 SelectItem을 다중 선택에 매우 유사합니다 :

    다른 두 옵션이 있습니다. the Multi-Select example을 참조하십시오. 원하는 경우 SelectItem picklist를 Bootstrap 다중 선택 도구와 똑같이 스타일링 할 수 있습니다.

  4. SmartClient는 htmlElement 속성을 통해 기존 HTML 요소 내에 SmartClient 위젯을 내장하는 것을 지원합니다.