I've got a list with certain height, and need to make it scroll to show the rest vertically.
So I added overflow-y: hidden; to the list.
But the submenu can't be visible, and a horizontal scrollbar showed.
Is there any solution?
code here
Simply increase the width of the .wrapper
.wrapper {
margin: 20px;
background: gray;
color: white;
width: 400px;
height: 100px;
/* I need overflow-y auto,but I also need to display the submenu*/
overflow-y: auto;
overflow-x: visible;
}
Related
Codepen link: [removed for privacy]
(Ignore the search button, I am mainly concerned with results displayed within it's parent element of #results_container).
On the actual app, results will be generated based on a search term,
I have the overflow set to "scroll", but as you can see, the bottom result still overflows. What gives?
#results_container {
height: 430px;
overflow: scroll;
margin-top: 5px;
}
The unwanted "bottom result still overflows" seems to be due to the height: 100%; CSS definition for the #wrapper div.
If you remove "height: 100%; from #wrapper, I think you'll see the results you were looking for.
Also, notice that the #wrapper div expands and collapses as the browser's display is expanded and collapsed. Once the height: 100%; is removed from #wrapper, the #wrapper height does not change.
I made a fork from your codepen.
#sidebar {
border: 1px solid black;
width: 40%;
margin-top: 22px;
height: 93%;
overflow-y: hidden;
}
#results_container {
height: 430px;
overflow: auto;
margin-top: 5px;
}
Here the full example: codepen fork
I have a box with content-based width (position: absolute). But "overflow-y: auto" inserts a scrollbar that doesn't make container wider unlike the "overflow-y: scroll". I need auto overflow and auto width including scrollbar. Is there a solution?
.container {
position: absolute;
max-height: 100px;
overflow-y: auto;
}
http://jsfiddle.net/mw552cxf/
try to add overflow: hidden; to each item :
.item {
border: 1px solid blue;
overflow: hidden;
}
Edit : ok so the solution who sweets your need wold be this , use word-wrap:
.item {
border: 1px solid blue;
word-wrap: break-word;
}
Live Demo
Live Demo 2nd solution
How about adjusting the width of .container in the CSS?
I'm trying to mimic the behavior of overflow-y:hidden to overflow-x, but it doesn't behave the same way. overflow-x:hidden doesn't allow to scroll (by dragging the mouse).
See: http://jsfiddle.net/Gxm2z/
#container {
width: 300px
}
#modules {
height: 50px;
padding: 5px;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.module {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background: #ddd;
}
How can I achieve the same result without a scroll bar? I'm ok with a javascript/jQuery plugin.
The plan is to use arrows, and maybe a custom scrollbar
this is my solution CSS based - simple and nice on all devices, no need for additional JS.
add fixed height and overflow hidden to parent element (in your case #container)
enlarge height of #modules - this create enough place hidden under parent element for scrollbar (because of smaller #container height, this place is invisible)
using -webkit-overflow-scrolling:touch; is good choice, make nice behavior on iPad and iPhone
#container {
width: 300px;
height: 60px;
overflow: hidden;
}
#modules {
height: 90px; /* 40px - more place for scrollbar, is hidden under parent box */
padding: 5px;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
live demo: http://jsfiddle.net/s6wcudua/
#modules {
height: 50px;
padding: 5px;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
display: none;
}
}
This only work in webkit based browsers.
You could try using the ::-webkit-scrollbar pseudo element, like shown here.
http://iscrolljs.com/
Best Javascript custom scrollbar available, in my opinion. It will work great in Mobile, IE9+ and modern browsers. Plenty of options and callbacks. And yes, you can disable the visible scrollbar, but still retain horizontal scrolling.
I'd like the scrollbar within my "article" DIV to be always visible. I tried the code below but without success (scrollbar only shows up when I start scrolling down). I'm using safari latest version. Thanks
.article {
float: right;
text-align:justify;
width: 400px;
height: 450px;
padding: 60px 82px 49px 82px;
position: relative;
z-index: 15;
margin-top: 90px;
background: #fff;
/* max-width: 25%; */
overflow:scroll;
overflow-y: scroll;
}
Try using
overflow-y: scroll !important;
It's used to cover IE errors, but might give it a shot. Have you tried other browsers?
I am trying to prevent the scroll bar from appearing when the div .boxB overflows and I am unsure why my code is not working. In other words, I am trying to remove the horizontal scroll bar only when the browser width is less then the width of boxB. This way, the scroll bar will only appear when the browser width is less then .boxA.
http://imgur.com/yQDFG
The light blue represents the screen. The yellow is a background div, and the aqua is the foreground div where its width exceeds the screen width. In this case, I do not want the scroll bar to appear. I have used overflow-x:hidden but that did not do the trick.
HTML:
<div class="boxA">boxA
<div class="boxB">boxB</div>
</div>
CSS:
.boxA {
background: yellow;
width: 800px;
height: 600px;
}
.boxB {
background: aqua;
width: 1000px;
height: 400px;
overflow-x: hidden;
}
May be, overflow-x: hidden; must be uses for .boxA?
You just need to write
overflow: hidden
Try this css:
.boxA {
background: yellow;
width: 800px;
height: 600px;
overflow-x: hidden;
}
.boxB {
background: aqua;
width: 1000px;
height: 400px;
}
overflow must be on a tag which wraps too large content (in your case - boxA wraps boxB). So, if you do not want something to go outside wrapper - you must put overflow on wrapper
In your HTML code, boxeA is the parent and Box B is the child.
CSS property overflow used like this :
.boxeA
{
overflow: hidden;
}
will prevent a part of the boxeB (which is the child of boxeA) to be displayed when it is more bigger than it's own parent.
boxeA is like a mask on boxeB.
in the url you have given, to prevent the aqua boxe to be entirly displayed, you have to put the aqua boxe as a child of the light blue one,
and give the light blue box a css property like this :
.light_blue
{
overflow: hidden;
}
Now that I understand what you want, here is a possible solution:
http://jsfiddle.net/dy8g5/3/
Parameters:
.boxB must be visible outside of .boxA, with no horizontal scrollbar.
The browser should not have a horizontal scrollbar, if the browser width is smaller than the width of .boxB
The solution was to use a media query to hide the horizontal scrollbar, IF the browser width is smaller than the width of .boxB
#media all and (max-width: 1001px) {
body {
overflow-x: hidden;
}
}
#media all and (max-width: 801px) {
body {
overflow-x: visible;
}
}
.boxA {
background: yellow;
width: 800px;
height: 600px;
}
.boxB {
background: aqua;
width: 1000px;
height: 400px;
overflow-x: hidden;
}