Auto height on element with only relatively positioned children - javascript

As you can see here you need to apply a static height to #wrapper because else the div won't contain its children. (here is the fiddle) This is quite logical. I would want, however, that I can give #wrapper an auto height by which it can contain multiple rows of relatively positioned elements.
I suppose I could add an other wrapper around the individual items and position them staticly? But I would prefer to not add more HTML. If needed a JS/jQuery solution is possible.

There is an float is your child DIV's so you have to clear it's parent & remove height from it. write like this:
#wrapper {
background-color: white;
min-height: 360px;
margin: 50px auto;
overflow: hidden;
padding: 10px;
width: 1008px;
}
Check this http://jsfiddle.net/y5nYN/16/

Related

Dropdown centered underneath parent with overflow: hidden

I have a nav bar which has a string of text for a link that opens a dropdown. The parent of this link has overflow: hidden to allow me to truncate the string incase it gets too long. However, I want the dropdown to be positioned absolutely underneath and centered regardless of the width of the parent. Since I'm using overflow: hidden, the dropdown gets cutoff. I want to keep the positioning of the dropdown as well as the overflow properties.
Is there a CSS fix for this? I know I can't ignore the parent's overflow property, but I'd rather not use position: fixed and manipulate margins with JavaScript if possible.
I've made a simple fiddle here
Thanks in advance!
Unfortunately there is no way in CSS to make a child of an overflow: hidden element show its contents outside the parent borders, you must change the hierarchy.
If that is not possible, you could add padding at the bottom to .nav-pull-left that is the size of your dropdown, although that's a rubbish solution..
.nav_pull_left {
width:auto;
height:50px;
padding-bottom: 80px;
overflow:hidden;
float: none;
border: 1px solid black;
white-space: nowrap;
}
You could also use JavaScript to dynamically update the height of your parent container when the dropdown shows but once again, reordering the hierarchy is best and cleanest.
If that is the way you want to go, let me know and I can help :)
May I suggest the following, where you change your css as follows.
.nav_pull_right {
min-height:50px; /* changed height to min-height */
...
}
.nav_pull_left {
min-height:50px; /* changed height to min-height */
...
}
.my_dropdown {
position: relative; /* changed absolute to relative */
margin: 0;
margin-left:-87px;
/* top: 2em; */ /* removed top */
left: 50%;
width: 170px;
z-index: 99999;
border:2px solid #929292;
}
With this your container overflow is kept and gets pushed down, the drop down menu is centered.
Is this something you could use?
Here is a fiddle demo

Jquery mouseover dynamic p tag expansion

[this is another question related to something i posted earlier]
I have a p tag inside an anchor, there many be a variable number of instances of this during the loop. My goal is to on hover make the p tag expand and show more information. I have this so far in terms of mouseover.
$('.boxOPToneplustwo').mouseover(function (e) {
console.log("in");
$('p', this).addClass('popupHighlight')
});
I need to edit this code to allow the p tag to increase its height in relation to the amount of text in the element. if it needs three lines it will expand that amount and vice versa.
.popupHighlight {
height: 3.6em !important;
}
As you can see it is hard coded at this point to a certain height, is there a away to get around this issue?
you can do this by setting some values in css
.popupHighlight {
min-height:100px;
overflow:hidden;
}
it will expand according to the size of the content
Hey this thing is very easy to do.
Here is a fiddle
http://jsfiddle.net/robbiebardijn/vAyn9/
.boxOPToneplustwo{
background-color: red;
height: 1em;
line-height: 1em;
position: relative;
overflow: hidden;
transition: height 1s ease
}
.boxOPToneplustwo.popupHighlight{
height: 3em;
}

Position CSS element based on height of a floating element

Alright, this one's tricky.
To begin, this fix can be in JS or CSS, doesn't matter as long as it works.
Here's the issue:
I have a site with a float:right sidebar, and the footer's position is based on the #content's height. However, when the #content is shorter than the sidebar, the footer overlaps the sidebar and doesn't look very good.
What I need:
a script that detects the HEIGHT of a certain element (in this case #sidebar) and modifies the min-height of the #content to match
OR
a script that detects the HEIGHT of the #sidebar and positions the footer accordingly.
For a live version of this, check http://wizardcm.com/portfolio
The reason for not using a fixed height for the #content (or for the position of the footer) is that Tweets are never the same length, and other pages have extra sidebar widgets that add to the height.
1.put your #sidebar before #content.
2.remove position:absolute from #sidebar.
3.remove float:left from #content.
4.remove overflow:hidden from #content.
What I need: a script that detects the HEIGHT of a certain element (in
this case #sidebar) and modifies the min-height of the #content to
match
Make sure you link jQuery in your head tag... example:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Than place the following code within a <script> tag below it:
$(window).bind("resize", function(){
var $sideHeight = $("#sidebar").height();
$("#content").css({minHeight: $sideHeight + 'px'});
}).trigger("resize");
This is a problem with your css layout, you do not need a JavaScript solution. You have floats and absolute positioning on your sidebar which takes it out of page flow.
Your classes should be:
#content {
float: left;
margin: 0;
min-height: 300px;
overflow: hidden;
position: relative;
width: 770px;
}
#sidebar {
float: right;
font-size: 10pt;
margin: 10px 0 0;
padding: 0 0 10px;
right: 40px;
width: 300px;
}
#content .page, #content .post {
padding: 10px 15px !important;
}
And everything falls into place.

CSS to span column height to window height?

I want to make the left and right column span to the window height and give the user a scrollbar to independently scroll the two columns. How can I do this?
I've been trying min-height: 100% and height: 100% but it doesn't seem to work no matter where I use it.
I setup a JSFiddle here: http://jsfiddle.net/Legend/t5cUA/1/
EDIT: I don't want to add position: fixed. I still want the columns to align if the user reduces the width of his browser window.
You need to make sure all the previous wrappers are set to height: 100% and overflow: hidden. Something like this fiddle shows (may need some tweaks depending on what exactly you want):
html, body, .container-fluid, .container-fluid > .row-fluid {
height: 100%;
overflow: hidden;
}
.span-fixed-sidebar {
height: 100%;
overflow: auto;
}
Update from Clarification
You just need to continue the process deeper. The point is that you need to set the scroll on the actual column element(s) you want to scroll, and have everything else explicitly set to the height: 100% and overflow: hidden that wrap that column. Probably this for you:
html, body, .container-fluid, .container-fluid > .row-fluid, .span-fixed-sidebar {
height: 100%;
overflow: hidden;
}
.span-fixed-sidebar > div {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
It you want to scroll content of left and right column independently you have to add
overflow: auto;
to it's CSS. Also, note, that 100% height can be set to children of relative or absolute block, or to children of block with defined height.
I'm not sure if I understand the question but if you want to span to the window height and put a scroll if the column is higher than the window:
.column {
overflow: auto /* scroll */;
height: 100%;
}
EDIT: Yes, overflow: auto will be a better option if you don't want to show a scroll if the column is not high enough.

How to make Wrapper div contain only non-overflowing divs

I have a div containing divs with content.
The outer div has a dynamic width (e.g. 80%).
The inner divs have a fixed width (e.g. 100px).
The problem is that i want to show only so much inner div's so that no inner div "overflows" / "is cut" as in figure 1.
I also want to "distribute" the "free" space as margin between the inner divs equally distributed, as shown in figure 2.
I hope somebody understands my problem, and knows how to realize this with css and as less javascript as possible :)
P.S.: If it is easy to do, would it be possible to have the first and the last div have a max. margin to the outer borders ?
Started this before you edited your question with more info, but I believe that the one missing piece you're after is the text-align: justify in the 'outer'.
.outer{
background: red;
width: 80%;
overflow: hidden;
height: 48px;
text-align: justify;
}
.inner{
background: blue;
width: 100px;
height: 40px;
margin: 4px;
display: inline-block;
}​
Here's a fiddle.
Not entirely sure what you mean by max-margin, but it sounds like that could be achieved by giving the container a fixed padding on the left and right.

Categories

Resources