Question

I’m using Jquery mobile popup and want to display a form in a popup.
I want to display the text label and text box in the same line. So, I use div with fieldcontain around it.
It works outside of popup but not inside.

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

See this jsfiddle: http://jsfiddle.net/B3pyG/

I wonder if this is a limitation of popup.

Answer 1

It looks like Field Containers are hampered by the styling used for Popups. I tried with their Form example: 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>

The Popup wrapper seems to pull everything in and wrap as much as it can. They talk about it in documentation:

The popup consists of two elements: the screen, which is a transparent
or translucent element that covers the entire document, and the
container, which is the popup itself. If your original element had an
id attribute, the screen and the container will each receive an id
attribute based on it. The screen’s id will be suffixed with
“-screen”, and the container’s id will be suffixed with “-popup” (in
the above example, id=”popupBasic-screen” and id=”popupBasic-popup”,
respectively).

The framework adds a small amount of margin to text elements, but it’s
really just a container with rounded corners and a shadow which serves
as a blank slate for your designs (even these features can be disabled
via options).

You could get around this by making a box for the label and floating the Input the right. Something like:

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