can't set button's left and width CSS properties?

can't set button's left and width CSS properties?

Hi all,

I'm trying to develop a music-reading quiz game for my daughters, using jQuery Mobile.

The part I'm having trouble with is the piano keyboard. With "ordinary" html buttons, you can set the left/top/width/height css properties using jQuery's .css() method. But with jQuery Mobile, that doesn't seem to work. Anybody know how to move buttons in jQuery Mobile?

Here's an excerpt of the initial HTML for the keyboard buttons:

  1. <div id="kbdC2E" class="keyboard">
  2.     <button class="pianoKey whiteKey" id="wk1" />
  3.         <button class="pianoKey blackKey" id="bk1" />
  4.     <button class="pianoKey whiteKey" id="wk2" />
  5.         <button class="pianoKey blackKey" id="bk2" /> <!-- etc. -->


And here's the javascript code to move them into position:

  1. for (i = 0; i < numWhiteKeys; i++) {
  2.     var keyLeft = whiteKeyWidth * i;
  3.     var $key = $('button#wk' + i, $div).parent();
  4.     $key.addClass('pianoKey whiteKey')
  5.     .css({
  6.         // position: 'absolute', // from pianoKey class
  7.         left: keyLeft,
  8.         top: gap,
  9.         width: whiteKeyWidth,
  10.         height: whiteKeyHeight,
  11.     });


Note that we use the parent of the button#wk1 key, because jQuery Mobile has decorated our<button> HTML as:

  1. <div data-theme="c" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c">
  2.   <span class="ui-btn-inner ui-btn-corner-all">...</span>
  3.   <button class="pianoKey whiteKey ui-btn-hidden" id="wk1"></button>
  4. </div>


(You can verify the details by going to the web page and using a DOM/CSS inspector.)

When I run this, the result is that the parent div receives the added classes, by means of which it becomes position=relative; it also receives the top and height properties that I set:

  1. <div data-theme="c" class="ui-btn ui-btn-up-c ui-btn-corner-all ui-shadow pianoKey whiteKey"
  2.      style="top: 72px; height: 90px; ">
  3.   <span class="ui-btn-inner ui-btn-corner-all">...</span>
  4.   <button class="pianoKey whiteKey ui-btn-hidden" id="wk1"></button>
  5. </div>


However it does not receive the "left" and "width" properties that I set. As a result, all the keys end up on the left side of the ancestor div, and they have the wrong width. Can anybody tell me how to effectively set the left and width properties?

Thanks...

For further details, the web app in progress is here.