jquery 슬라이더 옆의 텍스트 레이블 (알 수없는 너비의 div)

Question

부모 div 안에는 왼쪽에 텍스트 레이블이 있고 오른쪽에 슬라이더 (jQuery UI 사용)가 있어야합니다.

슬라이더가 사용 가능한 모든 공간을 차지하고 싶습니다. this question과 달리 상위 div의 너비는 알 수 없습니다.

그래서 개념적으로는 (깨진 시도와 jsfiddle here) 같은 것을해야한다 :

<div id="parentDiv" style="width:100%"> 
<span>Unicorn awesomeness:</span><div id="unicornSlider"></div> 
</div> 

하지만 크롬, FF3와 IE8에서 작동 쉽게 아무것도 얻을 수 없습니다. 누구든지 아이디어가 있습니까?

Answer 1

당신은 jQuery를 사용하여 폭을 설정을 시도 할 수 :

$('#unicornSlider') 
    .width($('#parentDiv').width() -$('#parentDiv span').width() - 20) 
    .slider() 

I'ev 당신의 fiddle이를 포함하도록 업데이트되었습니다. (또한 100 % + 패딩이 창보다 커서 부모 div의 너비를 90 %로 변경해야했습니다.)

업데이트 : 브라우저 창 크기를 조정할 때이 너비가 유지되는 것으로 나타났습니다. $(window).resize(function)으로 너비를 다시 계산할 수 있습니다.