in

SharePoint Blogs

The Best Place for SharePoint-related Blogs

Tech MOSS Team

CSS causes JavaScript error while moving Web Parts in edit mode

While working on an Internet facing Web Content Management SharePoint 2007 solution for one of our customers Erik has stumbled upon an interesting by-design feature in SharePoint 2007. At some point he has noticed that he couldn’t move Web Parts anymore: clicking on any of the title bars would result in a JavaScript error.

When I’ve heard about this behaviour I almost immediately thought about the custom JavaScript code delivered by the interactive designer. Removing all of this from the Master Page has unfortunately proven that the custom JavaScript worked just fine and had nothing to do with the issue.

By debugging the error message I have found out that the error is being caused by a JavaScript function belonging to SharePoint: MSOLayout_GetRealOffset. Running through page’s elements using DOM made me think about the custom Web Controls we have made. I have suspected overriding one of the render methods improperly causing the error. Still after stripping the Master Page from all the custom controls didn’t help.

The last remaining piece of customization left were the various CSS files delivered by the designer. Run of ideas I removed it as well and... voillá – the bug was gone and the Web Parts could have been moved again!

After some research I have discovered that the error has been caused by the position property used with anything else than static. The error occurs while processing parent elements of the selected Web Part. The exception is being caused by uncaught attempt of reading the offset property of a null object. It seems like altering the position property causes the parent object (container) to be set to null.

This behaviour occurs only in Internet Explorer: it’s the only browser that allows dragging & dropping Web Parts. As there are not many client side script debug tools for Internet Explorer available, it’s quite difficult to find out the exact reason of this error at this point.

The best you can do at this moment is to avoid relative of absolute positioned wrappers containing Web Part zones. While fixing the chrome I have replaced the implemented position functionality with float. It works perfectly and you can't see any difference in the positioning of elements on the page. Another option is to set this property only in the View Mode. You have to note that the editing experience will vary (depends on the complexity of your chrome) from the view experience.

If you would like to research this bug further I have the very basic Master Page and an empty Page Layout for you. What you have to do is create a new Publishing Web and set the Master Page to the one I’ve made. Then you need to create a new Publishing Page using my empty Page Layout. The next step is to add a new Web Part (doesn’t matter which one). As soon as you will try to drag it, you will get a JavaScript error. As soon as you remove the inline style of the div wrapper the error will disappear.

Comments

 

Links (11/1/2007) « Steve Pietrek’s SharePoint Stuff said:

Pingback from  Links (11/1/2007) « Steve Pietrek’s SharePoint Stuff

November 1, 2007 7:05 PM
 

SharePoint 2007 Link love: 11-19-2007, part four at Virtual Generations said:

Pingback from  SharePoint 2007 Link love: 11-19-2007, part four at  Virtual Generations

November 19, 2007 8:35 AM
 

Neil Mosafi said:

Hi

I posted a solution for this problem which you might be interested in.

neilmosafi.blogspot.com/.../sharepoint-dragging-webparts-causes.html

Regards

Neil

November 19, 2007 12:11 PM
 

Waldek Mastykarz said:

Good job! Thanks for the link

November 20, 2007 12:08 AM
 

Waldek Mastykarz said:

The fix of Neil Mosafi needs to put it in the body. First of all I've referenced it as the last item in the head section and it didn't work. Then I've put the function definition in the header also as the last item and still without any results. I've figured out it needs to be put anywhere within the ASP.NET form area to work properly.

November 27, 2007 1:40 AM
 

Tuan Nguyen said:

I get a little different error message when trying edit/close/delete a webpart, and using Neil's script did not resolve the issue. Below is the error:

Line: 2135

Char: 4

Error: 'style.display' is null or not an object

Code: 0

URL:

Do you have any trick to solve this issue?

Thanks,

Tuan

December 12, 2007 1:41 PM
 

Waldek Mastykarz said:

Where have you put the override function in your document? Are you sure it is the one that is being used by SharePoint?

December 13, 2007 3:30 AM
 

Internet Explorer Script Error » Blog Archive » CSS causes JavaScript error while moving Web Parts in edit mode said:

Pingback from  Internet Explorer Script Error  » Blog Archive   » CSS causes JavaScript error while moving Web Parts in edit mode

December 23, 2007 11:33 PM
 

Neil Mosafi said:

Would love to solve Tuan's issue but he would need to debug it and let me know where the code was failing.  As for where to place the code, I think as long as you place it AFTER the SPWebPartManager (which I did say in my post) then you should be alright.

Regards

Neil

March 28, 2008 8:06 PM
 

Rui Alves said:

Hello All,

I think I know what is Twan´s problem.

I had this problem and I think the problem was I didnt had ensurechildcontrols() or base.CreateChildControls(); or something like that and he didnt created unique id like for example MSOZoneCell_WebPartWPQ5.

Now I have the same problem of this page and I want  to see Neil Mosafi solution but some sites are bloqued at my work.... only can only see later at home.

Regards,

Rui Alves

April 9, 2008 8:16 AM
 

Rui Alves said:

Hello Again,

I managed to see Neil Mosafi solution, thank you!!!  it solved my problem!!! Moss never stops suprising me...

About tuan´s problem I tried to reproduce the problem and I couldn´t... but somethings may be the cause of the problem:

- Not having this.ExportMode = WebPartExportMode.All;

- not having Guid, maybe...

- Overriding childcontrols and not puting base.childcontrols

- not having ensurechildcontrols, maybe?

Best Regards,

Rui Alves

April 9, 2008 8:52 AM
 

Danya said:

I am exactly facing the same issues a what tuan´s facing. I am getting this error when I am CEWP

Kindly help me to resolve the issue

May 14, 2008 3:05 PM
 

Rui Alves said:

I cant remember the cause but I know why it was giving this error in my case:

- I was adding a particular webpart that was ruining it all.

- The reason I dont remember but I saw view source of page and the webpart ID had only "webpart" written in it, and not "MSOZoneCell_WebPartWPQ#" like the other sharepoint webparts.

- So the reason is that the control is not being created correctly...something to do with render or base.createchildcontrols I believe...

#: number

June 3, 2008 5:40 AM
 

Emelie said:

Thank you SO much. I had the exact same problem and this saved me a lot of time=)

June 13, 2008 3:45 AM
 

Waldek Mastykarz said:

You're welcome :)

June 14, 2008 2:41 AM
 

Darko said:

Hi,

I have a silly problem, I can't move webparts in different webpart zones, it just selects the content.

I'm i missing some property or?

My webparts are user controls.

Regards,

Darko

June 25, 2008 3:34 AM
 

Waldek Mastykarz said:

Unless you're using SmartPart, UserControls are not being seen as Web Parts and therefore you cannot use the drag & drop functionality.

June 25, 2008 3:44 AM
 

Darko said:

P.S. I don't have position property, and I don't get javascript error

June 25, 2008 3:46 AM
 

Darko said:

Well, I tried  with the built in webparts from SharePoint, but the same i s happening.

I don't understand. You can use User Controls as Web Parts

June 25, 2008 3:52 AM
 

Waldek Mastykarz said:

Then it would mean that you have a JavaScript error somewhere along the way. Remove all references to custom JavaScript and try again.

User Controls can't be used as Web Parts out of the box. SmartPart is one of the available wrappers which allows you to use User Controls as Web Parts.

June 25, 2008 3:59 AM
 

Waldek Mastykarz said:

Do you have the standard SharePoint JavaScript files included? What you could try is to change the Master Page to default and check whether it would work.

June 26, 2008 12:19 AM
 

Fikza said:

I cant drag and drop Web parts like i did in Visual Studio 2005, currently im using Visual Studio 2008

July 1, 2008 6:48 AM
 

NightWalker said:

Hi,

I am facing a similar kind of problem. One of my web part is not functioning properly. First, I thought it might be web part problem but when I used the same web part in my another SharePoint Site in another server(which is kind of replica of the main sharepoint srever), it worked fine.

Then, I saw that the web part is actually accessing another web part on the page. This wab part is showing Java Script error ( style.display problem) when I am trying to click on the down arrow given on the web part.

I am a bit confused, if this could be the problem as my web part might not be able to access this web part with the java script problem. Could you please guide me with this.

Another part is that since this Sharepoint server is a live server, would it be safe to use the Javascript function as given by Mr.Neil Mosafi .It would be great if you could guide me with this.

Thanks in anticipation.

October 21, 2008 10:57 AM
 

Waldek Mastykarz said:

Could you tell me something more about the Master Page/Page Layout you're using? Are these custom or out of the box? Are there any other JavaScript errors along the way?

October 22, 2008 2:12 AM
 

NightWalker said:

Waldek, there are no Javascript error along the way.

Moreover, and much more important thing is that the SharePoint site is distributed in 3 Servers for load balancing and SharePoint Designer is installed in a development Server. Now, if I use the SharePoint designer to open the site from the developmeent Server and place the Java script, would it be replicated to all the servers (the 3 servers wher the Sharepoint is distributed)

October 22, 2008 5:06 AM
 

Waldek Mastykarz said:

If all the servers use the same content DB, the JavaScript will be visible on all the servers.

October 22, 2008 10:23 AM
 

NightWalker said:

I have placed the script in the master page below the SPWebPartManager as shown below:

<form runat="server" onsubmit="return _spFormOnSubmitWrapper();">

<WebPartPages:SPWebPartManager id="m" runat="Server"/>

<aspajax:ScriptManager runat="server" ID="ScriptManager1" EnablePartialRendering="true"></aspajax:ScriptManager>

<script language="javascript" type="text/javascript">

           function MSOLayout_GetRealOffset(StartingObject, OffsetType, EndParent)

           {

               var realValue=0;

               if (!EndParent) EndParent=document.body;

               for (var currentObject=StartingObject; currentObject && currentObject !=EndParent && currentObject != document.body; currentObject=currentObject.offsetParent)

               {

                   var offset = eval('currentObject.offset'+OffsetType);

                   if (offset) realValue+=offset;

               }

               return realValue;

           }

</script>

I then saved it however, still the page is showing the same Java script error. Could you guide with an alternate solution for it?

October 23, 2008 1:45 AM
 

Waldek Mastykarz said:

I don't think your problem has anything to do with the original topic of this article. I would advise you to give it a try @ SharePoint forums on MSDN. There is a chance some else has  experienced the same problem and has a solution for you.

October 27, 2008 2:14 AM
 

Chandra Ojha said:

The best way to resolve this issue is to specify a

.body

{

position:relative;

}

tag for body element. That will resolve the issue of finding the parent of any other boxes under the body element.

November 6, 2008 5:22 PM

Leave a Comment

(required )  
(optional )
(required )  
Add

About Waldek Mastykarz

Waldek Mastykarz is a Dutch SharePoint 2007 developer specialized in Web Content Management solutions in Microsoft Office SharePoint Server 2007, web standards and accessibility.

Need SharePoint Training? Attend a SharePoint Bootcamp!

Posts (c) their respective authors. Everything else (c) 2007 SharePoint Experts