CODEWITHSUNDEEP
javascriptjquerycss
Oliver Watkins
Oliver Watkins

Reputation: 13509

Trying to right-align a pop-up element in Javascript

I am trying to align pop-up elements in a header element in a table. Eventually the pop-up elements will provide functionality like sorting and filtering for my table.

Per default the pop ups align themselves to the left, but I would like to align them to the right :

enter image description here

My CSS code looks like something like this :

.Table .Popup {
    position:absolute;
    z-index:9999;
}

I would like to use the relative position instead of absolute (ie.relative to the header item), but I am not sure how. If I use absolute, doesn't that interfere with any other parent containers that have position set to absolute?

JSFiddle : http://jsfiddle.net/XJXuR/9/

Does anyone know how this can be done? JQuery or Javascript is fine. Thx.

Upvotes: 0

Views: 1417

Answers (3)

mrcasals
mrcasals

Reputation: 1171

Just add this CSS code:

tr.TableHeaderLabels td {
  position: relative;
}

.Table .Popup {
    right: 0;
}

I tried it on your jsFiddle and it works as expected :)

EDIT: Forked the original jsFiddle with my code: http://jsfiddle.net/p3khu/1/

Upvotes: 5

michaellee
michaellee

Reputation: 1352

Is this what you're looking for? http://jsfiddle.net/Vf2Td/

.Table .TableHeader td{
    border:1px solid red;
    margin:0;
    padding:0;
    position: relative;
}
.Table .Popup {
    position:absolute;
    z-index:9999;
    right: 0px;
}

Give the parent div the position relative. Then the popup which is a child needs a right: 0px; so that it hugs the right of the parent container.

Upvotes: 1

Styphon
Styphon

Reputation: 10447

Assuming that you are have relative position on the cells containing two, three, four, etc... you can just add right: 0; to your css above and that should right align them.

Upvotes: 0

Related Questions