Hiding multiple scrollbars CSS all browsers - javascript

I'm having a very difficult time accomplishing what I want to do, and I'm starting to wonder if it's possible at all. Essentially, I have three divs that each vary in width depending on which one you're hovering over (simple transitions). The height of these divs is always equal to 100% height of the browser window, calculated with jQuery.
I use overflow-y: scroll to accomplish multiple sections of scrollable content. However, it looks clunkly to include three scrollbars, so I'm trying to get rid of them. On chrome, it's easy, I just use ::-webkit-scrollbar { display: none; }, but for other browsers it isn't quite as simple. Other questions have answered saying I need to be wrapping my content in a div that has overflow: hidden but I can't quite get that to work without all these transitions completely failing.
Here's a demo of what I'm talking about. Thanks in advance!

overflow-y: hidden will hide the scrollbars, if you set this to scroll on :hover only you will still be able to scroll each panel when the user hovers over it:
.panel {
overflow-y: hidden;
}
.panel:hover {
overflow-y: scroll;
}
The previous examples were missing the default hidden, that will stop the panels scrolling back to the top.

You can show the scrollbar on hover
#container .display-panel:hover {
overflow-y: scroll;
}
remove the overflow-y from display-panel http://jsfiddle.net/9T7ex/1/

Related

How to give a site a side scroll bar when resizing window instead of allowing all elements to bundle or stack up together?

I am creating a site where i have given the elements static widths and heights. The website also includes images. When i resize the window, all the elements bundle up together (for example, in full window mode there are 3 images in a line whereas when I resize the window only 1 image is shown per line). Also all other elements get stacked up on each other. I wanted to know how can I prevent this and let all the elements in the same order as they are when in full window by giving it a side scroll bar on the bottom. For reference, see the Facebook login page: facebook login page. You might need to logout.
When you resize it, it simply gives a side scroll bar on the bottom and all elements remain in the same order. Is it possible to do this just with HTML or CSS or do I have to use JavaScript. Thanks a lot in advance!
By applying the following Css:
body {
min-width: 1280px;
overflow-x: scroll;
}
Just replace the pixel value with the required width.
you need to make the width of the body fixed to a specific px (the width of your window), for 1000px example
body {
min-width: 1000px;
max-width: 1000px;
overflow-x: auto;
}
If you add overflow-x: scroll; or overflow-x: auto; to the body, that should do the trick. Also don't forget to add a min-width and max-width as well to make it take effect.

Angular flex-layout wrong overflow

I want to use Angular's flexLayout. Problem is, when I try to overflow flexible content, it wont be. When content is larger than its container, it simply "overgrow" it's container.
I have found solition, but Intrinsic & Extrinsic Sizing suport is poor at this moment.
Here is an plunker example. I have tried min-height prop:
.detail-row-item{
// min-height: min-content; //good solution, but poor browser suport
}
It worked on chrome. Is there any different solution to do min-height: min-content; result ?
Edit:
I found out that this example, works fine on Firefox and Edge only chrome has problem as shown on screenshot.
If you restrict the height of the div elements and their content overflows their size, you can use the CSS overflow property to adjust the behavior. So if you add overflow: auto; or overflow: hidden; to your .card-wrapper class definition, the cards will get scrollbars or just hide the overflowing texts.
Edit:
To achieve the same result as with min-height: min-content, just remove the flex attribute of the div.detail-content-wrapper element and set the following ones:
.detail-content-wrapper {
max-height: 50%;
overflow: auto;
}
You can check the modified plunker.
Add like this below in your CSS file.
.card-wrapper.detail-card {
overflow: auto;
}

Max-height on Bootstrap accordion with AngularJS

Is there a way to set a max-height on a Bootstrap accordion in an AngularJS app, such that the whole accordion can be made to fit on screen and only the expanded pane scroll it's content if needed?
So far I've only been able to have the whole accordion scroll, rather than the content.
Edit to add:
A bare-bones plunk of what I've been working with: http://plnkr.co/edit/97fqbx1Wg84hcTpW24Yi?p=preview
To get the content of each panel to scroll properly I've tried variants of:
.content {
max-height: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
but since the parent elements are all full-height regardless of any CSS I've tried that doesn't do any good.
I've tried setting heights and max-heights on every combination of the relevant elements but nothing seems to get close, especially taking into account the fact that the accordion will hold an unknown number of items.

Scroll a page with 100% height fixed div which always on top and shouldn't cover the footer

http://jsfiddle.net/9fCfE/1/
.fixed {
width: inherit;
height: 95%;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
}
footer {
width: 100%;
}
Fixed div must be always on top and shouldn't cover the footer when I scroll.
100% height or from top to footer.
How can I do it?
The simplest answer is to drop the z-index of the fixed region so that when it would otherwise cover the footer, it instead moves behind it. You'll need to make sure the footer is position: relative;.
Fiddle example
If, instead, you want the two to never intersect, you're in for a harder challenge.
The best way to do it would to be giving your fixed element a fixed height, giving your footer a fixed height, and making sure that the fixed element height + the footer height <= the screen height.
Fiddle example
Those are really your only options - you essentially have to design around it. To the best of my knowledge, there is no way to dynamically shrink the fixed element when it intersects with other elements on the page (ignoring the rest of the elements on the page is the purpose of position: fixed, after all).
I've cobbled together a quick and dirty implementation of what you asked using jQuery, offset(), scrollTop() and height()
Here's the jsfiddle example.
Is this what you wanted? If so - why? :)
I don't see any visual difference between this method, and the one where the fixed element goes under the footer.

Why are two vertical scrollbars showing?

I did something like this to initially hide the body scrollbar, and then show it when a link is clicked:
$('body').css('overflow', 'hidden');
$('#site').click(function(e) {
$('#wrapper').remove();
$('body').css('overflow', 'scroll');
return false;
});
At first, it does hide the scrollbar and just shows a scrollbar for the overlay (absolutely positioned div (#wrapper)) but when I click on the link (#site) to show the scrollbar again (and remove the overlay), it now shows two scrollbars: one is working, the other is disabled.
HTML:
<div id="wrapper">
--- some content ----
</div>
<div>
--- rest of the website ---
</div>
CSS:
#wrapper {
background-color: #CCC;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 99999;
height: 800px;
}
What has gone wrong?
Found a solution to my problem. I just needed to add:
$('html').css('overflow', 'hidden');
You also can use this, in case something from a theme or style is causing the second bar
html {
overflow-x: initial !important;
}
In my case I tried
$('html').css('overflow', 'hidden');
which was removing the two sidebar but I was unable to scroll down to footer.
I used:
$('html').css('overflow-x', 'initial');
Which is working perfectly, shows only one scrollbar vertically and it is scrollable to all content at the bottom
None of the solutions above worked for me. I tried adding overflow-y: hidden; in html and body. Finally, it worked when I added it to what I identified to be a problematic <div>. I found the problem by using Inspect Elements: I highlighted the additional scrollbar by using the "select" tool, and it showed me to which element it belonged - in my case it was a <div> called .main. Reference the screenshot below.
By two scrollbars do you mean a vertical and horizontal scrollbar? If it is, use overflow:auto instead of scroll
http://jsfiddle.net/DmqbU/2/
This will effectively only show scrollbar when needed (if horizontal content is wider than width or vertical content is taller than height)
This solved the problem for me:
body{overflow-y:auto}
Use overflow-x and overflow-y to manage horisontal and vertical scrollbars. Just set overflow-x: none; to stop showing horisontal bar.
add these lines to your style.css code:
html {
height:100%;
width:100%;
margin:0%;
padding:0%;
overflow-x: hidden;
}
body {
overflow-x: hidden;
}

Categories