disclaimer: I know that fixed elements are not ment to take theire own space in the flow of a page but i think i need it anyway.
Question:
I try to have my nav in a Grid which has the height of 100vh When I press the trigger element the whole grid slides to the side and reveals the Navigation by adding a class with js. I want the whole viewport container to be in a fixed position but as I set it to position: fixed; all of the content below will overflow the container as it should by default behavior.
is there a way to "clearfix" this overflow?
I aswell want to hide it again with a "onscroll" event, so just changing the backgroundcolor is no option for me.
One way could be to change the overflow permission in the container with something like:
someDiv{
<!---Your nav should be wrapped with this-->
position: fixed;
overflow: hidden !important;
}
Then, add an onClick to your nav so when the nav is accessed, the overflow is changed
document.getElementById('someDiv').onclick = function(){
document.getElementById('someDiv').style.overflow = 'visible';
}
Not quite sure if this is what you are after.
Related
My biggest problem here is to express what I want, so please free to alter the formulation / suggestion correct wording for things.
On mobile I wish my page to be only vertically scrollable (page width and view port width are the same. A bug is causing an element adding more width than it should. I have identified the culprit element, when I set this element style to "display:none;" the display is correct (no horizontal scroll), when I don't I get an horizontal scroll.
To make it clear, with ".culpritElement {display: none}":
With culpritElement visible:
culpritElement is generated with some inline style by a third party library that I don't want to tweak. Is there a CSS directive to set to make the element visible but out of the positioning flow of the others (and page size computing).
You could set .culpritElement { max-width: 100vw; overflow-x: hidden; }
Or you could apply the above css style to its parent element
My problem is when popover comes out it always stay inside of scroll. So that when I need to see popover content I need to scroll down then I can see it. I use z index. But I can not show the popover out side of scroll. I am using angular popover.
If I use position fixed instead of absolute it always open aspect of window and I don't want it.
This is an aspect of how CSS works. You are using incompatible CSS techniques. A child element (popover) that is absolutely positioned cannot be rendered outside a parent element boundary with overflow restrictions (hidden or scroll). The overflow property tells the browser to enforce rendering restrictions on all child elements except ones with "fixed" position.
If you show your code, we can probably help you achieve your goal with some modifications.
Edit
With the example provided, all that needs to be done is to add a CSS rule to the .sectionone element for position: static
.sectionOne {
position: static; // solution
overflow-x: scroll; // in example provided
}
.table {
width:1000px; // in example provided
}
I've encountered a problem when using a html5 number input inside a div with position: absolute; overflow: auto on Chromium Version 23.0.1271.64 (165188)
Normally scrolling the mouse wheel on a focused number input increments and decrements the value in the field. But inside a div with position: absolute; overflow: auto, the div contents just scroll unless there is nowhere to scroll.
Fiddle: http://jsfiddle.net/9M9nx/7/
Is there a way to always let the input element receive the scroll event?
I think you're going to have to hack this one. This hack works:
http://jsfiddle.net/9M9nx/12/
Here I've used jQuery to change the overflow property of the scrolling parent, based on the focus and blur events on the number input.
$('.scroller input[type=number]').focus(function(){
$(this).closest('.scroller').css('overflow','hidden');
});
$('.scroller input[type=number]').blur(function(){
$(this).closest('.scroller').css('overflow','auto');
});
The problem I'm having is I have two divs at the top of my page, one contains a repeating blue background, the other contains a background image.
I have to set the height of both divs in order for them to expand vertically, the don't expand with the content. I have that form on the right hand side set to overflow. Which I believe is what's causing the problem.
I have tried not having the height css in the code, but it still won't expand vertically.
In order to get the backgrounds to even show up I have to manually set the height.
This is the page: http://www.repipespecialists.com/landing/google/repiping.html
This is the CSS code:
#top_container {
width:100%;
height:1040px;
background-image:url(../images/top_bg_repeat.jpg);
background-repeat:repeat-x;
background-color:#83b4e9;
}
#top_header {
width:1200px;
height:1040px;
background-image:url(../images/header_bg.jpg);
background-repeat:no-repeat;
background-color:#83b4e9;
margin: 0 auto;
}
I agree with WDan in that the issue you are having is due to your use of float: left and float: right on the left_content and right_content div elements.
When you use float on an element, you are basically removing it from the normal flow of the document. By default, elements will appear on the page in whatever order you specify in the markup. Using float (or things like position: absolute) will remove the element from this "order", or "document flow", such that the floated element will be ignored when placing other elements in their default position on the page.
Since the space used by these floated elements are ignored, the top_header div does not take the floated element's size into account when determining its own size. This is why your div is not automatically expanding.
Another alternative to float is to use display: inline-block. Here are some links you can read to learn more about the differences:
http://www.ternstyle.us/blog/float-vs-inline-block
http://www.onderhond.com/blog/work/inline-block-vs-float/
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
I think the problem is you use float in 'left_content' and 'right_content'
Use “overflow: hidden” in the wrapper div.
recently i asked this question: overflow (scroll) - 100% container height about how to achieve a vertically scrolling div with variable height.
a very helpful user provided a solution using absolute positioning and height:100%, here: http://jsfiddle.net/TUwej/2/. in this fiddle, you can see the basic desired behavior - the scrolling div will fill the height of the main container as is determined by the content in the '#main' element.
i modified this somewhat and used top:0 bottom:0 instead of height:100% to accommodate an element above the scrollable area. the modified version can be seen here: http://jsfiddle.net/N6muv/3/ (i realize there is a little extra markup and class definitions that are empty, and an adjacent sibling combinator that appears redundant - these are vestiges of the actual structure)
everything is fine, except that i had to supply a fixed top coordinate for the scrolling div (note the top:120px declaration for the '.sidebar-list' selector). i'd like this to be relative to the '.sidebar-options' element above it, so that the options container above can have any number of options and the scrollable div will position itself appropriately. using fixed coordinates, if any options are added or removed, either overlap occurs or unnecessary space develops - i'd like to avoid this. the exact number of options that should appear varies between views.
i had thought to wrap the scrolling div in a relatively positioned container, but doing that creates a conflict with bottom:0 no longer indicating the height of the main '.wrapper' container (which it should do). similarly, using height:100% will use the computed height of the '.wrapper' container so the scrollable div will extend beyond the boundary of the '.wrapper'.
is there a way to keep the functionality shown in the second fiddle, but with the top of the scrollable div relative to the bottom of the options div (which will be of variable height)?
thanks in advance for any suggestions.
EDIT: S.O. asked if i wanted to start a bounty, so i did (first time) - hopefully 100 pts isn't considered too low. still looking for a no-script, pure-css solution that doesn't involve fixed coordinates or dimensions for the y-axis (width and left assignments are OK). thx
UPDATE:
Import JQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
New Demo:
http://jsfiddle.net/Mutant_Tractor/N6muv/28/
Add this nice little JQuery script to your page:
var contentColHeight = $('.content').height();
var optionColHeight = $('.sidebar-options').height();
var newHeight = contentColHeight - optionColHeight;
$('.sidebar-list').height(newHeight);
OLD
How does this suit your needs?
http://jsfiddle.net/Mutant_Tractor/N6muv/4/
I changed position:absolute; to position:relative and added a static height:190px as well as adding background:pink; (so the bg always looks right)
You can try adding and removing Options from the list above to demo this.
Full code:
.sidebar-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background : pink;
}
I believe you should remove absolute positioning on the inner elements and try overflow:auto.
You need to define the height of the sidebar list coz you have to set this content to scroll-able and min or max height must be defined. And you could set .sidebar-list{position: relative;} See this Fiddle
Edit Your .sidebar-content should also be relatively positioned See this Fiddle whatever your 'options' content contains.