부트 스트랩이 JQTree

이 첫 번째 사진에 충돌하는 스타일을 추가하는 것은 내 jqTree 페이지가 처음로드 될 때 모습입니다 : 다음은 "USA"노드를 다시 확장 닫을 때부트 스트랩이 JQTree

enter image description here

이 무엇을이다

: Google 크롬 디버거에서 그것을 검사에

enter image description here

: 그것은에-확장 재 enter image description here

어떤 이유로 오버플로 : 숨김이 요소의 스타일에 추가 된 것을 볼 수 있습니다! 이 요소 스타일을 삭제/비활성화하면 트리가 예상대로 작동하고 모든 것이 잘되고 잘됩니다.

나는 또한 내 헤더에서 부트 스트랩 CSS를 제거 할 때이 버그가 더 이상 발생하지 않는다고 결정했습니다.

이유는 언제/어디서/어떻게 부트 스트랩이이 스타일을 추가하는지 알 수 있습니까? (속성 변경시) 요소에 크롬에 DOM 중단 점을 추가했지만 중단 점이 적중되기 전에 스타일이 실제로 설정되어 더 혼란 스럽습니다.

이 버그는 파이어 폭스.

도움말하시기 바랍니다

출처

2014-03-06 Ring

'오버 플로우'또는 다른 CSS가 요소에 직접 추가되지는 않습니다. 기회는 'overflow : hidden'은 다른 스타일 (여백, 패딩 등)에 의해 도입 된 스타일 버그를 노출하는 것입니다. 아마도 문제를 일으키는 부트 스트랩 스타일을 오버라이드해야 할 것입니다. – Phil

디버깅에 도움이 될 수있는 다른 제안이 있습니까? 필요할 경우 라이브 데모에 대한 링크를 제공 할 수 있습니다. – Ring

예, * Styles * 탭에서 목록/목록 항목의 부트 스트랩 스타일이 한 번에 하나씩 올바르게 보이지 않을 때까지 비활성화합니다. 그런 다음 올바른 값을 사용하여 스타일 시트에 우선 적용하여 추가하십시오. – Phil

확실히 이상한 것입니다. 부트 스트랩의 기본값 인 box-sizing의 영향을받을 수 있지만 문제는 jQTree 스타일로 인해 발생하는 것으로 보입니다. 어떤 경우에는, 스타일 시트 문제였다

ul.jqtree-tree ul.jqtree_common { 
    margin-left: 0; 
    padding-left: 16px; 
}

이러한 스타일을 추가, 그 화살은 부모의 상자 이상을 넣어 left: -1.5em 절대적으로 위치되고 있었다. overflow:hidden으로 표시되지 않았습니다.

JQTree의 일부 자바 스크립트는 overflow 속성을 추가합니다. 아마 애니메이션을 쉽게 만들 수 있습니다.

출처

2014-03-06 22:51:16 Phil

jqTree가 overflow 속성을 추가하지 않았습니다. 문제를 해결하는 부트 스트랩 CSS를 제거 할 때 (또한 해당 소스를 검색했습니다). 그러나 부트 스트랩의 상자 크기 조정과 같은 간단한 작업으로 인해 문제가 발생할 수 있다고 생각합니다. 오버플로 스타일이 브라우저에서 브라우저의 기존 문제를 언급 한 스타일로 수정하려는 시도로 Chrome에서 실제로 추가되었다는 사실에 직감이 있습니다. 그것이 말하게되면, 당신의 도움에 대해 많은 감사드립니다! – Ring

@Ring'overflow' 스타일은 jQuery의 'slideUp' 애니메이션 함수에서 설정되었다고 생각합니다. – Phil

부트 스트랩이 JQTree

답변

관련 문제