Jqm popup-fieldcontain не работает внутри popup



Я использую jQuery mobile popup и хочу отобразить форму во всплывающем окне.
Я хочу отобразить текстовую метку и текстовое поле в одной строке. Поэтому я использую div с fieldcontain вокруг него.
Он работает снаружи всплывающего окна, но не внутри.



<a href="#popupBasic" data-rel="popup">Open Popup</a>
<div data-role="popup" id="popupBasic">
<div data-role="fieldcontain">
<label for="input"> Fieldname </label>
<input type="text" id="input" value="" />
</div>
</div>

<div data-role="fieldcontain">
<label for="input"> Fieldname </label>
<input type="text" id="input" value="" />
</div>


Смотрите этот jsfiddle: http://jsfiddle.net/B3pyG/



Интересно, является ли это ограничением всплывающего окна.

506   2  

2 ответов:

Похоже, что полевым контейнерам мешает стиль, используемый для всплывающих окон. Я попробовал с их формой Пример: http://jsfiddle.net/Twisty/BrsR2/

HTML

<div data-role="page">
    <div data-role="header">
        <h1>Test PopUp</h1>
    </div>
    <div data-role="content">
        <a href="#popupBasic" data-rel="popup">Open Popup</a>
        <div data-role="popup" id="popupBasic">
            <form>
                <div style="padding:10px 20px; width: 440px">
                    <h3>Please sign in</h3>
                    <div data-role="fieldcontain">
                        <label for="un">Username:</label>
                        <input placeholder="username" id="un" value="" name="user">
                        <label for="pw">Password:</label>
    <input id="pw" type="password" placeholder="password" value="" name="pass">
                    </div>
                    <div data-shadow="true" data-iconshadow="true" data-icon="" data-iconpos="" data-theme="b" aria-disabled="false">
                    </div>
                </div>
            </form>
        </div>
        <div data-role="fieldcontain">
             <label for="input"> Fieldname </label>
             <input type="text" id="input" value="" />
        </div>
    </div>
</div>

Всплывающая обертка, кажется, втягивает все и оборачивает столько, сколько может. Они говорят об этом в документации:

Всплывающее окно состоит из двух элементов: экрана, который является прозрачным или полупрозрачный элемент, который покрывает весь документ, и контейнер, который является всплывающее окно само по себе. Если ваш первоначальный элемент имел атрибут id, экран и контейнер получат каждый идентификатор атрибут, основанный на нем. Идентификатор экрана будет иметь суффикс: "- screen", а идентификатор контейнера будет иметь суффикс "- popup " (в приведенном выше примере, идентификатор="popupBasic-экран" и ID="popupBasic-всплывающем", соответственно).

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

Вы можете обойти это, сделав поле для метки и плавая входной сигнал справа. Что-то вроде:

<span display="width: 100%; display: block;">
    <span style="display: inline-block; width: 100px;">Label: </span>
    <input type="text" name="test" style="width: 340px; float: right;">
</span>

Хотя вопрос был задан 3 года назад, но просто предположение, возможно, вы могли бы использовать таблицу в всплывающем окне?

Comments

    Ничего не найдено.