Search code examples
jqueryhtmlcssjquery-mobilejquery-mobile-panel

Jquery mobile panel buttons only working up to 300px

I've built a responsively sized panel, like this:

<div data-role="panel" data-position="right" data-display="overlay" data-theme="a"
id="add-form" style="width:50%; max-width:500px;" data-position-fixed="true">

For some reason, The panel seems to stop working at the 300px mark. As in, the panel will resize based on viewport width, but nothing is clickable past 300px wide. When the panel is wider than 300px, part of the buttons will be clickable and part won't. I've tried adding !important to everything, it doesn't help either. I'm using jQuery mobile 1.4.3 (for a desktop site, I just like the look of the panels, forms and buttons better than desktop jQuery's). Yes, I've called jQuery and its CSS as the last things in the head tag, otherwise the panel wouldn't work at all

Solution

  • I am taking a shot in the dark here, as I can not see the rest of your markup.

    I mocked up a Fiddle at http://jsfiddle.net/a9f22n70/1/ of what I THINK you meant. On load, I saw a bunch of classes added to the panel element (by jQuery mobile) which were causing layout issues for me on Desktop. I removed all classes on load and re-added the "ui-panel" class. This cleaned things up for me.

    The markup I used, to test, was:

    <div data-role="panel" data-position="left" data-display="overlay" data-theme="a"id="add-form" style="width:50%; max-width:500px;background:red;" data-position-fixed="true">
    <a href="index.html" data-role="button">Link button</a>
</div>

    The jQuery (dead simple) is as follows:

    $(document).ready(function(){
    $("#add-form").attr("class","").addClass("ui-panel");
})

    Again, I ran on the assumption that you only wanted to target the #add-form element.

    As they say, assumption is the mother of all ... so hopefully I hit the nail on the head!

    UPDATE

    After examining the code in your fiddle, the issue (for me) is the presence of the class "ui-panel-dismiss" on the panel itslef. Removing this class (by way of my inspector tool for testing) rectified this issue.

    It's a bit of a hack, but you could remove this class from the panel using jQuery after page load, using the removeClass(); function.

    EDIT

    Here is a working fiddle solving the problem: http://jsfiddle.net/smoewxd4/3/

    FINAL VERDICT

    The CSS solution you proposed in your comments worked, but would result in all panels being set to 50% wide. I suggest using this CSS selector instead to make it specific to the #add-form element, and also eliminate the use of !important:

    #add-form.ui-panel.ui-panel-dismiss{ width:50%; }