0

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

user281058
  • 151
  • 2
  • 7

1 Answers1

0

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%; }

SimonDowdles
  • 2,026
  • 4
  • 24
  • 36
  • I made a fiddle ( http://jsfiddle.net/seankurth/smoewxd4/ ), resize the results window to the maximum possible (about 800px wide), and notice how the panel ceases to be clickable about 40 pixels before the left edge. Also, grumpy cat is just a placeholder I googled because the *actual* background isn't online yet. – user281058 Jan 21 '15 at 09:30
  • Your assumption that I wanted to target the add-form element was (I hope?) correct, but adding your code creates a nearly unclosable panel stuck to the left side and not full height. Weird... – user281058 Jan 21 '15 at 09:37
  • Okay, well I can not see the markup environment that your code is in. I suggest popping it into a fiddle so I can better assist you. – SimonDowdles Jan 21 '15 at 09:52
  • OK *adds most of page to fiddle,* but it does seem to exhibit the issue even with the code that was already there. (should I upload and link the external images too?) – user281058 Jan 21 '15 at 09:59
  • Please don't mind the ugly blue lines under the links, in the testing version they were made to disappear with a modification to jquery.mobile-1.4.3.min.css ( adding "text-decoration: none !important;" to anything that had a:hover in it). However, the fiddle code which uses a copy of jquery mobile I haven't touched also has issues, so I know that isn't the problem. – user281058 Jan 21 '15 at 10:23
  • I have taken a look at your fiddle, and pointed out the issue in my updated answer above. I'm not sure if you down voted my answer or someone else did, but it's unnecessary as the answer was attempted with very little background to the problem. – SimonDowdles Jan 21 '15 at 10:39
  • No I didn't downvote, I think someone else did. I don't even have the reputation points for that. – user281058 Jan 21 '15 at 10:49
  • Also, thanks for suggesting using my browser's code inspector, turns out the ui-panel-dismiss div overlaps the panel at right about the 300px mark, which *should* explain it. – user281058 Jan 21 '15 at 10:59
  • It does overlap yes, but it appears to be the doing of the "ui-panel-dismiss" class. I can't say WHY it's doing that, but I can confirm that removing the class did remove that overlap. I have updated my answer with the fiddle URL of the now working example. Here it is again: http://jsfiddle.net/smoewxd4/3/ – SimonDowdles Jan 21 '15 at 11:00
  • In fact, it turns out I was able to do a pure CSS solution: `div.ui-panel-dismiss.ui-panel-dismiss-position-right.ui-panel-dismiss-display-overlay.ui-panel-dismiss-open{width: 50% !important; }` – user281058 Jan 21 '15 at 11:03
  • I wouldn't target it the way you've done it, instead target it by just using the `#add-form` CSS selector or at least the MINIMAL required amount of ID / Class selectors. Otherwise, in future, ALL panels are going to be 50% width. Secondly, if your CSS came after that of jQuery's try and drop the use of !important. Generally, the need to use !important indicates badly formed in terms of hierarchy. You could simply change your above CSS selector to be `#add-form.ui-panel.ui-panel-dismiss` – SimonDowdles Jan 21 '15 at 11:06
  • Done and done, thanks. I'm keeping the 50% width dismiss div though, because I just don't want it bothering me again, and all my panels will have a nice big "X" button anyway. The panel though, I agree, a 50% width search panel would look weird, for example. – user281058 Jan 21 '15 at 11:53