SharePoint 2010 Dropown list from Lookup column appears in the wrong place!!
Experiencing some strange behaviour when selecting options from a drop down list from a lookup column while developing a SharePoint 2010 application, I immediately thought that I had developed some erroneous styles in my css.
Upon further investigation and testing with no custom style sheets using only the out of the box V4 master page and core css I quickly realised that this is a SharePoint "Feature" (bug)!
Selecting the lookup drop down list with more than 20 items
A quick search to see if I could find an elegant solution to my problem and all of the recommendations that I found in blogs, forums and articles involved developing code to override the 20 items or more rendering of the drop down list select box to use the standard drop down list.
I didn't think that was good enough and so I decided to carry out some problem solving of my own, after about 10 minutes of tinkering with IE developer tools and my stylesheet I came up with a very neat and tidy 2 line CSS fix.
Microsoft - Why haven't you though of this??
Solution
Add the following styles to a custom style sheet referenced by your site!select
{
position: inherit !important;
display: block;
}
more than 20 lookup items looking good!
If you have any comments please let me know, thanks for checking out Planet SharePoint blog!!
I'm trying to accomplish this but can't figure out which CSS to add the code to. Can I do this as a site user/admin on SP2010? Or must I be a server admin? Would I add this to the NewForm.aspx code or to a sitewide CSS - if so, which one? Thanks!
ReplyDeleteYou should add this to a site wide CSS file. Best practice would be to specify a custom CSS file for your site and add to this. You could modify the core.CSS file and add to the bottom but I try to steer clear of modifying oob SharePoint files were possible
DeleteI've created a custom CSS file containing only the styles for the select, uploaded it to the Style Library. Then I've changed the Masterpage settings under Alternate CSS URL to inherit from my custom CSS file.
ReplyDeleteUnfortunately it does NOT work.