This is a migrated thread and some comments may be shown as answers.

How do I adjust the header height within the control's dropdown list?

8 Answers 120 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

8 Answers, 1 is accepted

answered on 13 Aug 2008, 05:59 PM

Hi Veskoni,

Yes I am using Header Templates for my RadCombox.

    
             <HeaderTemplate> 
        
                  <table style="width: 820px; border: 0;">  
        
                         <tr> 
        
                             <td style="width: 100px;">Sku</td> 
        
                             <td style="width: 200px;">Description</td> 
        
                             <td style="width: 50px;">Status</td> 
        
                             <td style="width: 50px;">Available</td> 
        
                             <td style="width: 50px;">Store OnHand</td> 
        
                             <td style="width: 50px;">Store OnOrder</td> 
        
                             <td style="width: 50px;">Whse OnHand</td> 
        
                             <td style="width: 50px;">Whse OnOrder</td> 
        
                             <td style="width: 50px;">Whse Allocated</td> 
        
                             <td style="width: 50px;">Whse Held</td> 
        
                        </tr> 
        
                </table> 
        
            </HeaderTemplate>

Regards,

Twalker

answered on 18 Aug 2008, 12:42 PM

Hello Twalker,

To adjust the height please add this CSS rule to the <head> section of your page:

    
            <style type="text/css"> 
        
            div.RadComboBoxDropDown_Sunset .rcbHeader 
        
            { 
        
                height: 50px; 
        
                background: none; 
        
                background-color: #ffa52f; 
        
            } 
        
            </style>

I hope this helps.

Kind regards,
Veskoni
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

answered on 19 Aug 2008, 01:07 AM

Thank you Veskoni the css scripted worked.

Now I noticed you set the a background colour to the control. Is there no way to extend the background image to maintain the same consistant look throughout the control?

I tried later to move the css code snippet into a customized Sunset script for the Radcombobox. It did not change the visual appearance of my Radcombobox control.

I placed the reference link to the customized css Sunset theme within my usercontrol. I made sure to disable embedded skin themes within the Radcombobox.

I wondering if this is due to the Radcomboxbox being used within a usercontrol.

Thanks for the help.

answered on 22 Aug 2008, 08:49 AM

HeaderTemplate.zip

Hello Twalker,

Yes, you can use the image instead of the background-color. I have changed the CSS rule to:

    
            <style type="text/css">  
        
            div.RadComboBoxDropDown_Sunset .rcbHeader  
        
            {  
        
                height: 30px;  
        
                background:url('<%= Page.ClientScript.GetWebResourceUrl(RadComboBox1.GetType(),"Telerik.Web.UI.Skins.Sunset.ComboBox.rcbHeader.gif")%>') repeat #f1f2f4; 
        
            }  
        
            </style>

This uses the built-in rcbHeader image. If you need to use the resized image - you can resize it and put the appropriate url to the new image.

I faced no problem with this CSS rule in web user control. I have attached my sample project - please download it and give it a try.

Regards,
Veskoni
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

answered on 22 Aug 2008, 01:29 PM

Hi Veskoni,

Thanks for the example. I did have problems putting the style code back into a customized theme for the Radcombobox. Here is the chagnes I made to the Sunset theme for the Radcombobox.

    
            .RadComboBoxDropDown_Sunset .rcbHeader   
        
            {   
        
                height: 30px;   
        
                background:url('<%= Page.ClientScript.GetWebResourceUrl(RadComboBox1.GetType(),"Telerik.Web.UI.Skins.Sunset.ComboBox.rcbHeader.gif")%>') repeat #f1f2f4;  
        
                padding: 5px 4px 0;  
        
            }   
        
            .RadComboBoxDropDown_Sunset .rcbFooter  
        
            {  
        
                background:url('ComboBox/rcbHeader.gif') repeat-x #f1f2f4;  
        
                height: 19px;  
        
                color: #fff;  
        
            }

I then placed a link reference back into the user control file:

    
            <link href="App_Themes/Theme1/ComboBox.Sunset.css" rel="stylesheet" type="text/css" />

I set the Radcombobox's property EnableEmbeddedSkins to false;

Accepted