I am making a responsive tool with an iframe. It does not display the correct width because of the scrollbar. Here's what I want to do. I want to hide the scrollbar in the iframe(it will then show the correct width), then I would like it to somehow be scrollable from a scrollbar outside of the iframe. Is this possible???
Related
How can I disable window scrolling but leave scrollbar visible?
I usually use overflow:hidden;. But when I do that the window scrollbar disappears. I'm looking for a way to disable scrolling but keep the scrollbar visible.
Wrap your content in a div that has max-height:100% and overflow:hidden. Body tag needs the overflow:auto or overflow-y:scroll.
I'm trying to create a popup which uses window scrollbars not the div ones. Something like what is on http://pinterest.com. How to achieve this effect? All my tries are unsuccessful, scrollbars appear on div. Window scollbars scroll the body content.
When you open popup window, you should remember current window scrollLeft/scrollTop positions somewhere, then apply overflow:hidden, height/width:100% to html and body, which will prevent page scrolling.
Create overlay div with position:absolute, z-index:9999, left/top:0, height/width:100%, overflow:auto, and append it to body - it will be scrollable container of your popup.
Inside of this container create div with position:absolute and left/top values, calculated in js to center it if necessary.
After you close popup, restore overflow, height/width styles for html/body, and apply scrollLeft/scrollTop values that were saved before opening popup.
Is there any javascript, ajax, css or any other method to get a webpage content fitted on a fixed widht iframe? Like mobile device browser does. Thank you.
You define a container div with a fixed width (say 400px) and set that div to overflow hidden. That will force the content of that div to stay within the 400px width. You put all the content that you want to have in the iframe in that container div. And then, you put that div inside the iframe.
I think that'd be the easiest way to do it.
I have a iframe(https) within a div. The div(lightbox overlay) has overflow-y:auto;overflow-x:hidden; which causes a vertical scroll bar to appear. the content of iframe is much bigger than the height of overlay and the overlay scroll bar doesn't scroll the whole iframe content.the iframe scrollbar is hidden by the overlay scrollbar.I want to scroll over the whole iframe content. I face this issue only in IE.
The overlay is used at many places so I cannot directly modify its styles.
Had anyone faced this kind of problem.
Please assist if anyone has any idea how to hide the overlay scrollbar in order to view the iframe scroll bar.
I've got this fixed by playing around with the styles.
I created a new style 'div.iframe-overlay' in css, which is same as the style 'div.overlay' but without overflow-y:auto;overflow-x:hidden;
Then toggle the class of div from 'overlay' to 'iframe-overlay' only for IE browser.
This helped the scroll bar to appear properly.
my page has a div on the top of 100px height and an iframe beneath it. I want the iframe to fill teh rest of the page viewport i.e that the iframe's height should adjust as the browser window adjusts so we don't see two scroll bars - I just want that the scrollbar should be visible in the iframe and not in the browsers own viewport.
If I understand you correctly, you should wrap the iframe in a div for which you make a class in CSS that has overflow:scroll;, height:100%; and margin-top:100px;
The height makes you fill the whole page, the margin-top clears room for your top div and the overflow ensures you get scrollbars around your iframe. You might need to play a little with the height.
As far as I know it is not possible to actually change the iframe's height, since you import it from another page.
Hope I could help a bit.