Having some trouble with a very basic CSS problem.
I have a container that has a max-height of 655px. Now to the very right of that container is a fixed position container (it must be fixed position due to what I'm doing). The fixed position container has an absurdly large height.
It needs that height because it will be filled with content, that you'll ultimately see by clicking buttons and by some javascript. (changing the scrollTop)
I'm not 100% sure what I'm doing wrong, but I basically need only 655px of the fixed position container to show. I'm not really sure why this doesn't work the way I have it setup.
Check out the JS fiddle here: http://jsfiddle.net/BG2bu/
.tall {
background-color:blue;
position:absolute;
right:0px;
width:200px;
height:5000px;
}
I'm using this CSS to define the tall container. And I know if I change the position to absolute, it will constrain to the max height of it's parent container. I really need this container to be fixed though for other reasons. Is there any possible way to do this? Am I missing something simple here?
If this can be done with a JS/Jquery solution I'm definitely open to that.
Not sure this would be suitable for your needs but I've wrapped the .tall div with another container as position:fixed will not adhere to overflow:hidden in its container div.
http://jsfiddle.net/3DZ53/
Hard to tell if this suits your need or not, but could you...
.tall {
max-height: 655px;
overflow: scroll / hidden;
}
Related
I want two side nav bars that are affixed, but when I scroll down, my left navbar column moves to the left side of its parent div.
I know the issue is that affix changes the position to fixed so any floats would be irrelevant.
My issue should be clear in this
http://www.bootply.com/deaSbNAJ0b - don't mind the right side bar
I believe the answer lies in the javascript. My first thought would be to alter the affix function to use the parent element's position to calculate the affixed elements position after it triggers, but I wouldn't know where to start, javascript is still new to me.
Basically this question has already been answered here. As explained in the docs..
Use the affix plugin via data attributes or manually with your own
JavaScript. In both situations, you must provide CSS for the
positioning and width of your affixed content.
So in this case you have to set a specific width for the affixed element. When it becomes position:fixed it's removed from the normal document flow, and won't maintain it's normal percentage-based "unfixed" width.
You'll need to adjust the width for what works best with the other page content, keeping in mind that position:fixed doesn't work responsively with the Bootstrap columns. Here it's applied only on widths greater than 991px so that the columns can stack normally on smaller screens.
#media (min-width: 992px) {
.affix-top {
position: static;
margin-top:10px;
width:240px;
}
.affix {
position: fixed;
top: 10px;
width:240px;
}
}
http://www.bootply.com/FlGXADz2L3
I have a popup that's centered on my page using the following syntax:
position:absolute;
top: 50% !important;
left: 50% !important;
transform: translate(-50%,-38%); //well, slightly lower than center...
This works very well - unless the height of my popup is greater than the height of my current window. It doesn't happen often, but when it does, I can scroll DOWN to see the additional content, but I cannot scroll UP any further than the top of the window to see what's above, like in this example:
I want to say vertically center, but if the height of the div would cause the top of it to not be displayed, just affix the div to the top of the window instead
What code would I add into this to achieve that?
This is similar to another post on SO:
How to center an element vertically in css in a scrollable container
I'm not looking to center the item with a flex container however. I actually cannot use flex in this instance, because the div is a result of a javascript plugin and I can't add a separate parent div outside of this without a LOT of work. I am looking to center UNLESS the height of the div is too great - then i want it to affix itself to the top of the window.
If I could place some sort of div above this popup div that has a height of 1px and force the popup div never to go higher than it, that would be fine as well. I have a very specific reason for why I want the div at the TOP of the window when it's very long - I don't want it centered 100% of the time (which is what the other post does.)
I've also tried using a pseudo-element like so:
.popUpBody::before {
content: " ";
height:50px; //this needs to be dynamic based on the height of the parent
width:100%px;
display:block;
}
as it moves the rest of the div down - but I'd need to find some way to use a dynamic height - it might be 300px, or it might be 5000px. This also doesn't seem like a very good way to do this.
I could make it so the height of popup div is always centered by taking out the second transform variable: transform: translate(-50%); - and this would be a last resort, but I would really like for the div to affix to the top of the window when its height is larger than the window itself - if this is possible.
Javascript/Jquery is fine if I need to use that to add dynamics.
I have this off-canvas navigation: http://codepen.io/anon/pen/IcBis.
How do I make it scrollable like this one: http://codepen.io/jdigi/pen/nafJc ?
I only know how to make mine scrollable with scrollbar, but it still acts as a seperate element, rather than merged with rest of the body. Thanks!
Change the menus positioning from fixed to absolute. And to achieve full height, set the body's positioning to relative.
Updated code
You've (accidentally?) applied the fixed CSS rule to the #menu element.
The fixed CSS rule "nails" a block element to the viewport and keeps it from being scrollable.
This is ideal for watermarks but, I guess, not what you've intended.
Replace
#menu {
position: fixed;
with
#menu {
position: absolute;
That'll fix your problem.
I'm trying to use this plugin Galleria in its responsive mode, which basically means it will re draw itself based on its container size as the window re-sizes. The demo on the link I've provided shows a really good example. You can see that, as you resize your window, the whole gallery adjusts accordingly. Now my issue is, the plugin won't let me initialize the gallery unless a height has been specified for the DOM element that is used as its container. This means, I've had to write a whole lot of javascript code to respond window resizes - it destroys the point of it having a responsive mode quite a bit - but in the website above, nowhere can I find an explicit height specified. Can someone explain to me where I'm going wrong?
I figured it out by myself. Posting my answer -
When initializing the gallery - specify your height in percentages - as below. I'm guessing it takes 50% of window height as its value in this case. This way, you don't need to explicitly specify heights anywhere and it works as advertised
Galleria.run('#gallery', {responsive:true, height:0.5, debug:false});
Galleria needs a height to initialise correctly. You can do this either via CSS or JS.
If you would like it to fill the width and height of the screen, I would recommend setting a width and height of 100% via CSS. And its parent container needs to be 100%. See below.
**JS:**
Galleria.run('#galleria', {
responsive:true,
showCounter:true,
thumbnails:false,
trueFullscreen:true,
});
**CSS:**
#galleria{
width:100%;
height: 100%;
position: fixed;
z-index: 9999;
top:0px;
bottom: 0px;
}
body,html{
height:100%;
width:100%;
}
The height option ( if it's < 2.0) is relative to the width of the container. So height:0.5 would have a height that is half the width of the container (w=2, h=1).
height:1.5 would result in (w=2, h=3)
To keep it responsive you can use max-width rather than width when styling the container.
If the height option is set to 2.0 or more, it is interpreted as pixels. So height:2.0 will only be 2px tall.
I want to describe my idea first, check the fiddle here:
There are two divs, #left and #right, #left has a fixed width and both are floated left. Container division has no fixed width and can be resized in my design. The requirement is that #right cannot be shifted to next line. Width of #right will be automatically adjusted to the container division and overflow text will be hidden. All of the three divisions have fixed height.
In the fiddle mentioned above, I set #right 50% width to make it adjusted, which is not that perfect. The container division may not be full and shifting problem still occurs.
I can implement the layout with javascript to adjust the width of #right, but is there any css solution with the help of min-width or anything else?
Thanks a lot.
is this what you want it to be??
http://jsfiddle.net/N3jhV/
Please dont hesitate to correct me
Something like this? http://jsfiddle.net/remibreton/4qLmq/
This solution will work only if the #left element has fixed width.
Is this what you are looking for ? http://jsfiddle.net/As7Hz/14/
How about this version: http://jsfiddle.net/As7Hz/18/