[globalgraffiti]

Im trying to Add a value to the existing height of a scrollbar window so that the content grows the window grows. I have a button that appends a <li> element and makes the list grow with each click.

so if my “Content Area Height” is 500px by default with each click i want it to grow +50px.

Issue im having is that the height gets reset every time i interact with the UI.

my code works from what i can see in firebug, but as soon as i interact with UI the height reverts back to the set value in the mobione studio propteries panel for “Content Area Height” 500px.

function clickme() {

 // Trying to auto update the height
$('#m1-form-landing-screen3-panel4-scroller').height( $("#m1-form-landing-screen3-panel4-scroller").height() + 50 );
 
 // or 
 $('#m1-form-landing-screen3-panel4-scroller').css( "height", "+=50px" );
}

[Unknown Author]

var panelHt = 150 + itemCnt * 44;
$('#m1-page_name-panel1-scroller').attr('data-layout-content-height',panelHt);

-1tc

[globalgraffiti]

I tried your method but it appears itemCnt is not defined in your example. Can you adjust your code to include how you are defining that variable.

If any support members can take a stab at it i would appreciate it.

Thanks
GG

[support-octavio]

Hi globalgraffiti,

Your requirement looks very similar to the one in this thread: http://www.genuitec.com/support-genuitec/viewtopic.php?p=13511#p13511

Please take a look at the updateListHeight function in the _custom.js file attached to the reply and let us know how it goes for you.

[globalgraffiti]

The code worked great! – it works both ways for updating the height on a Panel, when the user adds / removes a <li> item from list.

FYI // phoneui.preprocessDOM(‘#MY-CONTAINER-DIV’); // THIS WAS CAUSING PROBLEMS SO I REMOVED IT AND AFTER I WAS GOOD TO GO.

function RefreshSummaryList()
 {
//   ORDER SUMMARY
 
  updateListHeight(); 
  
 };


function updateListHeight() {
  console.log("updateListHeight", (new Date()));

  var $scroller = $('#m1-form-landing-screen3-panel5-scroller');
  //Update panel's content height, set the ht value on the panel's 
  //  scroller <div> data-layout-content-height attribute.
  var liCount = $("li", $scroller).length;
  var panelHt = 100 + (liCount * 44);
  // alert(panelHt);
  // $('#m1-list-panel1-scroller').attr('data-layout-content-height', panelHt);
  $scroller.css("height", panelHt + "px");
  $scroller[0].myScroll.refresh();
}

[support-octavio]

Hi globalgraffiti,

Glad you get it working, closing thread.

[Author]

Posts