Горизонтальный выбор полной ширины jQuery Mobile

87
9

Я пытаюсь спросить у пользователя о своем дне рождения и о том, что я столкнулся с несколькими стилистическими проблемами.


Вы должны уметь понять мою проблему из этого http://jsfiddle.net/DjsWv/14/


Я начал с:


         <fieldset data-role="controlgroup" data-type="horizontal">
<legend>Date of Birth:</legend>
<select name="select-choice-month" id="select-choice-month" data-icon="false">
<option >Month</option>
<option value="jan">Jan</option>
</select>
<select name="select-choice-day" id="select-choice-day" data-icon="false">
<option >Day</option>
<option value="1">1</option>
</select>
<select name="select-choice-year" id="select-choice-year">
<option >Year</option>
<option value="2011">2012</option>
</select>
</fieldset>

проблема здесь: мне не нравится, что ширина не заполнена или 100%


Единственное решение, которое я видел, - это использование навигационной панели, которая не выглядит умиротворяющей для меня... любые идеи о том, как отобразить эту горизонтальную группу управления как полную/стандартную ширину

спросил(а) 2021-01-19T17:06:40+03:00 2 месяца, 3 недели назад
1
Решение
97

Рабочий пример: http://jsfiddle.net/Gajotres/PUVkw/


HTML


<fieldset data-role="controlgroup" data-type="horizontal" class="custom-fieldset">
<legend>Date of Birth:</legend>

<select name="select-choice-month" id="select-choice-month" data-icon="false">
<option >Month</option>
<option value="jan">Jan</option>
</select>

<select name="select-choice-day" id="select-choice-day" data-icon="false">
<option >Day</option>
<option value="1">1</option>
</select>

<select name="select-choice-year" id="select-choice-year">
<option >Year</option>
<option value="2011">2012</option>
</select>
</fieldset>


CSS

.custom-fieldset .ui-controlgroup-controls {
width: 100% !important;
}

.custom-fieldset .ui-controlgroup-controls .ui-select {
width: 33.33% !important;
}


Не забудьте добавить собственное имя класса в свой набор полей, в моем случае он называется: custom-fieldset


Изменить


Следующее ericjbasti комментировать здесь решение с пользовательским идентификатором и без !important: http://jsfiddle.net/Gajotres/PUVkw/1/

ответил(а) 2021-01-19T17:06:40+03:00 2 месяца, 3 недели назад
75

Не нужно перезаписывать какой-либо стиль. Вы можете использовать поведение навигатора даже в форме.

Смотрите: jQuery Mobile: полная ширина <select> s fieldgroup

ответил(а) 2021-01-19T17:06:40+03:00 2 месяца, 3 недели назад
62

Я не стремился использовать решение navbar выше, поэтому искал более чистое переопределение CSS. Нет! Имманенты в поле зрения, и если вы не обертываете их в элемент полной ширины, они не мешают теме jQuery Mobile.


HTML


<div class="full-width">
<div class="ui-field-contain country-select">
<label for="countrySelect" class="ui-screen-hidden">Select Country</label>
<select id="countrySelect" data-native-menu="false">
<option class="default-option">Select Country</option>
</select>
</div>
</div>

CSS


.full-width .ui-field-contain .ui-select {
width: 100%;
}

ответил(а) 2021-01-19T17:06:40+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема