Установка ширины переключателей при использовании jQueryUI - PullRequest
Новая
       14

Установка ширины переключателей при использовании jQueryUI

4 голосов
/ 17 августа 2010

Я использую радио-кнопки jQuery UI и не могу найти, как установить их фиксированную ширину.

Код, который я использую: 

<script type="text/javascript">
    $(document).ready(function () {
        $("#radio").buttonset();
    });
</script>

<div id="radio">
    <input type="radio" id="radio1" name="radio" /><label for="radio1">A</label>
    <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2 - long long</label>
    <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>

Я использую jQuery впервые, и у меня мало опыта CSS или javascript.Я пробовал всевозможные странные комбинации, чтобы попытаться задать фиксированную ширину для кнопок без потери стиля пользовательского интерфейса jQuery, но безуспешно.

Любая помощь будет принята.

Ответы [ 2 ]

10 голосов
/ 17 августа 2010

Вы можете установить ширину отображаемых элементов <label>, используя .width(val) следующим образом: 

$("#radio").buttonset().find('label').width(200);

Вы можете попробовать здесь , в качестве альтернативы вы можете просто добавить правило CSS следующим образом: 

​#radio label { width: 200px }​

Вы можете попробовать это здесь .

1 голос
/ 30 октября 2013

Нижеследующее работает для обычных переключателей и только с иконками 

.myradiolables
{
 width: 200px;
 height: 20px;
}

<div id="radio">
<input type="radio" id="radio1" name="radio" /><label class="myradiolabels" for="radio1">A</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label class="myradiolabels" for="radio2">Choice 2 - long long</label>
<input type="radio" id="radio3" name="radio" /><label class="myradiolabels" for="radio3">Choice 3</label>
</div>
...