branding problems in sharepoint2010

Question

I am stuck in a situation where I do not understand the default behavior of SharePoint 2010 while using SPModalDialog. I am using codeplex starter.master for further customising and branding. I override the following CSS classes:

<style type="text/css">

  /*--Hide Quick Launch --*/
       #s4-leftpanel{
              display:none
              }                    
       /*--set UI for Main Form  --*/
       .s4-ca{
              margin-left:0px;
              background-color: transparent;
              }
       /*--Hide Social tags --*/
       .s4-socialdata-notif{
              visibility:hidden;
              }

/*-- hides status bar */                        
       body #s4-statusbarcontainer{
       display:none;
              }


/* handles scroll of workspace*/
       body #s4-workspace {
       overflow-y: scroll;
       overflow-x: auto;
       position: relative;
            left: 0px;
                                  }

   form
    {
        width: 960px;
        margin-left: auto;
        margin-right: auto;
    }

    body #s4-workspace
    {

        width: 960px !important;
        overflow: auto !important;
    }

   /* sets padding of ribbon  */
    body #s4-ribboncont
    {
        padding-left: 0px;
    }



/* hides the body of ribbon */
.ms-cui-topBar2
{
  border-bottom: thin transparent hidden;
}

and replace title with my custom title. I put my custom controls in:

 <div id="s4-workspace" class="s4-nosetwidth">
        <!-- NOTE: s4-nosetwidth is used when you are setting a fixed page width in css, remove for 100% -->
        <div id="s4-bodyContainer">
            <div id="s4-titlerow" class="s4-pr s4-notdlg s4-titlerowhidetitle">

The rest I keep as it is.

Everything works fine as normal SharePoint behavior, but when I open a modal dialog it behaves in some different way. Here are the issues:

1. When the modal dialog box opens the parent page does not black out.

2. The parent page still shows the vertical scroll bar.

3. When the page content is long and there is scrollbar on the page and the button to open modal dialog is at the bottom, when I click the button the modal dialog opens up at the top of the page. i.e. I have to scroll-up the parent page to the top an then work in dialog box.

4. After closing the dialog the page keeps the scroll position at the top.

Is there any work around or any resolution to these issues?

Answer 1

Instead of chasing the sharepoint gremlins, try removing the styles for the S4 and adding your own div to fix the width.