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!
Related
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.
I have a jQuery slider near the top of my page. But when the page first loads, it takes a few seconds for the slider to load and during that time, the divs underneath it are near the top.
Is there a way to make room immediately for the slider div so the elements below are placed properly from the start? This isn't preloading as the slider is one of the first elements on the page and I don't believe that preloading would do any good.
Here is the page in action: http://americanart.si.edu/index_newsplash3r.cfm
Thx.
You can use min-height and min-width as well as height and width on your CSS. This should force the div to be a certain height.
Apply these attributes to the CSS for the element:
height: 100px; min-height: 100px; for example.
I have a page where the main content has a variable height. I want to have a fixed height (about 50px) footer to the very bottom of the page.
I need it to scroll along with the page (so not a fixed position).
A couple scenarios:
If the body content is 300px tall, the window has no scrollbar, the footer would be all the way to the bottom and visible.
If the body content is 900px tall and the window has a scrollbar, the footer would be all the way at the bottom with no space between the footer and the bottom of the window, and not visible unless you scroll to the very bottom.
Is there a way to accomplish this in pure CSS? Trying to stay clear of using JS to handle this.
see the fiddle for code and demo
fiddle: http://jsfiddle.net/gLpFJ/
demo: http://jsfiddle.net/gLpFJ/embedded/result/
Note: Please note this http://jsfiddle.net/yp4EH/ is not for the answer it is just for demonstration purpose.
I am giving this for help and for concept purpose This fiddle http://jsfiddle.net/yp4EH/ is not related with this question but based on same situation - sidebar, content, footer at bottom always.
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;
}
There are 3 parts to the page.
Header, which has unknown content at design time as it is populated with text at runtime. All the text must be displayed, no scroll bars.( I think height: 100% does this)
Content, the content should fill the page below the bottom of the header to the top of the footer. if there is more text in the content that can be shown, then scroll bars should be available.
Footer. Footer should be 25px high and always sit at the bottom of the viewport.
The window is a popup and it should never have window scroll bars, it can be resized but no scrollbars. The contents scroll bars should be the only one available.
The content area should resize when resizing the window, but the footer stay the same, ie fixed to the bottom.
The widths would all be 100%
Header: don't specify a height. Divs will automatically size to their content's height
Content: specify a margin-bottom: 25px to avoid being overlapped by the footer
Footer: position: fixed; height:25px
You'll have to look into ways to simulate position:fixed for IE < 7. see, for example,
How do I get a floating footer to stick to the bottom of the viewport in IE 6?
This can be a pain in the butt if you want the footer at the bottom of the window. The only way I've found to do this and make it work cross-browser is by using a dreaded table layout - and before I get my head bitten off, table layouts are frowned upon - big time.
It's easy to position the header and the content...but as far as I'm aware, not the footer so far, I've only found 2 ways of positioning the footer at the bottom of the window (as opposed to the bottom of the document which may be half way up the window for short documents), 1 uses Javascript to reference the Window.Height and the other uses tables (the frowned upon, but simple way of doing this).
Up to this point, I've yet to see a CSS that reliably does this in all browsers. I would be very interested to see a CSS that does this...