Search code examples
jqueryjquery-uijquery-mobile

Setting of button's dimension


I am trying to set button dimension, but the dimension is only set for the active area but is not reflected by the ui.

Adding

<input type="button" value="Input Button" id="b1" style="height:100px">

will produce

<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-disabled="false" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" aria-disabled="false">
  <span class="ui-btn-inner">
    <span class="ui-btn-text">Input Button</span>
  </span>
  <input type="button" value="Input Button" id="b1" style="height:100px" class="ui-btn-hidden" data-disabled="false">
</div>

following code will set the dimension of button after any click in a div correctly

$(document).ready(function()
{
  $("div").click(function(){
    $("#b1").parent().css('height',100);
  });
});

but calling it directly in ready function is not working

$(document).ready(function()
{
  $("#b1").parent().css('height',100);
});

It seems to me that the parent div of button is not yet created when setting height is made in a ready function.

EDIT Confirmed by

$(document).ready(function()
{

  $("#b1").click(function(){
    alert($("#b1").parent().prop('id'));
  });

  alert($("#b1").parent().prop('id'));
});

Which will show that when executing document ready function the parent div of button is not yet created.


Solution

  • Your problem is that you are using jQuery Mobile and treat it as it is a common jQuery application.

    You should not use document ready event with jQuery Mobile as jQM will trigger code markup enhancement after document ready was triggered thus nullifying your CSS changes.

    You need to learn to use jQuery Mobile page events: https://api.jquerymobile.com/category/events/

    What you need to do is replace document ready with pagecreate event:

    $( document ).on( "pagecreate", "#yourPageID", function( event ) {
      alert( "This page was just enhanced by jQuery Mobile!" );
    });
    

    Read more about this issue here: jQuery Mobile: document ready vs. page events