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 81 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 1
Dan asked on 12 Aug 2008, 03:55 PM
Good day,

I'm trying to increase the header height within the comboBox's dropdown list.  The is comboBox is version=2008.1.619.35.  I am using the built-in Sunset skin.  The comboBox is being used within a user control.  The user control is being used within a RadGrid.  The website has been setup to master/detail aspx pages.

Thanks.

8 Answers, 1 is accepted

Sort by
0
Veselin Vasilev
Telerik team
answered on 13 Aug 2008, 07:17 AM
Hi Twalker,

Can you please clarify what do you mean by header height?
Do you use Header Templates?

Best wishes,
Veskoni
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Dan
Top achievements
Rank 1
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
0
Veselin Vasilev
Telerik team
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
    backgroundnone
    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.
0
Dan
Top achievements
Rank 1
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.
0
Veselin Vasilev
Telerik team
answered on 22 Aug 2008, 08:49 AM
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  
{  
    height30px;  
    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.
0
Dan
Top achievements
Rank 1
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   
{   
    height30px;   
    background:url('<%= Page.ClientScript.GetWebResourceUrl(RadComboBox1.GetType(),"Telerik.Web.UI.Skins.Sunset.ComboBox.rcbHeader.gif")%>'repeat #f1f2f4;  
    padding5px 4px 0;  
}   
 
.RadComboBoxDropDown_Sunset .rcbFooter  
{  
    background:url('ComboBox/rcbHeader.gif'repeat-x #f1f2f4;  
    height19px;  
    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;


0
Accepted
Veselin Vasilev
Telerik team
answered on 25 Aug 2008, 10:34 AM
Hello Twalker,

Did this solve your problem?

Regards,
Veskoni
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Dan
Top achievements
Rank 1
answered on 25 Aug 2008, 01:14 PM
Hi Veskoni,

The issue with adjusting the header height within the RadCombbox has been resolved.  

I have a new issue with trying to using the code snippet you supplied into a custom theme for the RadCombobox control.

I will close this ticket and setup a new one for the css theme issue.

Thanks.
Tags
ComboBox
Asked by
Dan
Top achievements
Rank 1
Answers by
Veselin Vasilev
Telerik team
Dan
Top achievements
Rank 1
Share this question
or