CODEWITHSUNDEEP
jqueryjquery-mobile
Ryder
Ryder

Reputation: 514

Jquery Mobile Panel Content Height?

I am dynamically building list view inside panel using jquery mobile and mvc4.

1) Our 1st requirement is the panel should come below header. The below code works perfectly.

$(document).on("panelbeforeopen", function (event, ui) {
  var header = $('[data-role=header]').outerHeight();
  var panel = $('.ui-panel').height();
  var panelheight = panel - header;

  $('.ui-panel').css({
    'top': header,
    'min-height': panelheight
  });

});

2) The next requirement is the panel height should be depending upon number of li inside panel. example if i have 2 li in panel then the max-height should be equal to 2 li there should not be any empty face in bottom.

Please Guide Me

1) I tried below code

$(document).on("panelbeforeopen", function (event, ui) {

  var header = 50;
  var panel = $('.ui-panel').height();
  var panelheight = panel - header;
  var Uiinnes = $('.ui-panel-inner').height();

  $('.ui-panel').css({
    'top': header,
    'min-height': panelheight,
    'max-height' : Uiinnes
  });

});

Getting value in Uiinnes and i assigned to 'max-height' but no use.

Upvotes: 1

Views: 534

Answers (1)

BGecko
BGecko

Reputation: 251

I found this works pretty well.

//set panel to display below the header and height to listview height
var header = $('[data-role=header]').outerHeight();
var panel = $('.ui-panel').height();
var panelheight = panel - header;
var lVHeight = $('#panelListView').height();

$('.ui-panel').css({
    'top': header,
    'min-height': lVHeight-21,
    'max-height' : lVHeight-21
});

Not sure why $('#panelListView').height(); comes back longer than actual list view, but subtracted 21 and works fine. Probably has bottom margin.

BGecko

Upvotes: 1

Related Questions