I'm working on some CSS for a navigation bar, and I need to use a max-height and overflow-y: scroll for the dropdown in order to make sure it will fit on the page. However, whenever I set the overflow-y property to scroll, it seems to automatically enforce that overflow-x must also be set to scroll, and as a result, submenus become hidden.
See the jsfiddle below for a working example
https://jsfiddle.net/5eyveyfz/
EDIT: I should clarify the use of my fiddle. The issue arises when you hover over the menu item titled "SubMenu 1" which shows the submenu in question. The expected behavior is that this submenu is visible without a scrollbar, but instead its behaving as though overflow-x was set to scroll
Changing these values will show the dropdown directly below the submenu heading:
#menu > ul {
overflow-y:scroll;
overflow-x:hidden;
max-height:300px;
}
.submenu {
position:relative;
display: none;
left:0;
top:0;
}
If you want to keep the left position you will need to make the container wider or change it to display:inline-block; without a width set for it to adjust to the size of the content.
While it is not doing this in your fiddle - is it possible the data you are populating in your actual build is forcing the table to overflow its width?
If so, change the container to overflow-x:hidden; in order to prevent the horizontal scroll bar.
Related
It is exactly what it is described in the title.
I have a parent which has overflow-x: hidden.
I have 3 rows which has some content overflowing.
In this scenario I am not able to programmatically scroll one of the rows.
JS Fiddle: https://jsfiddle.net/w6v1xydn/5/
But if I change the rows to have overflow-x: auto, programmatic scrolling works but it also shows up a horizontal scrollbar.
JS Fiddle: https://jsfiddle.net/w6v1xydn/6/
Question: I want to understand why it is happening like that. And how can I get the scroll to work without the horizontal scrollbar showing up? (And no hiding the horizontal scrollbar using css is not an option)
PS: Would prefer a no plain HTML/CSS/JS answer. No jQuery
Update 1: Parent positioning doesn't seem to affect this
It works if you move
overflow-x: hidden
onto the row-class instead.
And you really don't need the overflow-x: hidden on the container as every item you put inside it so far has its width set to 100%.
Look here: https://jsfiddle.net/cornelraiu/w6v1xydn/8/
Setting the children divs to position relative like this:
#container > div {position: relative;left:0}
and then in js:
document.getElementById("row1").style.left = '-50px';
This should work
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 am trying to make a div that looks like the MS Windows Command Prompt.
The div is resizeable, and has two children: a title-bar div, and a content div.
I want the content div to get scrollbars when it is larger than the window div. I want the title-bar to always be visible and not scroll, and not to be on top of the scroll bars.
http://www.webdevout.net/test?0vL interactively demonstrates my problem. Click on the content text and new rows get added. When enough rows are added for scroll bars to appear, they do not.
The content div has overflow:auto set.
Setting max-height or height on the content to 100% does not work because 100% doesn't account for the title-bar height, so the scrollbars appear after some rows have gone off the bottom. Also, the scrollbars, when they appear, obscure the draggable thumb on the outer div, stopping it being resizeable :(
Just change your resizable window to the child 'content' <div>. that way you're resizing the child <div> and the parent <div> resizes automatically to hold its contents.
Also, not sure if it was intentional but you have <div id ="Content" class="Content"> in your html and .Frame>.Contents { in your CSS (note the word content has an 's' in the CSS).
I believe this is what you're looking for:
http://www.webdevout.net/test?0wE
Add the following CSS:
.Content {
overflow: auto;
height: inherit;
}
Here you go: http://www.webdevout.net/test?0v-
Cheers ;)
I assume your HTML tree looks like:
Dialog
Title bar
Content
To make the Content scrollable, use the overflow CSS property
.content {
overflow: auto;
height: inherit;
}
Add the CSS property
overflow:auto;
Just add this to your CSS
overflow: auto;
was wondering if there was a better way to handle what I'm trying to do. I've made a basic drop-down navigation menu where the menu bars are li and class elements with a set height with the overflow property set to hidden, which then animate in height to reveal the 'drop down' portion of the animation when hovered over with the mouse. I found however that other web page elements (like main content) would then be pushed around and re-positioned when the menu elements collided with them. I stop-gap fixed this by making the affected elements absolute positioning, but I can't help but feel there's a better, more effective way of fixing this.
Is there any way to make it so the navigation elements for lack of better word get 'ignored' positioning-wise?
Here it is in practice - the first 'article' area has been made to be absolute positioned - http://gamearticlesite.bbdesigns.ca/index.html
the code:
Jquery
//When mouse rolls over
$("li.extend").mouseover(function(){
$(this).stop().animate({height:'250px'},{queue:false, duration:500})
});
//When mouse is removed
$("li.extend").mouseout(function(){
$(this).stop().animate({height:'35px'},{queue:false, duration:500})
});
CSS:
#headerNav ul{
list-style-type: none;
color:#efefef;
margin:0;
margin-left:75px;
padding:0;
}
#headerNav ul li{
width:125px;
height:35px;
float:left;
color:#efefef;
text-align:center;
margin-left:10px;
margin-right:10px;
overflow:hidden;
}
The correct answer was that yes, Absolute Positioning is the way to solve this, but to use it on the navigation menu. In the example posted, on the ul element, not the individual li elements that would animate as that could cause issues with positioning of the li elements within the ul element.
Setting the position to position:absolute for the ul and giving a z-index property to make sure it's 'on top' of the elements it clashes with made everything work out just fine.
Use
float:left
or
position:absolute
I would like to implement a vertical scroll in a drop down menu when the options in the menu exceed 8.Is it possible to achieve this by using Css properties alone?Please let me know how I should go about this
Set an "overflow: auto" property on the containing div. To collapse the div if it is less than 8 items then you will need to use the max-height: property. It will not work for IE6 so use a hack to get around IE6.
That is absolutely possible using CSS. All you need to do is set a fixed height on the menu (so set the height to however tall 8 items is) and give it overflow-y: auto. This tells the browser that if the fixed height is exceeded, a vertical scrollbar should appear.
on your ul li ul add the height you want for example height:80px; and overflow-y:auto;