2013-08-05 3 views
0

트위터 부트 스트랩 팝업 스크롤에 문제가 있습니다. 나는 행운이없는 해결책을 읽고 찾았다.Twitter 부트 스트랩, 별도의 패널에있는 팝업 스크롤

별도의 패널에 팝업을 사용하여 버튼을 만들었습니다. 그리고 스크롤 할 때 팝업 버튼이 버튼에 머 무르지 않습니다. 즉, 패널이 스크롤되는 동안 고정되어 있습니다.

전체 페이지를 스크롤 할 때 이것은 문제가되지 않습니다. 별도의 패널에만 있습니다. Please see live demo here 및 아래 스크린 샷을 참조하십시오.

(동일한 레이아웃에 몇 가지 추가 문제가 있지만 해당 레이아웃에 대해 별도의 질문이 생성됩니다.)

Twitter Bootstrap scroll

Bootstrap scroll staying put

AH! Schmalzy는 내가 친척이 필요한 부모 일 뿐이라고 생각했습니다. 아래 그림과 같이 새로운 문제가 발생했습니다. Popover가 모든 패널 위에 놓이게하려면 어떻게해야합니까?

enter image description here

+0

는 것 같습니다. 그것은 당신의 모든 포지셔닝 문제를 해결할 것입니다 ... – Schmalzy

+0

다시, 당신이 도와 줄 시간을 많이 짊어 져야 할 의무가 있습니다. 나는 확실히 그것에 깊이 파고 다시보고 할 것이다 :-) 많이 고마워. – Benteh

답변

2

당신은 상대에게 자신의 위치를 ​​변경할 수 있으며이 제대로 작동하는 것 같다.

.popover{ 
    position: relative; 
} 

이 아래로 팝 오버 지난 패널의 텍스트/컨텐츠를 밀어되지만

... 그것을 데모 버튼

Here is a fiddle.

또한, 이것은 당신이 패널로 스크롤 position: relative에 팝 오버의 부모 컨테이너를 변경하는 경우 3.0RC1

+0

인사말, Schmalzy - 시간을내어 주셔서 감사합니다. position : relative는 내용을 푸시 다운합니다. 이것은 나에게 정말로 받아 들일 수 없다. 나는 당신의 두 가지 바이올린 사이의 차이점을 이해하지 못합니까? 단순히 버전 차이인가? 내가 알 수있는 한 두 가지 경우 모두 동작이 동일합니까? – Benteh

+1

@boblet 첫 번째 바이올린은 현재 생산 버전의 부트 스트랩 (v2.3.2)을 사용하고 두 번째 버전 (3.0RC1)은 부트 스트랩의 최신 릴리스 후보를 사용하고 있다는 점이 다릅니다. [여기는 업데이트 버전입니다] (http : /jsfiddle.net/SchmalzyB/xqfAp/1/) 그 차이를 증명할 수있는 나의 바이올린. popover가 열릴 때 내용을 아래로 밀어 내지 않는다는 것을주의하십시오. – Schmalzy

+0

감사합니다, Schmalzy : v3로 바꾸면 문제가 해결됩니다. – Benteh

1

이와 3.0RC1

Here is a fiddle에 필요한 변경없이 작동하는 것 같다. 대신이 팝 오버의 모달을 사용하는 것이 훨씬 쉬울 것 같은

jsFiddle

+0

Ahhhhh - 나는 그것이 단순해야한다고 생각해. 하지만 .. 항상 그렇습니다. 그것은 새로운 문제가 생겨난 것 같습니다 : 위치가 상대적으로 설정되면, popover가 현재 패널의 절반에서 사라집니다 ... 나는 스크린 샷을 추가하고 위에서 편집 할 것입니다. – Benteh