I'm doing some web development and for some reason on some of the pages the scrollbar on the right side of the window is transparent or white when using Chrome. I've looked through my css and I don't see any scrollbar styling set. The scrollbars look normal in firefox.
If it's because the page is so short that no scroll bar is required, but you still want it to show up, you can set the overflow-y CSS property to scroll on the html element of the page. For example:
html {
overflow: auto;
overflow-y: scroll;
}
Related
Hi, I was coding CSS, and then I meet the problem.
I had learned that if I code the CSS code bellow, the scroll bar will not display on the web page.
::-webkit-scrollbar {
display: none;
}
But I wanted to display the horizontal scroll bar and hide the vertical scroll bar.
How can I hide the vertical scroll bar, I don't know if the CSS code had something like ::webkit-y-scrollbar?
It may be possible to use the CSS overflow property. The overflow property allows you to control the content area and without viewing the rest of your code, it may work in this scenario. Try something like so:
html {
overflow-x: scroll;
overflow-y: hidden;
}
Documentation: https://www.w3schools.com/css/css_overflow.asp
I'm trying to include a large image (a map) as background in a web page, with the ability to scroll to view the areas outside the current viewport. I'm using the CSS overflow property and its scroll attribute. 'Scroll' attribute on the CSS 'overflow' property fails. The borders appear on the right and bottom of the browser window, but without scrollbars. As a result it is not possible to scroll the HTML element. Desired behavior is functional scroll bars.
I tried switching the sequence of the CSS properties, understanding that the last one rules. No impact. Tried viewing in different browsers, to see if it's browser-specific. Fails equally in Firefox, Chrome, Chromium, and Safari. MDN docs indicate this should work.
...
<style type="text/css">
html {
background-image: url(art/GbMap.png);
background-size: 2000px 2100px;
overflow: scroll;
}
</style>
...
Expected: borders on the bottom and right with scrollbars that allow me to scroll the image.
Actual: borders on the bottom and right, but no scrollbars.
How do I make my div’s scrollbar always visible?
.el {
height: 100px;
overflow: scroll;
position: relative;
}
overflow: scroll is not working. It seems my browser’s native behavior does not allow that. (I’m on macOS.)
Is there some workaround?
P.S. The scroll bar is visible on hover, but I need it to always be visible.
It's a browser issue, the browser have there own style for these elements.
If scrollbar go to hidden, it's for the user comfort, you can't change this...
So you can try to make div scrollable with custom scrollbar plugin in jQuery for example :
https://github.com/gromo/jquery.scrollbar
This plugin create fake scrollbars in javascript and permit to user to scroll into element. So browser don't apply his own rules for these scrollbar because they aren't.
You could try
html {
height: 101%;
}
See the frozen DOM state of the page in this Plunker.
The code should represent a modal with four tabs, of which the third tab content is open. Should look something like the image below (rendered in latest Chrome): three divs side-by-side which contain overflowing content and the divs are scrollable. On the bottom there's a div containing Plotting method text and a button. The same view is visible in Firefox as well.
What I see in latest Safari:
After disabling the style
height: 10px;
from .heatmap-multiple-variable-container
the rendered Safari content is:
notice how the third content div, which is scrolled way down, does not present all of its content (the Select all row) as it does in Chrome. Also the div containing Plotting method is not visible.
In Microsoft Edge, the div containing Plotting method is visible but the same scrolling problem as in Safari exists.
Any ideas on how to modify the Flexbox layout to display the menu in the same manner for all of the three browsers? I'm really stuck, so any pointers you can give me are appreciated.
Ok this was a hard one! Add this to your CSS and it should work. (tested in Safari)
body .multiple-variable-selection-columns-container {
height: calc(100% - 66px);
}
body .modal-menu .tab-content {
height: calc(100% - 57px);
}
body .modal-wide .modal-dialog .modal-content .modal-body {
height: calc(100% - 110px);
}
ng-include {
display: block;
}
You have added height: 100%; to elements who have neighbour elements with there own height. You have definitely to cleanup your markup, but the CSS above should work for the moment.
I have added the body to get a stronger selector to overwrite your code. I also added a default display style for ng-include tag, the browser doesn't know what kind of styles to use, so the tag has no hight and is hard to debug.
I hope I could help you.
In both Safari and Chrome, the placeholder attribute seems to add invisible width, causing horizontal scroll-bars and a flicker-like rendering when the window is re-sized horizontally.
overflow: hidden; can be applied to the parent element to curb the issue. However, it clips my form field focus effects.
Is there a way to use certain vendor prefixes values to prevent this such as ::-webkit-input-placeholder {} or some other way?
When the attribute is added to the form input, a horizontal scroll-bar flickers when re-sized horizontally on a webkit browser. Specifically, what style is triggering this behavior? And how do I prevent or override this behavior!?
Many input elements have default padding. When you state width: 100%, it causes the element to be width 100% + padding. To prevent the padding from increasing the width simply use box-sizing: border-box;
I looked at your site in Chrome and Safari, but it doesn’t seem to be having the issue you mentioned. However, your top image is overflowing to the top because you sat the overflow to hidden and you didn’t set a top-margin for your header. So, I went ahead and created that margin:
#header img {
margin-top: 50px;
}
and that solved the problem. I wish I could post an image.