I have some content I want to show in iframe with fancybox. When I use it, it pops up with horizontal and vertical scroll bars even though all the content is inside of it. Inspecting it in Firefox shows that when I click on html everything is inside but there is a little left over that is outside of the highlighted box. The next level up is iframe.fancybox-iframe which includes the scroll bars. I looked at the css and that has padding and margins set to zero so I don't know why the scroll bars are there. Right now as far as options I just have autoSize:false. All I have inside the body of the page I want to show is a form.
If anyone wonders which class name to use
.fancybox-inner {
overflow: hidden !important;
}
And if you found a small white background you can reset it using
.fancybox-skin {
background: inherit;
}
Try adding this to the css:
.style{
overflow: hidden;
}
If it didn't help, please post your HTML and CSS.
Related
I am creating a website using a free template Click here to go on the website
When you scroll up after scroll down you will notice a red standing arrow at the bottom right corner this is an image of the red arrow on which if you hit it will scroll the page to top #Home.
Now the problem is on my laptop it looks ok but when I do inspect to see mobile view then I can notice a white space created by this feature.
this is the image :
Click here to see image
I already tried using :
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
and notice that only overflow-x: hidden remove white space but also affect then arrow scroll functionality and also still little bit space persist towards right size with a bottom scrollbar.
I tried to remove the entire scroll code also but still unable to remove this white space which is occurring only in mobile view.
I gave a link to the entire website instead of mentioning here as I don't know which code is causing a problem and can't provide a code of entire website at here.
Please see the link and over there you will find the entire website with this scrolling feature on each page. Thanks
The image used as the background of your #toTop element is 32px wide, so change the width:
#toTop {
width: 32px;
}
If you need to push it away from the right hand side, use a margin-right.
http://birdbreath.com/bb/sticky_navbb4.html
It begins the scroll properly, setting the right classes and suddenly scrolls left off the page.
I have tried a variety of things including overflow-x: hidden; .
Any suggestions?
Thanks
Did you add height and width property into your class? Could you clarify more, what do you want?
use this code in your css
#homePage{
overflow-x: hidden !important;
}
My situation is the following: I have page that shows an image but sometimes it's too small, so I need to get the it bigger. I used CSS Transform to do that and works fine.
The problem is that the parent DIV's size does not increase, and there is space in the page for it to do so!
Using overflow on the parent does not help me because it crops the image or add a scroll bar. I need it to grow.
So, I managed to replicate a little what I am talking about here: http://jsfiddle.net/viniciuspaiva/7jJXQ/
When you click in the "Zoom" button, I want the div to grow and the pager below to get down. But I also want the page to load as it is, with the pager on top. Hope it's clear.
As you can see, I use bootstrap on my page. And the zoom button just adds a class to the image:
javascript:var img = $('img.center'); img.addClass('zoom');
Thanks!
Try doing it the other way. Have the image fit to the div, and resize the div instead.
Add this style to the image (assuming .myimg is the class).
.myimg {
display: block;
width: 100%;
}
Try placing this inside of your current div at the end of it before you close your current div. It will force the div to expand to contents.
<div style="clear: both;"></div>
So your div opens, the contents inside, then add the code above, then close the div.
Here's an example of Joseph the Dreamer's implementation. Check it out here. It only relies on setting display: block; and width: 100%;.
I have a position: fixed div besides a div with long text inside a div with overflow: scroll. I want the text to scroll even if my cursor is hovering over the fixed div (which is the normal behavior when the window would be the scrolling element).
I made a fiddle: http://jsfiddle.net/jM2Eh/1/
I basically want the text to scroll while scrolling hovering over the red box.
UPDATE: I am using Twitter bootstrap in this particular case and updated the fiddle accordingly.
If JavaScript is needed for that, that would also be ok.
UPDATE2: I also tried this solution, but that causes weird flickering effects:
http://jsfiddle.net/jM2Eh/16/
Have you tried using padding-left on your text node instead of using two columns?
http://jsfiddle.net/j5BLm/15/
.text {
padding-left: 50%;
}
Another possible solution is to use pointer-events: none if you don't care about IE:
http://jsfiddle.net/codedigger/jM2Eh/18
When I shrink the width of my browser window (Firefox v26) so that only 1/2 of my home page is shown, the horizontal scrollbar appears on the bottom of the browser, which is fine.
But if I scroll the page to see its right half -- that right half is blank. In other words, after horizontally scrolling to the right (which moves the page's content leftward, obviously) -- the right side of the page does not redraw. It stays blank. Even if I hit the refresh on the browser URL bar.
I looked around and saw several posts. This one seemed to be exactly the same problem (only difference was, theirs involved the vertical scrollbar).
So I took the suggestion there -- which was to set my outermost content div (called wholePageDiv in the code below) and also my outerDiv to 'min-width: 100%" but this changed nothing.
Here's the very simple code:
<html>
<body>
<div id="wholePageDiv" class="wholePageDivForCentering">
<div id="outerDiv" style="margin: 0; margin-top: 10px; min-width: 100%;
display: inline-block; overflow: hidden">
(not shown: a bunch of divs with text)
</div>
</div>
</body>
<html>
Here is the wholePageDivForCentering CSS class, with the change made per that SO post I read:
.wholePageDivForCentering
{
/* width: 100%; */
min-width: 100%;
/* height: 100%; */
min-height: 100%;
white-space: nowrap;
margin: 0 auto;
}
I have looked at other websites to see if they exhibit the same "right side of scrolled page does not redraw" problem. On other websites I tested, I shrink the browser to 1/2 the width needed to show the whole page, then I scroll to see the right 1/2 of the page -- all other websites I check are successfully redrawing the right-side content as I scroll.
Do I have a CSS style problem above?
EDIT: I hit F12 in my browser and use the 'Inspector' tool and I clearly see that the only visible content is within the wholePageDiv and this div is not expanding at all, to the right, as I scroll to the right -- the Inspector shows that for whatever reason my outermost wholePageDiv is remaining the same fixed size as the viewport, and when I scroll to the right, this viewport outline as shown by the Inspector simply shifts leftward and does not expand on the right side to accommodate moving the scrollbar to the right.
I have added your html and css in a fiddle and it scrolls fine for me. The text of the div is displayed with no issues: http://jsfiddle.net/micahSan/UucLB/3/
same code as the OP
Can you replicate your problem in a fiddle so we can all see it?
I solved this (for now) by either hard-coding the div's width, or by programmatically increasing the div's width as the width of the browser window/document was changed. Hopefully will find a less kludgy solution later.