CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapjquery-mobile
Mike Phils
Mike Phils

Reputation: 3505

Increase and decrease the width of jquery mobile panel

I am using jquery mobile panel. I am adding content in panel.

$("#load").on("click", function () {
    var items = $("#p2 .ui-content").contents().clone();
    $(this).after(items);
});

Example:

http://jsfiddle.net/Palestinian/Lcbd2/

I want to decrease the width of panel but again get actual size when second time content added in panel.

Upvotes: 1

Views: 164

Answers (1)

Tasos
Tasos

Reputation: 5361

The Original size of the panel is width: 17em;.

To make the panels smaller using css. 

.ui-panel {
width: 12em !important;
}

if you want to target a specific panel left or right

.ui-panel-position-right {
width: 12em !important;
}

.ui-panel-position-left{
width: 12em !important;
}

Demo

http://jsfiddle.net/ybvfxu39/

Jquery. As you now know the original size of the panel is 17em you can use the below code to set a size when you need to.

$(".ui-panel-position-right").css("width", "12em");

Demo

http://jsfiddle.net/z4k8L3vu/

Upvotes: 1

Related Questions