2010-03-11 5 views
1

YUI 캘린더 위젯이 제대로 작동하도록했습니다. 그러나 표시 할 때 페이지 위로 "떠 다니지"않습니다. 즉, 내용을 바깥으로 밀어냅니다. 페이지 위에 뜨고 다른 요소에는 영향을 미치지 않아야합니다.YUI 캘린더 위젯 문제

캘린더를 강제로 페이지 위로 뜨는 속성이없는 것 같습니다.

위젯이 표시 될 때 위젯이 페이지 위에 떠 있도록하는 방법을 아는 사람이 있습니까? 위젯을 표시하는 버튼은 테이블 안에 있습니다. 아래의 HTML

+0

그것은 페이지 주위에 떠 다니게하려면 대화 상자 개체 주위에 달력을 포장해야 할 것 같습니다 보인다. 다른 사람들은 이것보다 조금 더 단순한 아이디어를 가지고 있습니까? – giulio

답변

1

해결책을 찾기 위해 관리했습니다. 모든 것이 실패 할 때 .. HTML과 스타일을 더 추가하십시오.

먼저 "calWidget"을 다른 div로 감싸줍니다 (우리는 "calPanel"이라는 ID를 부여합니다). 이렇게 보일 것입니다.

<tr> 
<td>Expiry Date</td> 
<td><input name="ExpiryDate" value="" id="ExpiryDate"> 
     <img id="calico" src="resources/images/calendar_icon.gif" /> 
      <div id="calPanel"> 
      <div id="calWidget"></div> 
      </div> 
</td> 
</tr> 

간단한 CSS를 사용하면 "상대적"calPanel이 "절대"배치 된 calWidget을 둘러 쌉니다. 당신은

#calPanel { 
    position:relative; 
} 

#calWidget { 
    display:block; 
    position:absolute; 
    left:0px; 
    z-index:99; 
} 

위치

는 IE7/8 FF3 +에서 일관성을 보인다 .. 거기에 "#calWidget"CSS에서 왼쪽/오른쪽/위/아래를 사용하는 달력의 위치와 주위를 속일 수 있습니다 ... 희망은 당신이 같은 prob 경우에 도움이 ...