Jquery UI button positioning

Question

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.

provide some codes, I think, it could be a border, or padding/margin problem. but I could be wrong :) — Val, Commented Nov 8, 2011 at 10:53
I don't know if you are using firebug or not, but I find it very useful, especially for this things, your problem, seems to be on css, check on firebug, for firefox, or chrome developer tools, then you should check for, line-height, margin,padding, borders, I think one of them has problem with keeping the button on place, otherwise post a link to the website, i could debug it, n let you know where the problem is :) — Val, Commented Nov 8, 2011 at 12:58

AndyD · Accepted Answer · 2011-11-15 15:00:37Z

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!

noob · Accepted Answer · 2011-11-11 14:12:37Z

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

Stefan Ernst · Accepted Answer · 2011-11-11 12:37:55Z

0

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.

answered Nov 11, 2011 at 12:37

Stefan Ernst

2,7814 gold badges25 silver badges34 bronze badges

1

jsfiddle.net/jphellemons/qPDZX nothing wrong with this. just tested it in IE7
– JP Hellemons
Commented Nov 11, 2011 at 13:40

Add a comment |

Collectives™ on Stack Overflow

Jquery UI button positioning

3 Answers 3

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Related