CODEWITHSUNDEEP
jqueryjquery-ui
Stefan Ernst
Stefan Ernst

Reputation: 2781

Jquery UI button positioning

I'm using jquery UI 1.8 - I apply the button functionality to my html button element by using the element.button() method.

Now everything works fine until I dynamically add another element above the button elements. The buttons stay in place as if they were position: absolute. But this happens only in IE8 / IE9. When you "mouseover" them they correct their position. Is there a way around this?

Many thanks

Code added:

This is the table I'm using. I tried with two floating divs earlier but tried to use the table instead to make sure my css wasn't causing the problem:

 <table style="width:400px">
 <tr><td class="subheader">Aufgaben</td>
 <td style="text-align: right">
 <button class="versions">Historie</button></td>
 </tr></table>

now I call the button method

$( ".versions" ).button({
     icons: {
         primary: "ui-icon-calendar"
     }
});

and this is how I add an element above the button, actually I just set an element from display: none to display: block

 $(".ui-state-highlight").css("display", "block");

now the result is as I described earlier, the button element just sits in the same position as every other element moves his position further down the page.

Upvotes: 3

Views: 3701

Answers (3)

AndyD
AndyD

Reputation: 895

It will be something to do with the css styles which get called in by jQuery ui, if you haven't already got these in place, make sure you have as they will all be tested!

This is how i would do it:

<div id="container" style="float: left; width: 100%">
<div id="left" style="float: left; width: 40%">
    <p style="width: 100%; height: 30px display: block"><a href="#" style="displaY: block">Button 1</a></p><!-- change to suit -->
</div>
<div id="right" style="float: left; width: 40%;">
    <p style="width: 100%; height: 30px; display: block"><a href="#" style="displaY: block">Button 2</a></p>
</div>

And then invoke your ui buttons - it's just an issue with how you've coded and styled it!

Upvotes: 1

noob
noob

Reputation: 9202

Yes the position is changing because the default is display: inline-block

jQuery UI is using this because it effects that text-align and other text specific css attributes can be used at it (because of that it needs to be inline) and width and other object specific css attributes can be used at it too (because of that it needs to be block)

So if you set display to block to show the button again text-align wont have any effect on the button anymore so you need to set display to inline-block to show the button again

Upvotes: 1

Stefan Ernst
Stefan Ernst

Reputation: 2781

Okay the issue has been solved by adding a <br /> under the element where I set display: block programmatically. I sometimes don't understand IE's box model.

Upvotes: 0

Related Questions