CODEWITHSUNDEEP
jqueryjquery-mobilemobilecordova
Jeff
Jeff

Reputation: 36563

jQuery Mobile Panel Problems

I have a jQuery Mobile Panel that's not behaving properly (in PhoneGap if the matters).

<div data-role="panel" id="nav-popup-menu" data-position="left" data-transition="slide" data-display="overlay" data-dismissible="true">
  <button class="search">Search</button>
</div>

.ui-panel {
  background-color: rgba(0,0,0,0.5) !important;
  width: 200px;
}

<a href="#nav-popup-menu" data-role="button" data-icon="gear" style="background-color: #f6f5f4; border-color: #f6f5f4; color: #f6f5f4; ">|</a>

Based on the above I would expect that pressing anywhere outside the panel would cause it to close. However, this behavior doesn't seem to respect my custom width. That is, if I press at 250px, it doesn't close, whereas if I press at 500px, where the default width would have already ended, it does close.

Using JQM 1.4.1

Any ideas?

Upvotes: 1

Views: 887

Answers (1)

Omar
Omar

Reputation: 31732

A Panel adds an overlay with class ui-panel-dismiss, which closes active panel once clicked/touched. The default position of the panel's overlay is left: 17em; (in case of left panel). That value also represents the default width of panel.

When you override panel's width, you also need to adjust overlay's position. Just give it the same value of panel's new width.

.ui-panel-dismiss {
  left: 200px !important;
}

Demo

Upvotes: 2

Related Questions