SharePoint Blogs / SharePoint University
SharePoint Blogs and SharePoint University - all in one place!
Need SharePoint Training? Attend a SharePoint Bootcamp!

Please delete cookies related to sharepointblogs.com and sharepointu.com to resolve login issues!

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.


Posted 11-01-2007 9:26 AM by Waldek Mastykarz

Comments

Links (11/1/2007) « Steve Pietrek’s SharePoint Stuff wrote Links (11/1/2007) « Steve Pietrek’s SharePoint Stuff
on 11-01-2007 7:05 PM

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

SharePoint 2007 Link love: 11-19-2007, part four at Virtual Generations wrote SharePoint 2007 Link love: 11-19-2007, part four at Virtual Generations
on 11-19-2007 8:35 AM

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

Neil Mosafi wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 11-19-2007 12:11 PM

Hi

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

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

Regards

Neil

Waldek Mastykarz wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 11-20-2007 12:08 AM

Good job! Thanks for the link

Waldek Mastykarz wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 11-27-2007 1:40 AM

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.

Tuan Nguyen wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 12-12-2007 1:41 PM

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

Waldek Mastykarz wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 12-13-2007 3:30 AM

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

Internet Explorer Script Error » Blog Archive » CSS causes JavaScript error while moving Web Parts in edit mode wrote Internet Explorer Script Error » Blog Archive » CSS causes JavaScript error while moving Web Parts in edit mode
on 12-23-2007 11:33 PM

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

Neil Mosafi wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 03-28-2008 8:06 PM

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

Rui Alves wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 04-09-2008 8:16 AM

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

Rui Alves wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 04-09-2008 8:52 AM

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

Danya wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 05-14-2008 3:05 PM

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

Rui Alves wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 06-03-2008 5:40 AM

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

Emelie wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 06-13-2008 3:45 AM

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

Waldek Mastykarz wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 06-14-2008 2:41 AM

You're welcome :)

Darko wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 06-25-2008 3:34 AM

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

Waldek Mastykarz wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 06-25-2008 3:44 AM

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

Darko wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 06-25-2008 3:46 AM

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

Darko wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 06-25-2008 3:52 AM

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

Waldek Mastykarz wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 06-25-2008 3:59 AM

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.

Waldek Mastykarz wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 06-26-2008 12:19 AM

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.

Fikza wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 07-01-2008 6:48 AM

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

NightWalker wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 10-21-2008 10:57 AM

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.

Waldek Mastykarz wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 10-22-2008 2:12 AM

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?

NightWalker wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 10-22-2008 5:06 AM

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)

Waldek Mastykarz wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 10-22-2008 10:23 AM

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

NightWalker wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 10-23-2008 1:45 AM

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?

Waldek Mastykarz wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 10-27-2008 2:14 AM

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.

Chandra Ojha wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 11-06-2008 5:22 PM

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.

can't move web part on page | keyongtech wrote can't move web part on page | keyongtech
on 01-18-2009 10:26 AM

Pingback from  can't move web part on page | keyongtech

Midhun wrote re: CSS causes JavaScript error while moving Web Parts in edit mode
on 06-30-2009 8:19 AM

Thank you for the post ! Wish I saw this before I went through all the shebang of javascript !

Add a Comment

(required)  
(optional)
(required)  
Remember Me?
Need SharePoint Training? Attend a SharePoint Bootcamp!
Posts (c) their respective authors. Everything else (c) 2009 SharePoint Experts, Inc.