0
votes

My jQuery mobile popup header doesn't have the same size as the content.

enter image description here

jQuery 1.8.3 and jQuery mobile 1.2.0.

<div data-role="popup" id="commentPopup" style="width: 800px;" class="ui-corner-all">
    <div data-role="header" data-theme="b" class="ui-corner-top">
        <h1>Please enter your comment</h1>
    </div>
    <div data-role="content" data-theme="b" class="ui-corner-bottom ui-content">
        <textarea></textarea>
        <a href="#" data-role="button" data-inline="true" id="okComment" data-theme="a">OK</a>
        <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="a">CANCEL</a>
    </div>
</div>

For info, I open it with $('#commentPopup').popup("open");.

Is it possible to disable the scroll while the popup is opened? Is it possible to prevent the user from closing the popup when clicking in another place of the page?

Thanks

1
Are you overriding jQM classes somewhere? .ui-header or so? to prevent closing popup, add data-dismissible="false" to the popup div. jsbin.com/ulavul/1Omar
Yes you were right. I was overriding a .ui-content. It's solved. Concerning the dismissible, I think it's only available since jQM 1.3.0. However I use jQM 1.2.0. Is there any equivalent or trick I could use? ThanksMaxbester
I recommend using jQM 1.3.0.Omar
Well if I change, I have to re-validate the whole application... Cost time!Maxbester
I guess dismissible is also available in 1.2.0Omar

1 Answers

0
votes

I was overriding a CSS .ui-content class as @Omar found it.

The problem is solved.

Concerning the dismissible, this is not possible with jQM version < 1.3.0.