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 :
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.
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/
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.
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.
Related
I am trying to make the sidebar in this example sticky when scrolling, for both situations (when you are using a big display and the sidebar is visible, as well as on mobile devices when you toggle the menu manually). I have followed various similar answers on this site but I could not apply them to my particular situation. For example, the following did not help:
#sidebar.affix-top {
position: static;
margin-top:30px;
width:228px;
}
#sidebar.affix {
position: fixed;
top:70px;
width:228px;
}
Any ideas how to do it? Thanks!
adding
#sidebar .nav {
width: 95%;
position:fixed;
}
works for me
fiddle: http://jsfiddle.net/PrakharThakur/afrbbsh3/
I have some expanding content in my #main (or) #panel (got this from a template) div, but when you expand it, it pops to the unknown, under the page...
How could I make my main div expand with my content.
CSS
#main
{
position: relative;
overflow: hidden;
}
I also have some JS/Ajax scripts that expand the page to the right size when you switch page, could they affect...?
See live demo here! (The (i) button)
The divs expand when you click on them.
A few times it worked on another computer, but very randomly..
Tell me if you need the scripts or more code.
Basically, everything's wrapped in .main -> .panel
Simple: When the div is expanded, expand the main div's height to fit it.
.panel
{
position: relative;
display: table-cell;
width:100px;
vertical-align:middle;
}
The problem is not with the main div, but the class panel.
.panel {
padding: 3.5em 2.5em 3.5em 2.5em;
position: absolute; // I'm the problem
top: 0;
left: 0;
width: 45em;
}
This is also a problem.
#me .pic img {
position: relative; // I'm evil
display: block;
height: 100%;
}
My debugging may have been awry though, since it doesn't want to play nice and stick with what I want it to do sometimes.
Let me know if this helps in some way, and if you need help debugging anything from there.
EDIT
Your problem may just be a matter of recalling the Script that you use to re-size the main div when the script that displays the hidden divs content goes off. That should re-size the page to fit the new content.
I can't locate where this script goes off, so if you can provide it, I could figure it out.
If your question is actually "how do I make my main div's height change dependent on it's contents" then all you need to do is remove overflow: hidden; from the css class.
I have a complex HTML application, so unfortunately cannot really provide a code sample. We are trying to get the div (highlighted in red) to fill the remaining vertical space (see image).
The application consists of a header (in black), a sidebar on the left which can be dismissed or resized (note: the horizontal components resize correctly). To the right of the sidebar is another div (mainDiv). mainDiv contains a div at the top for the controls, and a div underneath it for the table of data (highlighted in red).
This table can potentially contain lots of data, so it needs its own scrollbar if the data doesn't fit on the screen.
We just want the table to fill all of the available horizontal and vertical space. We just can't seem to make it work.
We have created a jsfiddle example to demonstrate our layout as best we can. This can be seen here. We just want this div (in jsfiddle the div is called "tablewrap") to take up all of the remaining space.
Code (from jsfiddle) is as follows:
html
<div class="header">Header</div>
<div class="sidebar">This is the sidebar</div>
<div class="tablewrapper">
<div class="tableheader-controls-etc"></div>
<div class="tablewrap">table</div>
</div>
css
.header { height: 50px; background:black; color:white; }
.sidebar { height:100%; position:fixed; width 200px; background:gray; color:white; }
.tablewrapper{ float:right; width:75%; border:1px solid; margin-top:30px; margin-right:30px;}
.tableheader-controls-etc { height:150px; background:blue; color:white; }
.tablewrap { height: 200px; border: 2px solid red; width:100%; overflow:auto;}
If anyone can provide a solution that would be great. We would prefer CSS but can cope with Javascript.
Thanks,
Phil
The trick is to set position: absolute, then adjust the top, bottom, left and right properties as needed. See fiddle and explanation.
.tablewrap {
position: absolute;
top: 240px;
bottom: 0;
left: 150px;
right: 40px;
height: auto;
width: auto;
...
}
You can try this:
.tablewrap { height: 200px; border: 2px solid red; width:100%; overflow:auto; min-height:300px}
(Set the min-height as you want)
Well, it's time to say what you probably don't want to hear hehe: you can't do this with CSS.
You have to use javascript in order to find out two things:
Viewport height
Controls div height
Once you know those two heights, you can set your table height to:
finalHeight = viewport - (controls+header+footer)
If header and footer have also dynamic heights, use javascript to calculate them.
You will also need to recalculate this height on window resize. And of course your layout won't work if javascript is disabled.
Im using a float: right on my website. I want to make that div 100% of the window height minus a 10px margin. I want the height to resize with the page.
I also want the image in it to sit at the bottom of the 'container' minus 10px padding.
I've tried adjusting everything, and am sure its something in the code conflicting but i just can't work it out.
Thanks for any suggestions in advance.
I suggest you use absolute positioning instead of floating for this, you can make elements expand by setting for example top and bottom at the same time.
Absolute positioning could work for the image as well if you set its bottom to 10px (its offset parent will already be the right container, because any position other than the default static makes the element an offset parent).
Quick example:
/* this makes your body take up the whole screen */
html, body { height: 100%; }
/* the positioning magic */
#right { width: 100px; position: absolute;top: 10px; bottom: 10px; right: 20px; }
jsFiddle Demo
​UPDATE: and an updated jsFiddle to show an example on putting another element in the container and positioning it to the bottom.
#image { position: absolute; bottom: 10px; left: 20px; }
I have such a sketch: http://jsfiddle.net/challenger/upcZJ/.
I found an article http://www.jankoatwarpspeed.com/post/2008/07/09/Justify-elements-using-jQuery-and-CSS.aspx which explains how to adjust label widths relative to the widest one.
But I can't do the same. What have I missed? I've tried do the thing inside an accordion tab and inside aside division.
Thanks!
Your label elements are display: inline (the default) so the width property does not apply.
Set display to something else (e.g. inline-block)
You forgot to add the CSS which was mentioned in the article
label, input[type="text"]{
float:left;
display:block;
}
label
{
margin-right: 5px;
}
.field{
width:100%;
overflow:auto;
margin:5px 0px;
}