I am using shadowbox to open different links on a website. For some reason, Firefox does not show the horizontal scrollbar. It works fine in all other browsers.
I have tried this with no luck :(
link
I have also tried the following on the iframe page:
html {
overflow: -moz-scrollbars-horizontal;
overflow: scroll;
}
Anyone know whats going on?
shadowbox.css line 9 contains:
overflow-x: hidden;
Which hides the horizontal scrollbar.
You could overrule this by adding !important:
body {
overflow: scroll !important;
}
Add this in your default.css file and try:
html, body {
overflow: auto;
}
Related
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;
}
I have developed a site that has a fixed footer and header.
The content is also fixed (but that is only because the footer and header can be hidden, but I won't be showing that in my example).
The issue I have is with iPhones and iPads. They are two issues I have had.
Once is it allowing me to drag the header and footer past the confines of the body/html showing whitespace (no idea why they do this) and the other issue is it stopping scrolling as soon as I let go with my finger.
The latter seems to be solvable by doing this:
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
Although I have read that this is not a supported CSS attribute, it does seem to do the trick.
The second issue I have tried to solve with JavaScript by making the header and footer non-scrollable, but it doesn't seem to work properly.
The JavaScript is simple enough:
function disableElasticScroll(e) {
e.preventDefault();
};
which I can put on an element like this:
ontouchmove="disableElasticScroll(event)"
This does not have the desired effect.
I have set up a codepen to highlight the issue. If you have an ipad, have a look. First drag the content inside the .content area. That works nicely (thanks the the -webkit solution). If you then try and drag the .header or .footer you will notice that you can't drag it and no scrolling is happening (again this is good and is due to the JavaScript), but if you try to then scroll the .content again, you will notice that it drags the entire page and does the elastic scroll rubbish.
https://codepen.io/r3plica/pen/LzRQaZ
There is a way to do this so that you don't have to fix the scrolling container. Try positioning your header and footer with a fixed position then padding the body of your page by the height of those elements. This way your page will scroll normally without any hacks. It might look something like this:
body {
padding-top: 60px;
padding-bottom: 40px;
}
header.global {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
}
footer.global {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
}
html, body {
position: fixed;
}
try setting this css property and see if it works.
It solves the elastic scrolling effect on the body.
Sample page
Output to test on ipad
When opening modals, sidenav or data picker in Materialize CSS, the whole page is jumping right, because scrollbar is disappearing.
http://materializecss.com/modals.html
How I can prevent it?
On carefully inspecting that link in your question.....You may want to put
overflow: auto !important; to your html <body> tag css styling (quick hack)
example
body {
background-color: #FCFCFC;
overflow: auto !important;
}
this should fix the issue
body {
padding: 0 !important
}
I added these css to a web page and opened it as a popup with js from another page. But the scroll bar is not appearing in the popup (but it appears in web pages other than a popup).
css:
html{
overflow: hidden;
}
body{
overflow: auto;
height: 100%;
}
js:
window.open(url, 'newwindow', 'width=1800, height=1600, resizable=yes, scrollbars=yes').focus();
Anybody knows a way to fix this?
Thanks in advance.
note: I'm unable to create a jsfiddle because I can't apply css to the opened window there
If there is a overflow: hidden on the html element, it won't display what is outside of the window and that's why there are no scrollbars.
Just remove it and it should work fine.
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;
}