CSS and ASP.NET Menu in Sharepoint
Using CSS in SharePoint differs a little bit from the standard approach we use in ASP.NET applications – some styles doesn”t work as they expected to work.
The major problem is that SharePoint doesn”t understand some CSS applied on ASP.NET ?ontrols. I stumbled over several cases. There is a simple rule how to avoid this – just use the SharePoint controls instead of ASP.NET once. In this cases CSS will be applied correctly
The nastiest thing I remember about CSS and Sharepoint is using asp:Menu control :,,) This control is very dodgy under normal asp.net sites, but it”s double dodgy under Sharepoint.
The situation is that – you have page area height equal 100% of client browser height. It means that if you change the size of your browser window page layout height is changing too. On this page we have navigation which is implemented via <asp:Menu> control. So far so good, but there is a small issue. If you navigate on menu and dynamic sub-items are shown your page height changes and you noticing that vertical scroll bar is shown. WTF you could think 🙂 Why this scroll bar appears?! This never happens in ASP.NET sites.
The answer is – CSS “min-height” property. This property sets the minimum height of your page when scroll bar appears. So, what you do is just edit your page and add the .min-height: 2000 for the page”s root element and test the page in browser.
Unfortunately, situation the same – scroll bar appears when your menu items are shown. You can use IE Dev Toolbar of other tool to debug DOM model in browser, but changing this property doesn”t help at all.
The issue is exactly in <asp:Menu> control. I dunno why but it breaks the page CSS style of min-height (I”d pleased if someone explain me WHY and HOW this happens?!). To fix this you need to use <Sharepoint:AspMenu> control instead of <asp:Menu> and min-height is set correctly in this case – no scroll bar when you navigate on menu.
January 29, 2010@ 9:45 pm
Hi,
I have extend My link delegate control to create a custom My links. But I am not sure how to make the control to display different name other then “My Links”..
Any Ideas,
Thanks in Advance.
Veera.
veera.c@gmail.com
January 30, 2010@ 11:00 am
I reckon you need to subclass the delegate control and create your own one. However I didn”t try 🙂
See this
http://www.jamestsai.net/Blog/post/How-to-use-SharePoint-Delegate-Control-to-change-the-navigate-URL-of-Manage-Links-(My-Links).aspx
February 19, 2010@ 8:05 am
Got the same error with asp:menu control. when i get lower than bottom of the browser, the flyouts dont activate beside the hover position.
Problem with using sharepoint:aspmenu is that the flyouts dont activate at all.
So i think i will be looking at jquery to produce similar menu on this.
March 17, 2010@ 11:43 am
I”m a new bee in sharepoint. I”m using asp.net menu (horizontal) in sharepoint. It works well to provide dynamic control over menu content. I”m facing issues in applying css to this control, specially while displaying the submenu items.
Please guide me in this direction.
March 17, 2010@ 12:16 pm
What is the issue you are experiencing and which version of IE are you using?!