JQuery Mobile. Имейте ввод и метку в одной строке внутри таблицы, независимо от ширины экрана.

Я использую JQuery Mobile. Я хочу иметь метку и ввод в одной строке внутри ячейки таблицы. Таблица и ячейка имеют фиксированную ширину, поэтому я думаю, что макет внутри ячейки не будет зависеть от ширины окна. Но если я использую код в этом jsfiddle и делаю окно результатов узким, метка и ввод отображаются в разных строках, и если я делаю окно результатов широким, они отображаются в одной строке. Это кажется странным, потому что ширина ячейки не меняется, когда я изменяю размер окна результатов. Любые мысли о том, что происходит и как отображать их в одной строке, даже когда окно узкое?

HTML:

<table>
    <tbody>
        <tr>
            <td>
                <div data-role="fieldcontain">
                    <label for="cost1">$</label>
                    <input type="text" name="cost1" id="cost1" value=""/>
                </div>
            </td>
            <td>
                <div data-role="fieldcontain">
                    <label for="cost2">$</label>
                    <input type="text" name="cost2" id="cost2" value=""/>
                </div>
            </td>
        </tr>
    </tbody>
</table>

CSS:

td {
    width: 10em;
    border: 0.1em solid black;
}
table {
    table-layout: fixed;
    width: 20em;
}

Кстати... Я видел аналогичный вопрос на SO и в других местах, но я не уверен, что является важной частью, которая позволит им быть на одной линии в различных сценариях. В моем случае я в конечном итоге собираюсь отображать «$» или нет на основе какого-либо javascript и хочу, чтобы ввод изменялся соответственно в зависимости от оставшегося доступного пространства.


html jquery css jquery-mobile
person corbin    schedule 18.02.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Это потому, что это поведение по умолчанию для fieldcontain. Если вы используете консоль для просмотра изменений CSS при выполнении медиа-запросов, вы увидите, как что-то происходит. Вы можете создать свой собственный класс для этих контейнеров или добавить переопределения в свой CSS:

Пример скрипта: http://jsfiddle.net/ks7201ov/

.ui-field-contain>label {
    float: left;
    width: 20%;
}
.ui-field-contain>label~[class*=ui-] {
    float: left;
    width: 78%;
}
.ui-field-contain:before, .ui-field-contain:after {
    content: "";
    display: table;
}
.ui-field-contain {
    padding: 0;
    margin: 1em 0;
}

Пользовательский класс может быть лучше, поскольку подход переопределения иногда может быть проблематичным (обратите внимание, что узкая метка версии скрипки подпрыгивает).

person Bitwise Creative    schedule 19.02.2015
comment
Оба ответа, данные до сих пор, вероятно, будут работать для моих нужд. Я оцениваю их, чтобы увидеть, с кем я пойду. - person corbin; 19.02.2015
comment
Этот отвечает на вопрос «почему», поэтому я выбираю его. Оба работают. Я на самом деле решил это по-другому. jsfiddle.net/1k2mds31/10 - person corbin; 19.02.2015

arrow_upward
1
arrow_downward

Bitwise Creative дал хороший ответ. В качестве альтернативы, если вы все равно используете таблицу, почему бы не избавиться от fieldcontain и просто использовать 4 ячейки таблицы вместо 2?

<table>
    <tbody>
        <tr>
            <td class="labelcell"><label for="cost1">$</label></td>
            <td class="inputcell"><input type="text" name="cost1" id="cost1" value=""/></td>
            <td class="labelcell"><label for="cost2">$</label></td>
            <td class="inputcell"><input type="text" name="cost2" id="cost2" value=""/></td>
        </tr>
    </tbody>
</table>

CSS:

table {
    table-layout: fixed;
    width: 20em;
    border-collapse: collapse;
}
td{
    border: 0.1em solid black; 
    vertical-align: middle;
}
td.inputcell {
    width: 9em;    
    border-left: 0;
    padding-right: 4px;
}
td.labelcell {
    width: 1em;
    border-right: 0;
    padding-left: 2px;
}

Обновлен FIDDLE.

person ezanker    schedule 19.02.2015
comment
Оба ответа, данные до сих пор, вероятно, будут работать для моих нужд. Я оцениваю их, чтобы увидеть, с кем я пойду. - person corbin; 19.02.2015