taitems / iOS-Inspired-jQuery-Mobile-Theme

iOS-inspired theme for jQuery Mobile
http://taitems.github.com/iOS-Inspired-jQuery-Mobile-Theme
481 stars 142 forks source link

"Popup" data-role = "dialog" messed up #17

Closed ns-1m closed 12 years ago

ns-1m commented 13 years ago

This "Popup" dialog is messed up. The header bar is inside the first record of the table. In order words, the table is not aligning the bottom part of the header. The close icon is also missing in the left hand side of the header.

    <div id="popup" data-role="dialog">
        <div data-position="inline" data-theme="b" data-role="header">
           <h1>Details</h1>
        </div>
        <div data-theme="c" data-role="content">
            <ul id="details-list" data-role="listview">
            </ul>
        </div>
    </div>

You can see this in OpenLayers JQuery Mobile example here:

http://openlayers.org/dev/examples/mobile-jq.html#mappage

Click on the black location icons and you will see this dialog popup windows.

How do I fix this?

This is the windows that is messed up (below) when using iOS-Styled.

http://openlayers.org/dev/examples/mobile-jq.html#mappage&ui-state=dialog

This is the JQM code.

// This is the popup form for the sprinters
$('div#popup').live('pageshow',function(event, ui){
    var li = "";
    for(var attr in selectedFeature.attributes){
        li += "<li><div style='width:25%;float:left'>" + attr + "</div><div style='width:75%;float:right'>" 
        + selectedFeature.attributes[attr] + "</div></li>";
    }
    $("ul#details-list").empty().append(li).listview("refresh");
});
ns-1m commented 13 years ago
    <div id="popup" data-rel="dialog">
        <div data-position="inline" data-theme="b" data-role="header">
           <h1>Details</h1>
        </div>
        <div data-theme="c" data-role="content">
            <ul id="details-list" data-role="listview">
            </ul>
        </div>
    </div>

If I use the code above, popup" data-rel="dialog" , the popup is OK but no close icon. So you can close the popup window dialog.

It might be OK to put a close icon in this dialog header.

taitems commented 12 years ago

Is this issue related to the iOS theme itself or jQuery Mobile dev?

That link currently does not have the iOS theme enabled.

taitems commented 12 years ago

Closing, never got follow up, user hadn't applied the iOS theme - was using something else.