2012-10-31 1 views
1

jQuery Mobile의 가로 그룹 라디오 버튼 세트의 상대 너비를 사용자 정의하려고합니다.jQuery 모바일 그룹화 라디오 버튼 설정 폭 : 범례 대 입력 나누기

는 기본적으로 이들의 상대적인 크기는 대략이다 (눈으로 만)

  • .ui-controlgroup 레이블 25 %
  • .ui-controlgroup 제어한다 75 %

나는이 분할을 다음 html로 50:50으로 변경하려고 시도했다 ...

<div data-role="content">    

    <div data-role="fieldcontain"> 

    <fieldset data-role="controlgroup" data-type="horizontal" id="ps_test"> 

     <legend> 
     Quite a bit of of text to put here from time to time ... 
     </legend> 

     <input type="radio" name="radio-choice-2" id="radio-choice-21" value="choice-1" checked="checked" /> 
     <label for="radio-choice-21">0</label> 

     <input type="radio" name="radio-choice-2" id="radio-choice-22" value="choice-2" /> 
     <label for="radio-choice-22">1</label> 

     <input type="radio" name="radio-choice-2" id="radio-choice-23" value="choice-3" /> 
     <label for="radio-choice-23">2</label> 

     <input type="radio" name="radio-choice-2" id="radio-choice-24" value="choice-4" /> 
     <label for="radio-choice-24">3</label> 

     <input type="radio" name="radio-choice-2" id="radio-choice-25" value="choice-4" /> 
     <label for="radio-choice-25">4</label> 

     <input type="radio" name="radio-choice-2" id="radio-choice-26" value="choice-4" /> 
     <label for="radio-choice-26">5</label> 

     <input type="radio" name="radio-choice-2" id="radio-choice-27" value="choice-4" /> 
     <label for="radio-choice-27">6</label> 

    </fieldset> 
    </div> 

</div><!-- /content --> 

... lowing css ...

.ui-controlgroup-label { 
    width: 50%; 
} 

.ui-controlgroup-controls { 
    width: 50%; 
} 

... 그러나 이것은 영향을 미치지 않습니다. 볼 코드 예제를 저장했습니다 here

레이블 너비와 단추 세트의 너비는 어떻게 변경합니까?

감사합니다.

답변

1

CSS는 jQuery Mobile의 CSS만큼 우선 순위가 높지 않습니다. 이와 같이 변경하면 다음과 같이 변경해야합니다.

.ui-field-contain .ui-controlgroup-label { 
    width: 50%; 
} 

.ui-field-contain .ui-controlgroup-controls { 
    width: 50%; 
} 

다음 번에 FireBug, Chrome 개발자 도구, Dragonfly 또는 IE 개발자 도구 만 사용하면됩니다.

+0

안녕하세요. 많은 감사 - 치료를했습니다. SelectorGadget을 사용하고 JS 디버깅을 위해 FireBug/Chrome Dev를 사용합니다 ... 그러나 여기에 팁을 주셔서 감사 드리며 사용하겠습니다. 다시 한번 감사드립니다. – psmail