JQuery мобильного радио группа кнопок, чтобы соответствовать 100% ширины

<div data-role="fieldcontain" style="font-size: 84%" > <!-- style="width: 48% ; float: right" --> 
    <fieldset data-role="controlgroup" data-type="horizontal" data data-mini="false" data-theme="b" style="width: 98%; " data-corners="false"> <!-- strength --> 
    <legend style="text-align: center ; ">גודל</legend> 
    <input type="radio" name="radio-strength" id="radio-view-a" value="גדול" data class="blabla" style="background-color: #BF8F54;"/> 
    <label for="radio-view-a" >גדול: 10.50 &#8362;</label> 
    <input class="blabla" type="radio" name="radio-strength" id="radio-view-b" value="בינוני" checked="checked"/> 
    <label for="radio-view-b" >בינוני: 6.30 &#8362;</label> 
    <input class="blabla" type="radio" name="radio-strength" id="radio-view-c" value="קטן" /> 
    <label for="radio-view-c" >קטן: 5.70 &#8362;</label> 
    </fieldset> 
</div>

кнопки Jquery Mobile Radio: в exmaple выше я сумел поместиться горизонтальные радиокнопок точно приспособленное методом проб и ошибок.JQuery мобильного радио группа кнопок, чтобы соответствовать 100% ширины

Как это можно сделать в коде ???

источник

2014-04-24 user3476736

Итак ... что именно вы хотите здесь? – Andrew

Я хочу, чтобы горизонтальные переключатели соответствовали ширине экрана «автоматически», а не вручную (с использованием размера шрифта 84%). – user3476736

Я предполагаю, что вы хотите, чтобы CSS получил контрольную группу, похожую на изображение?

Если это так, вот ваш HTML с всеми стили удалены и некоторые опечатки исправлены:

<div id="myGroup" data-role="fieldcontain"> 
    <fieldset data-role="controlgroup" data-type="horizontal" data-mini="false" data-theme="b" data-corners="false"> <!-- strength --> 
     <legend >גודל</legend> 
     <input type="radio" name="radio-strength" id="radio-view-a" value="גדול" class="blabla" style="background-color: #BF8F54;"/> 
     <label for="radio-view-a" >גדול: 10.50 &#8362;</label> 
     <input class="blabla" type="radio" name="radio-strength" id="radio-view-b" value="בינוני" checked="checked"/> 
     <label for="radio-view-b" >בינוני: 6.30 &#8362;</label> 
     <input class="blabla" type="radio" name="radio-strength" id="radio-view-c" value="קטן" /> 
     <label for="radio-view-c" >קטן: 5.70 &#8362;</label> 
    </fieldset> 
</div>

Я добавил ID в fieldcontain, чтобы мы могли ограничить правила CSS к вещам в этом контейнере:

#myGroup { 
    font-size: 84%; 
} 
#myGroup .ui-controlgroup-label{ 
    float: none; 
    display: block; 
    text-align: center; 
    width: 100%; 
} 
#myGroup .ui-controlgroup-label legend{ 
    font-weight: bold; 
    font-size: 130%; 
    width: 100%; 
    margin-bottom: 8px; 
} 
#myGroup .ui-controlgroup-controls { 
    float: none; 
    display: block; 
    width: 100%; 
} 
#myGroup .ui-radio{ 
    width: 33.33%; 
} 
#myGroup .ui-radio label{ 
    text-align: center; 
    white-space: nowrap; 
}

DEMO

источник

2014-04-24 16:51:37 ezanker

Ты гений! Спасибо 99.9% :) У меня только небольшая проблема, когда текст отключается из-за «noweap». (он делает «...» вместо текста ... Как я могу получить текст для автоматического изменения размера в соответствии с шириной кнопки - таким образом, чтобы все три кнопки имели одинаковый размер шрифта, но в соответствии с «самый длинный текст», если я достаточно ясен. – user3476736

С помощью CSS вы можете создавать медиа-запросы для ширины устройства и применять меньшие шрифты для меньшей ширины: http://jsfiddle.net/ezanker/DD6YC/3/. чем это, вам нужно будет использовать JavaScript. См. https://github.com/davatron5000/FitText.js или http://stackoverflow.com/questions/3401136/resize-font-to-fit-in-a- div-on-one-line – ezanker

Ты праведный человек. Если бы у меня была дочь, я бы заставил ее жениться на тебе. Еще раз спасибо тебе за помощь. Я видел пример, который вы загрузили в jsfiddle, и это что я хочу. По какой-то причине, хотя я скопировал код @media из вашего примера, он не работает в моих браузерах (chrom е, светлячок). Не знаю причины. В любом случае, спасибо! – user3476736

Вы должны добавить data-inline="true". Проверьте демонстрационные ролики для переключателей на сайте jQuery Mobile.

источник

2014-04-24 16:15:11 user3283104

Я использую демоверсии в качестве моей первой контрольной точки. они великолепны. Но они не предлагают решения. Кроме того, я попытался добавить данные в строку к каждому тегу в моем коде, и это не повлияло. – user3476736

Спасибо за редактирование. Я отправлял через мобильное приложение SO. – user3283104

JQuery мобильного радио группа кнопок, чтобы соответствовать 100% ширины

ответ

Смежные вопросы