I am trying to provide a horizontal scrollbar for the html form which gets loaded within an iframe which itself is loaded inside a cshtml page. I added the below code:
$('#iframe').contents().find('body').css('overflow-x', 'scroll');
This gave me the scroll bar but a disabled one. I mean the scrollbar appears by there can be no scrolling done.
You told the element to be scrollable if an overflow exists in x-axis direction. If there is no overflow the scrollbar stays disabled.
If you want the content of the iframe to be wider, simply put the contents inside the iframe into a container with
.container {
width: 200%;
}
The iframe should have position: relative; set.
Please confirm if this solves your problem.
Related
My footer is full width on some pages and on others it matches the content width. On pages where the footer is full width, a horizontal scroll bar appears. I'm not sure why this is happening and researched loads. Because every answer was associated with css, I decided to take all the css out just to see if there was something in the code that was causing it... but I'm baffled because even with all coding removed and refreshed, the horizontal bar still comes up on a few pages. Is it really css issue?
You can disable the horizontal scroll bar using css:
body {
overflow-x: hidden;
}
I'm searching a way to prevent your whole body layout to resize when a scroll bar appears to the right.
I want my body to stay at the exact same position when you switch from one html file to another, but the second one contains more content than the other, so it creates a scroll bar to the right of your browser.
The scroll bar makes my body move a tad bit to the left because it's centered. How can I prevent this using only html and css? (no scripts)
body {
overflow-y: scroll;
}
That will force the scrollbar container to be always visible, even when there's no scrollbar, keeping your content centered.
For my forms that are within a modal, I've opted to use the bootstrap modal footers to display any errors related to the form. This is causing some frustrations when the errors inevitably make the footer take up more height than the footer has available. I'm fine with it needing more height, but I want it to add the height to the top and have the modal body's height reduced so the modal as a whole stays the same height. If it adds it to the bottom it ends up pushing content off the screen. The modal body accounts for content that's too "tall" and adds vertical scroll bars which is why I'm willing to give up modal-body height to accomodate the modal footer height.
I've added a link to an image of what I'm referring to. The modal footer expands to the content as expected, but adds that height to the bottom so the rest of the modal footer becomes inaccessible when its pushed off screen. I want to steal height from the body so the footer's added height gets added to the top and the modal's total height stays the same size.
I'm sure there's a simple fix I haven't found yet but I thought I'd ask while I continue to look in case someone else has already found a solution they want to share. Any help would be much appreciated. Thanks in advance.
Normally bootstrap modal uses fixed positionong. In case when content is to large scrollbars appears inside the modal.
If you want to have long modals with no scrollbars you must first change modal positioning to absolute. But if your site content is long you must add some top property value. It's because now modal is vertically positioned to whole site, not to current browser view, so % top will not work anymore.
.modal {
position: absolute;
top: 100px;
}
Now to scroll you just use browser scrollbar.
Next to get rid of modal scrollbars you add max-height: inherit to modal-body class. Now modal will get larger depending on a content without scrollbars.
.modal .modal-body {
max-height: inherit;
}
Yes this has some disadvantages. The biggest one is that if you launch modal on the bottom of the page you might not even see it because it will popup on the top of the page.
For this issue you can add js scroll top script after modal is fired.
$('#myModal').on('show', function () {
$("body").animate({
scrollTop:0
});
});
Hope that helps!
I've got a modal popup and when it loads contents that are taller than the browser height I am unable to scroll down to view the rest of the information. Instead the background can scroll but the popup won't.
Instead I'd like to have the popup stay put and when the user scrolls up or down it leave the popup in place and let them scroll to the bottom of the contents. If you make a super long post on Facebook the popup works correctly and I'd like to know how I can get this same effect with this control.
In the css of your modal popup, set the width of the modalpop up, then set the overflow:auto. That will give you horizontal scrollbar. Example:
.ModalPopupPanel
{
width:900px;
overflow:auto;
}
So,when the content width exceed the 900px, the horizontal scrollbar will show up.
The same is true for the vertical scrollbar where you need to set the height of the modalpop.
You can add a class to the body tag when the popup is open to hide the scrollbar, and remove it when the popup goes away, then your background should be position:fixed and the height should be the window.height() (get it dynamically with JS), and also be overflow:auto.
What happens with all that is that, if the popup is taller than the background, you get a nice scroll bar on the right, and because your body scroll bar is hidden, you see only that one. Also, the page itself doesn't scroll. That's the way Facebook does it with their picture viewer.
This script set the popup height to 90% of the screen height, then you could set the overflow:auto;
<script type="text/javascript">
function pageLoad() {
$get('<%= Panel.ClientID %>').style.height = document.documentElement.clientHeight * 0.9 + "px";
}
</script>
here a related question I ask and the solution I found.
asp.net ModalPopupExtender : need to show scroll bar when overflow
Put style overflow: auto on the container block.
You can try this for scrolling modalpopup with its contens:
Set the PopupDragHandleControlID pointing it to an empty panel,
set Reposition mode = "None" this will keep the modal fixed in the same position as you scroll the page.
Here the simple and best working solution
Add that class to your modal popup page.
body.modal-open {
overflow: auto;
}
I have a site which needs to be fully self-contained in the browser window, ie, the user must not have to scroll up and down to view different parts of the site. Content that is too long to fit into the content pane is handled with overflow:auto, which is working fine.
the problem is, no matter what I try I still have the following problem:
two sets of scrollbars http://www.wikiforall.net/bad_scrollbars.png
So beneaht the content which successfully fills the browser window, there seems to be a gap. This gap causes the vertical scrollbar to show itself (and there appears to be a similar gap on the right side which isn't as easy to see). I've inspected the elements using Chrome's element inspector and the <html> tag covers only up to that gap. So I have no idea where the gap is coming from.
The main page divs are setup with position: absolute, with left, right, top, and bottom all set to zero. These divs also have display: inline set, and do not have margins or padding. The html and body tags are styled the same way.
I've been looking around for a day or two but nothing I've found has worked. Does anyone know how to remove these scrollbars?
You can always use:
overflow: hidden;
To hide the scrollbars.