I have an inline SVG on my webpage. I'm dynamically adjusting it's start and end coordinates with some Javascript like so https://codepen.io/anon/pen/rrYNaP?editors=1010.
However, in my webpage, I noticed that I can't see the svg due to:
svg:not(:root) {
overflow: hidden;
}
Looks like it's coming from bootstrap (I think normalize.css). I can override it
svg {
overflow: visible;
}
but then I get horizontal scroll bars and the svg is layered on top of every other div on the page (kinda needs to be in the background and z-index: -1 isn't working)
The weird thing is, when I view it in codepen, it doesn't have any of those issues.
What is going on and how can I fix this?
try with
svg {
overflow: visible !important;
}
Related
I fixed the height of the Bootstrap dialog, but for some reason a double scroll bar appeared, but I just needed to try overflow: hidden, but unfortunately it didn't solve the problem. The problem comes when I select a check box and the dialog jumps down since a longer part of the dialog comes in, I can't paste many codes because the components of the dialog are made up of several components.
So far I have done css formatting:
body {
overflow-y: hidden;
}
.dialog-layout-modal-body {
min-height: 662px;
max-height: 700px;
overflow: auto;
}
And the parent CSS code:
body {
overlfow: hidden;
}
Is there some bootstrap or css or any solution how can I fix this problem?
One is from browser scroll and another is from the dialog. Check if the Parent section has css property as 'overflow:auto;` which will cause this issue.
OR
you can do something like this for body tag.
body{
width:100%;
overflow-x:hidden; // hides bottom scroll
overflow-y:hidden; // hides vertical scroll
}
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%;
}
On my site, http://www.granthpark.me/outside If I resize my browser to smaller sizes, my content will be hidden and I can't scroll to it. Can anyone point out what's making the content fixed?
Here is the CSS, can't post it here because it's too long http://www.granthpark.me/assets/css/main.css
EDIT: New problem. I can scroll now because I tried replacing every instance of position:fixed with absolute in addition to changing overflow:hidden to scroll. But now I don't know how to fix the margin of my background to resize properly when I resize the browser.
Simple replace the style sheet, you will get rid of all the problems. click to see
add property in body tag this in css:
body{overflow: scroll;}
Change your body's property to overflow: scroll;
Right now your overflow property is set to hidden.
body {
background: #fff;
overflow: hidden;
}
Here's the culprit:
body {
background: #fff;
overflow: hidden;
}
add this property in body tag:
overflow-x:hidden;
In css file "main.css" line no. 934 add this property in id #bg
Position:Fixed
yes another problem with this scroll bar
alright so I started the website over again that was mentioned here
and I am having problems with this scroll bar again
alright so all I have is a single image in a div tag
<div align="center" id="SuggestionBox">
<img src="images/SuggestionBox.jpg"/>
</div>
this code displays right but
when I make the browser window small enough that the full image can not be seen it doesn't give me a scroll bar to see the whole image
hopefully this makes sense
I am using firefox
EDIT:
I tried overflow:scroll and it did not work
this was the outcome
and this happened in the middle of the page
I also tried 'overflow:scroll' on the body of the page through css and all it did was show disabled scroll bars that did not change no matter the size of the browser
also some people are a bit confused
so
this picture might help
notice how the image is not fully shown
well, I want there to be scroll bars in case the user wants to see the whole image
but they're not appearing
also here is all my css code:
body
{
background-image:url("images/background.jpg");
}
a:hover
{
color:#FF0000;
}
table
{
background-color:#FFFFFF;
}
#SuggestionBox
{
position:relative;
right:375px;
}
thanks
Good Luck
get it?
I may not be understanding your question, but it looks like your problem is that you've disabled scrolling in the body but would like the div to scroll. #lukiffer's answer is right. When you resize your browser, however, the scrolling div, which is a fixed size, isn't overflowing because its content still fits.
Are you wanting your "SuggestionBox" div to anchor to the page so that it resizes along with the page? That would enable it to change sizes as the browser does and thus add scroll bars when its content doesn't fit:
#SuggestionBox
{
position: absolute;
/* Change these to establish where to place the div. All zeroes
means it fills its whole container */
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: scroll;
}
Update:
I don't get what #SuggestionBox is supposed to be. If you're just wanting a centered image link, you could get rid of the div and just have this as your markup:
<a id="SuggestionBox"></a>
And for that <a/>, you could have the following CSS:
#SuggestionBox {
display: block;
width: 100px; /* Or whatever the width is */
height: 100px; /* Or whatever the height is */
background-image: url(images/SuggestionBox.jpg);
margin: 0 auto;
}
If your reason for having the div was to give your link a right margin of 375px, your CSS could have the margin set to 0 375px 0 auto instead.
If you use this simple HTML/CSS, your body should be able to scroll normally (unless you have other CSS or HTML that you haven't posted that's breaking it).
div#SuggestionBox { overflow:scroll; }
http://redlineautoleasing.com/beta/
what could be causing the bottom scrollbar? i cant figure it out.
i tried this
http://blog.josh420.com/archives/2007/11/fixing-the-ie-overflow-vertical-scrollbar-bug.aspx
but the page kind of got messed up the bottom content got chopped off.
From your CSS:
body {
background-color:black;
background-image:url(../images/contentbg.jpg);
background-repeat:repeat-x;
height:536px;
background-position:top left;
color:white;
}
try adding overflow-x: hidden; and possibly also width: 100%;
or try adding
html{
width:100%;
overflow-x: hidden;
}
play around with these, the right combination should make it work OK.
It looks like your CSS has several things with large widths or margins which could be invisibly going off the side of the page - most likely a positioning difference between IE and other browsers.
In firefox, the firebug addon allows you to inspect all the elements of your page. If there's something like that for IE it should help you identify the offending element. Otherwise, maybe try setting all borders to a width of 1 pixel with various colours to try to highlight which element is sitting out there.
Had the same problem and this solved it for me:
html
{
overflow: auto;
}