JQM 弹出窗口 - fieldcontain 在弹出窗口中不起作用

Question

我正在使用 Jquery 移动弹出窗口并希望在弹出窗口中显示一个表单。 我想在同一行显示文本标签和文本框。所以，我使用 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/

我想知道这是否是弹出的限制。

Answer 1

虽然问题是 3 年前的问题，但只是一个建议，也许您可​​以在弹出窗口中使用表格？

Answer 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>

Popup 包装器似乎将所有内容都拉入并尽可能多地进行包装。他们在文档中谈论它：

弹出窗口由两个元素组成：屏幕，它是透明的 或覆盖整个文档的半透明元素，以及 容器，即弹出窗口本身。如果您的原始元素有 id 属性，屏幕和容器都会收到一个 id 基于它的属性。屏幕的 id 将带有后缀 “-screen”，并且容器的 id 将带有“-popup”后缀（在 上面的例子，id="popupBasic-screen" 和 id="popupBasic-popup"， 分别）。

框架为文本元素添加了少量的边距，但它的 实际上只是一个带有圆角和阴影的容器 作为您设计的空白板（即使这些功能也可以禁用 通过options)。

您可以通过为标签制作一个框并将输入向右浮动来解决此问题。比如：

<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>