jQuery Forum

<div data-role="controlgroup"> <a id="buttonA" href="index.html" data-role="button">Yes</a> <a id="buttonB" href="index.html" data-role="button">No</a> <a id="buttonC" href="index.html" data-role="button">Maybe</a> </div>

The buttons are rendered as a unit with the top and bottom ones rounded - nice! 

And all the buttons are the same height.

However, I would like to modify the contents of the middle button dynamically. For example, change the "No" to "Fred", with code like this:

 $("#buttonB").text("Fred");

But the size of buttonB changes when I do this, so that buttonB's height is less than the other buttons. This also causes buttonC to "jump" up to maintain the rendering of the controlgroup.

Any work-around for this? Am I setting the value improperly? 

I don't really need the button functionality of the the middle button, but I like the look of the control group rendering.

Again, thanks for any suggestions.