Проблема горизонтальной компоновки мобильной контрольной группы jQuery

Question

В jQuery mobile 1.0, похоже, есть проблема с макетом контрольной группы типа горизонтальный .Любая помощь приветствуется.

Код пользовательского интерфейса:

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

<select name="SelDateOfBirthMonth" id="SelDateOfBirthMonth">
    <option value="">Month</option>
    <option value="jan">January</option>
    <option value="feb">February</option>
    <option value="mar">March</option>
</select>

<select name="SelDateOfBirthDay" id="SelDateOfBirthDay">
    <option value="">Day</option>
          <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select name="SelDateOfBirhtYear" id="SelDateOfBirhtYear">
    <option value="">Year</option>
    <option value="2011">2011</option>
    <option value="2010">2010</option>
    <option value="2019">2009</option>
</select>
</fieldset>

jQuery Mobile Layou http://img835.imageshack.us/img835/470/jqmobilecontrol.jpg

Answer 1

Согласно документам jQuery Mobile (выделено мое):

Путем добавления атрибута data-type = "horizontal" в контрольную группу контейнер, вы можете поменять на горизонтальную группу, которая плавает кнопки рядом и устанавливает ширину, чтобы быть достаточно большой, чтобы соответствовать содержимое. (Имейте в виду, что они будут переноситься на несколько строк, если количество кнопок или общая длина текста слишком широка для экран.)

Вот ссылка на документ

Answer 2

У меня было то же самое, но я смог решить ее без использования специального CSS, добавив data-mini="true" к моим тегам выбора.

Answer 3

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

• http://jquerymobile.com/demos/1.0/docs/forms/selects/

И это прекрасно выглядит, когда я воспроизводю его здесь:

• http://jsfiddle.net/jmHTc/1/

Вложено ли оно в какие-либо другие теги, которые могут заполнять его и вызывать его отображение таким образом?

Не могли бы вы обрезать такие имена?

• http://jsfiddle.net/jmHTc/3/

, как отметил Брайан, существует также вероятность того, что он окажется слишком большим, чтобы поместиться на экране

Answer 4

Хотя принятый ответ верен, он не решает проблему.

Я предлагаю одну проверку устранения неполадок и два обходных пути.

1. Убедитесь, что все контейнеры не ограничивают пространство, доступное для элемента управления группы.

2. Попробуйте использовать класс ui-mini вконтрольная группа див.Это уменьшит ваши кнопки.

3. Дайте отрицательное поле контрольной группе.Некоторые люди называют это взломом, но это работает и действует.Проверьте эту статью для получения дополнительной информации.

2 и 3:

<div data-role="controlgroup" data-type="horizontal" class="ui-mini" style="margin-right: -10px;">
    <!-- buttons and whatnot... -->
</div> 

Answer 5

В инспекторе Chrome похоже, что ширина устанавливается на 78% для .ui-field-contains и .ui-controlgroup-controls.Удаление этой ширины приводит к тому, что кнопки отображаются на одной строке.

Я смог обойти эту проблему, добавив следующее правило в свой собственный файл .css:

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

Answer 6

Я добавил display: inline-flex; ... не спрашивайте меня, почему, хотя я не знаю.

<span id        = "blah"
      data-role = "controlgroup" 
      data-type = "horizontal"  
      style     = "display: inline-flex;"
    >
  <a ...>
  <a ...>
</span>

Answer 7

В этом случае вам необходимо переопределить классы портрета и ландшафта. JQM пытается быть умным, но его расчеты не работают для меня. Просто используйте firebug с вашим браузером, то есть широким и широким, чтобы увидеть, как jQM применяет классы при изменении ширины. Он добавит и удалит класс .ui-field-Содержит, когда вы переключаетесь в книжный режим или ваш порт дисплея становится тонким в вашем браузере.

Вы хотите переопределить их ширину и отображение (встроенный блок), если вы установите их все одинаково, вы поймете, что я имею в виду:

.ui-field-содержат .ui-controlgroup-controls {}

.ui-controlgroup-контроль {}

.ui-field-содержат .ui-controlgroup-label {}

.ui-controlgroup метки {}