Posicionamiento del botón de la interfaz de usuario de Jquery

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?

Muchas gracias

Código agregado:

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.

preguntado el 08 de noviembre de 11 a las 10:11

provide some codes, I think, it could be a border, or padding/margin problem. but I could be wrong :) -

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 :) -

use float: left; should fix it -

3 Respuestas

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) y width and other object specific css attributes can be used at it too (because of that it needs to be block)

Así que si te pones display a block to show the button again text-align wont have any effect on the button anymore so you need to set display a inline-block to show the button again

respondido 11 nov., 11:18

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!

respondido 15 nov., 11:19

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.

respondido 11 nov., 11:16

jsfiddle.net/jphellemons/qPDZX nothing wrong with this. just tested it in IE7 - JP Hellemons

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.