This project is read-only.

Bootstrap 2 with SP 2010

Mar 24, 2014 at 5:01 PM
Ok - so new to this so am starting with Bootstrap 2 with SP 2010. (I will be moving to SP 2013 but not for a while as it will be a major effort!) Anyway; I have a site where modal windows do not size appropriately (but can expand them). I really am banging my head on the wall with this - any suggestions? FYI: Works great in Mozilla, the same in IE and Chrome (surprisingly) AND if I log on, they will go full window.)

??
Mar 24, 2014 at 7:54 PM
Hi,

SP modal windows can be entertaining.

First, modal windows use your system master page. As a test to make sure you are ok, set you system master page back to v4.master and verify that your modals work correctly.

Next, this should be working in the B2 master page provided in this project, but it sounds as though there may be an issue with a fixed width component. If a specific container or div in your system master page has a set width, or if you have additional padding or margin, this could cause a modal window to be incorrectly sized. What you can do is add additional styling that will target just the modal, using the .ms-dialog class selector.

As an example, say you have a div in your masterpage such as:
<style>
.mydiv {width: 960px;}
</style>
<div class="mydiv">
...
</div>
If this was used in a modal you would have problems. To tell this MP to use different styles when used in a modal, you could use css such as:
<style>
.mydiv {width: 960px;}
.ms-dialog .mydiv {width: auto;}
</style>
<div class="mydiv">
...
</div>
This is not specific to B2 as delivered in this package, but hopefully using this technique along with the dev toolbar in Chrome you can narrow down what container in your master page has a width that is causing you problems. You can be sure it has something to do with a fixed width that needs to be fluid.

You might also want to verify that all branding assets have been checked in a published if you are seeing differences between anonymous and authenticated users.

Eric
Mar 26, 2014 at 8:12 PM
Thanks Eric! Yes, I did do that and yes, dialogs are just wonderful. In any case, it is weird as Mozilla handles perfectly and looks great. Chrome and IE do not. (Not a surprise with IE as it really does not handle a lot very well!) However, I will try to go through my CSS; but figured something I missed since FF handles it just the way I want. :( Thanks again!
Apr 4, 2014 at 4:15 PM
Edited Apr 7, 2014 at 5:00 PM
I FINALLY got it. The line that I needed to add was:

/bootstrap resets for SharePoint/
.ms-dialog , :before, *:after {
    height: auto!important
}

Once I did this my modals work .....

Spoke too soon. This worked great for sizing my modals but screwed up the ribbon for editing purposes. So back to square one to figure out what needs to happen to get modals to size correctly for Chrome and IE. SIGH :(
Apr 10, 2014 at 1:51 AM
how about trying:
.ms-dialog, .ms-dialog:before, .ms-dialog:after, .ms-dialog *, .ms-dialog *:before, .ms-dialog *:after {
height: auto !important;
}
Your code was not purely targeting only dialogs.

Eric