just trying to get rid of scrollbars on IE11 when nothing is inputted and have them only when needed i.e. overflow: auto
works on a generice textarea but no on paper
tried
--paper-input-container: {
overflow: auto;
}
paper-textarea {
overflow: auto;
}
but nothing
Related
I want the vertical scrollbar for my div to be invisible, but still allow vertical scrolling.
I've tried using overflow-y: hidden but that disables scrolling.
I've tried webkit element::-webkit-scrollbar but that affects horizontal scrollbars too.
I would have thought that webkit's :vertical state would allow me to do it but it doesn't do anything. See codepen: (https://codepen.io/numberjak/pen/MWgOMqd)
Other questions look at BOTH scrollbars, I just care about ONE scrollbar.
<div class="scroll"><div class="large-content"/></div>
.scroll {
overflow: auto;
max-width: 20rem;
max-height: 20rem;
background-color: black;
}
.scroll::-webkit-scrollbar:vertical {
display: none;
}
.large-content {
min-width: 100rem;
min-height: 100rem;
background-color: red;
}
Try this css code..
css
.large-content {
background-color: red;
width: 100%;
height: 100%;
}
You can do the following to hide scrollbars:
-webkit- (Chrome, Safari, newer versions of Opera):
.scoll::-webkit-scrollbar { width: 0 !important; }
-moz- (Firefox):
.scroll { overflow: -moz-scrollbars-none; }
-ms- (Internet Explorer +10):
.scroll { -ms-overflow-style: none; }
Important points to be considered before hiding the scroll bar:
Preferably hide scrollbars only if and when all content is visible else the user may skip the content.
Avoid horizontal scrolling on web pages and do not hide horizontal scroll bar as they can make content difficult to read
If at all, hiding scroll is required: Display all important information above the fold. Users may often decide if they want to stay or not on what they can see without scrolling.
Reference
I'm attempting to create a "bookshelf" using html and sass (Note: this is heavily based on http://ameijer.nl/2013/03/bookshelf-css-only/) You can see my version of the concept here:
https://mainstringargs.github.io/bookshelf.html
I'm trying to only show the horizontal scrollbar when necessary for the particular "bookshelf" -- for example, in the "Read" shelf above -- but not have it appear when not necessary -- see "Reading" & "On Deck" at the link.
I expected using "overflow: auto;" would give me this effect, but that seems to cause the scrollbar to always appear.
The relevant sass file is here: https://github.com/mainstringargs/mainstringargs.github.io/blob/master/src/styles/_bookshelf.scss
How can I only show the horizontal scrollbar when needed for each particular bookshelf?
As an example, it currently looks like this with horizontal scrollbars on both displayed bookshelfs even when not enough books:
I want it to look like this mockup (Note the bottom bookshelf has no horizontal scrollbar because there aren't enough books there, but the top one does because there are enough books to scroll):
You can use flexbox and let .books overflow vs .shelf just be sure to remove the width: 1470px; from .books, .shelf:after:
.shelf {
height:auto;
overflow: hidden;
padding: 0;
}
.books {
position: relative;
white-space: nowrap;
display: flex;
flex-wrap: nowrap;
overflow: auto;
align-items:flex-start;
justify-content: flex-start;
height: 420px;
z-index: 1;
}
.books, .shelf:after {
/* width: 1470px; */
box-sizing: border-box;
padding: 40px 30px;
margin: 0;
width: 100%;
}
.book {
flex-shrink: 0;
}
By looking at your code if you only want to apply a horizontal scroll when necessary and not vertically.
Use the following on your class name:
.books {
overflow-x: auto; // Auto horizontal
overflow-y: hidden; // Disable vertical scrolling
}
Try that see if it works. No need to add scroll but let the browser decide with the "auto" set.
I created a tooltip, and I have the following CSS. Please note that on Mac, works like a charm but on windows - no luck. Even when the content is not overflowing, the scrollbar tracks show. how can I have my tooltips without them? And if they need them, how can I show only the vertical one.
.tooltip-container {
font-size: 1.2rem;
overflow: scroll;
max-height: 200px;
Hide the x-axis with overflow-x: hidden, on the y-axis use the 'auto' value which will only show the scrollbar if needed
.tooltip-container {
font-size: 1.2rem;
overflow-x: hidden;
overflow-y: auto;
max-height: 200px;
I'm working on a header that's intended to overflow. It's got white-space: nowrap rule applied in order to prevent breaking the text into two or more lines.
The problem is, the viewport now stretches to fit the text and then the page is scrollable on the x-axis. Applying overflow-x: hidden hides the scrollbar, but it's still possible to scroll the page on mobile, and on desktop through middle mouse button drag.
I know I could use position: fixed, but that's not a solution for me. I want the header to stay where it is.
Here's a fiddle with all my attempts so far.
Ok, try applying this:
CSS:
.wrapper {
position: absolute;
width: 98%;
overflow: hidden;
}
.text {
font-size: 500%;
white-space: nowrap;
display: block;
width: 100%;
float: left;
}
edit: oh, and remove overflow-x: hidden; from html,body
My html page displays empty disabled scrollbar, please see attached screenshot
How can i hide this scrollbar completely?
EDIT:
Sorry my mistake, i didn't mentioned that i am using overflow:hidden, but cannot hide this scroll bar.
i am copying my body code below
body {
color: #000000;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
overflow-x: hidden;
overflow-y: hidden;
}
I suspect it has nothing to do with overflow on your BODY element.
Even if you set overflow-y and overflow-x it's just like using the shorthand:
overflow: hidden;
same as for your margin, use only:
margin: 0;
// You have also other shorthand variants like:
// margin : top right bottom left;
// margin : topBottom rightLeft;
// margin : top rightLeft bottom;
// helps to keep your CSS file clear as possible.
So the probable issue lies in some most outer common parent element like some wrapper or container that has probably a style set to overflow: scroll;
like in this demo
Set overflow: hidden; in your CSS for the body:
body {
overflow: hidden;
}
Or to handle just the verticle scrollbar
body {
overflow-y: hidden;
}