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/
Интересно, является ли это ограничением всплывающего окна.
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