Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / ComboBox / Fixing DropDown position of RadComboBox when in RadWindow or RadPane

Fixing DropDown position of RadComboBox when in RadWindow or RadPane

Article Info

Rating: 3

Article information

Article relates to

RadControls

Created by

 Simon, Telerik

Last modified by

 Simon, Telerik

HOW-TO
Fix the position of the DropDown of a RadComboBox which is located in a RadPane or in a RadWindow.

SOLUTION
The DropDown should be adjusted manually by applying an appropriate offset - top or/and left (margin-left or/and margin-top CSS properties). In order to do this, CSS styles should be applied on the content page where the RadComboBox is located according to the parent container and the browser as follows:



 CSS Style Rule
 Parent Container
 Browser
 *html .rcbSlide { margin-left: 2px !important; margin-top: 2px; }   RadPane
 and
 RadWindow
  IE6
 *+html .rcbSlide { margin-left: -1px !important; margin-top: -1px; }  RadPane  IE7
 @media screen and (min-width:50p {
        html:first-child .rcbSlide { margin-left: 2px; }}		  RadPane
 and
 RadWindow		  Opera
 @media screen and (min-width:50p {
        :root .rcbSlide { margin-top: -1px; }}		  RadPane
 and
 RadWindow		  Safari



In the Classic version of RadComboBox CSS selector names are different. More specifically the .rcbSlide equivalent in Classic RadComboBox is ComboBoxDropDown_[SkinName].

Another thing is that the Drop Down is located in an IFrame and its style should be corrected, as well. The IFrame have only ID which is constructed in this way: [RadComboBox.ClientID]_Overlay.

Finally, CSS styles should be applied on the content page where the RadComboBox is located according to the parent container and the browser as follows:

 CSS Style Rule
 Parent Container
 Browser
 *html .ComboBoxDropDown_[SkinName] { margin-left: 2px !important; margin-top: 2px; }

 *html #[RadComboBox.ClientID]_Overlay { margin-left: 2px !important; margin-top: 2px; } 		 RadPane
 and 
 RadWindow
  IE6
 *+html .ComboBoxDropDown_[SkinName] { margin-left: 2px !important; margin-top: 2px; }

 *+html #[RadComboBox.ClientID] { margin-left: 2px !important; margin-top: 2px; }		  RadPane
 and
 RadWindow
  IE7

Note that the corresponding values may need to be tweaked for each specific case and the skin of the RadComboBox currently in use.

Comments

  • Sebastian , Sep 8, 2008

    Can you, please post a working example when this is applied, please? I don't understand where I must include the css Style Rule. I'm using the radControl for ajax ASP.NET. Thanks.

  • Telerik Admin , Oct 17, 2008

    You need to add these in the <head> section of your aspx page.

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.