Setting of button's dimension

Question

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.

Do you want that item have that height all the time? If so you can assign it via CSS. — Twisty, Feb 14 '19 at 18:50
@Twisty yes I want one button to have bigger height. In fact the clickable area has the height I have set by `style="height:100px"` but the graphics of button didn't respect this setting. I don't know what you mean by assign it via CSS. I want to change only one button not all. I don't know how to set height of automatically created parent div of a button. — Vena Vena, Feb 15 '19 at 07:00

score 2 · Accepted Answer · answered Feb 15 '19 at 08:25

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

thx, almost works just have to change the `.on( "pagecreate",` to `.on( "pagebeforeshow",`. — Vena Vena, Feb 15 '19 at 08:58

Setting of button's dimension

1 Answers1