Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

[Solved] RadCombo height - IE8

9 Answers 172 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Fred
Top achievements
Rank 1
Fred asked on 07 Dec 2009, 02:29 PM
radcomboie8.JPG

Hi,

I have a problem using the RadCombo with IE8.  The list of items exceeds the height of the control (see attached file).

How could i fix this issue?

I'm using version 2009.2.826.

Thank You!

9 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 10 Dec 2009, 09:27 AM
Hi Fred,

Could you please add the following css styles to your page and let us know how it goes?

.RadComboBoxDropDown .rcbScroll {
    overflow: auto !important;
}

Sincerely yours,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Fred
Top achievements
Rank 1
answered on 10 Dec 2009, 02:43 PM
Hi Yana,

Unfortunately, it didn't fixed the problem.
0
Yana
Telerik team
answered on 10 Dec 2009, 02:56 PM
Hello Fred,

Could you please send us a live url where we could observe this issue as we're not able to reproduce it? Thanks


Best wishes,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Fred
Top achievements
Rank 1
answered on 10 Dec 2009, 03:31 PM
You can go to http://44.autodev.2020.net/RadComboIE8.aspx.  Like I said before, the problem happens only in IE8.  With other versions/browsers, it works fine.

Thanks!
0
Yana
Telerik team
answered on 10 Dec 2009, 03:38 PM
Hello Fred,

Thank you for providing the url.

This css style should fix the problem:

.RadComboBoxDropDown_Web20  .rcbList {
  zoom: normal !important;
}


All the best,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Fred
Top achievements
Rank 1
answered on 10 Dec 2009, 04:08 PM

Hi Yana,

Even after adding the CSS class, the problem is still there.

Here is the code of the ASPX page and the CSS file. 

Thanks again.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadComboIE8.aspx.cs" Inherits="test_RadComboIE8" Theme="2020Beige" %> 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title>Untitled Page</title> 
</head> 
<body> 
    <form id="form1" runat="server">    
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">    
    </telerik:RadScriptManager>    
    <telerik:RadComboBox ID="RadComboBox1" runat="server" MaxHeight="100px" EnableEmbeddedSkins="False" Skin="Web20">    
        <Items>    
            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem1" Value="RadComboBoxItem1" />    
            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem2" Value="RadComboBoxItem2" />    
            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem3" Value="RadComboBoxItem3" />    
            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem4" Value="RadComboBoxItem4" />    
            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem5" Value="RadComboBoxItem5" />    
            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem6" Value="RadComboBoxItem6" />    
            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem7" Value="RadComboBoxItem7" />    
            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem8" Value="RadComboBoxItem8" />    
            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem9" Value="RadComboBoxItem9" />    
            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem10" Value="RadComboBoxItem10" />    
        </Items>    
    </telerik:RadComboBox>    
    </form>    
</body> 
</html> 
 
/* RadComboBox Web20 skin */ 
 
/*global*/ 
 
.RadComboBox_Web20 *  
{  
    margin:0;  
    padding:0;  
}  
 
.RadComboBox_Web20,  
.RadComboBox_Web20 .rcbInput,  
.RadComboBoxDropDown_Web20  
{  
    color: #555;  
}  
 
/* combobox */ 
 
.RadComboBox_Web20  
{  
    vertical-align: bottombottom;  
}  
 
.RadComboBox_Web20 table  
{  
    border: 0;  
}  
 
.RadComboBox_Web20 td  
{  
    border: 1px solid #004275;  
    border-width: 0;  
}  
 
.RadComboBox_Web20 td.rcbInputCell  
{  
    background: #FFF;  
    border-style: solid;  
    margin: 0;  
    padding: 0;  
    vertical-align: top;  
    width: 100%;  
}  
 
.RadComboBox_Web20 .rcbInputCellLeft  
{  
    border-width: 1px 0 1px 1px;  
}  
 
.RadComboBox_Web20 .rcbInputCellRight  
{  
    border-width: 1px 0 1px 1px;  
}  
 
.RadComboBox_Web20 .rcbDisabled .rcbInputCell .rcbInput   
{  
    color: #a9a9bb;  
}  
 
.RadComboBox_Web20 .rcbHovered .rcbInputCell  
{  
    background: #EBF5F7;  
}  
 
.RadComboBox_Web20 .rcbInputCell .rcbInput  
{  
    background: transparent;  
    border: 0;  
    font-size: 1em;  
    padding: 2px 0 2px 3px;  
    vertical-align: top;  
    width:100%;  
}  
 
.RadComboBox_Web20 .rcbInputCell .rcbEmptyMessage  
{  
    color: #ccc;  
    font-style: italic;  
}  
 
.RadComboBox_Web20_rtl .rcbInputCell .rcbInput  
{  
    padding: 1px 2px 0 0;  
}  
 
.RadComboBox_Web20 td.rcbArrowCell  
{  
    background: transparent url(RadComboBox/rcbArrowCell.gif) no-repeat 0 0;  
    border: solid #004275;  
    border-width: 1px 1px 1px 1px;  
    padding: 0;  
    width: 24px;  
}  
 
.RadComboBox_Web20 .rcbArrowCell a  
{  
    display: block;  
    font-size: 0;  
    height: 24px;  
    position: relative;  
    outline: none;  
    overflow: hidden;  
    text-decoration: none;  
    text-indent: -9999px;  
    width: 24px;  
}  
 
.RadComboBox_Web20 td.rcbArrowCellHidden,  
.RadComboBox_Web20 .rcbArrowCellHidden a  
{  
    border-left: 0;  
    border-right: 0;  
    width: 1px;  
}  
 
.RadComboBox_Web20_rtl .rcbArrowCell a  
{  
    text-indent: 9999px;  
}  
 
.RadComboBox_Web20 .rcbDisabled .rcbArrowCell a  
{  
    cursor: no-drop;  
}  
 
.RadComboBox_Web20 .rcbDisabled .rcbArrowCellHidden a  
{  
    cursor: default;  
}  
 
/* dropdown */ 
 
.rcbSlide  
{  
    display: none;  
    _height: 1px;  
    float: left;  
    overflow: hidden;  
    position: absolute;  
}  
 
.RadComboBoxDropDown_Web20  
{  
    background: #fff;  
    border: 1px solid #004275;  
    cursor: default;  
    font-size: 11px;  
    position: absolute;  
    text-align: left;  
}  
 
.RadComboBoxDropDown_Web20_rtl  
{  
    direction: rtl;  
    text-align: rightright;  
}  
 
.RadComboBoxDropDown_Web20 .rcbScroll  
{  
    overflow: auto !important;  
}  
 
.RadComboBoxDropDown_Web20 .rcbList,  
.RadComboBoxDropDown_Web20 .rcbList ul,  
.RadComboBoxDropDown_Web20 .rcbList li  
{  
    list-style: none;  
    margin: 0;  
    padding: 0;  
}  
 
.RadComboBoxDropDown_Web20  .rcbList {  
  zoom: normal !important;  
}  
 
 
.RadComboBoxDropDown_Web20 .rcbNoWrap .rcbList,  
.RadComboBoxDropDown_Web20 .rcbNoWidth .rcbList  
{  
    float: left;  
}  
 
.RadComboBoxDropDown_Web20 .rcbHeader,  
.RadComboBoxDropDown_Web20 .rcbFooter  
{  
    background: #F1F2E9;  
    color: #555;  
    font-weight: bold;  
    padding: 5px;  
}  
 
.RadComboBoxDropDown_Vista .rcbScroll ul,  
.RadComboBoxDropDown_Vista .rcbHeader ul,  
.RadComboBoxDropDown_Vista .rcbFooter ul,  
.RadComboBoxDropDown_Web20 .rcbHeader ul,  
.RadComboBoxDropDown_Web20 .rcbFooter ul  
{  
    list-style-image:none;  
}  
 
.RadComboBoxDropDown_Web20 .rcbHeader  
{  
    padding-left: 0;  
}  
 
.RadComboBoxDropDown_Web20 .rcbList ul,  
.RadComboBoxDropDown_Web20 .rcbHeader ul,  
.RadComboBoxDropDown_Web20 .rcbFooter ul,  
.RadComboBoxDropDown_Web20 .rcbItem ul,   
.RadComboBoxDropDown_Web20 .rcbHovered ul,   
.RadComboBoxDropDown_Web20 .rcbDisabled ul  
{  
    width: 100%;  
    display: inline-block;  
    margin: 0;  
    padding: 0;  
    list-style-type: none;  
}  
.RadComboBoxDropDown_Web20 .rcbList ul:hover  
{  
    background: #EBF5F7;  
}  
 
.RadComboBoxDropDown_Web20 .rcbList ul:after,  
.RadComboBoxDropDown_Web20 .rcbHeader ul:after,  
.RadComboBoxDropDown_Web20 .rcbFooter ul:after,  
.RadComboBoxDropDown_Web20 .rcbItem ul:after,   
.RadComboBoxDropDown_Web20 .rcbHovered ul:after,   
.RadComboBoxDropDown_Web20 .rcbDisabled ul:after  
{  
    content: ".";  
    display: block;  
    visibility: hidden;  
    font-size: 0;  
    line-height: 0;  
    height: 0;  
    clear: both;  
}  
 
.RadComboBoxDropDown_Web20 .col1,   
.RadComboBoxDropDown_Web20 .col2,   
.RadComboBoxDropDown_Web20 .col3  
{  
    float: left;  
    width: 120px;  
    margin: 0;  
    padding: 0 5px 0 0;  
    line-height: 14px;  
}  
 
.RadComboBoxDropDown_Web20 li.col1  
{  
    padding-left: 5px;  
}  
 
.RadComboBoxDropDown_Web20 .rcbNoWrap .rcbItem,  
.RadComboBoxDropDown_Web20 .rcbNoWrap .rcbHovered,  
.RadComboBoxDropDown_Web20 .rcbNoWrap .rcbDisabled,  
.RadComboBoxDropDown_Web20 .rcbNoWrap .rcbLoading  
{  
    whitewhite-space: nowrap;  
}  
 
.RadComboBoxDropDown_Web20 .rcbItem,  
.RadComboBoxDropDown_Web20 .rcbHovered,  
.RadComboBoxDropDown_Web20 .rcbDisabled,  
.RadComboBoxDropDown_Web20 .rcbLoading  
{  
    border-top: 1px solid #DDE0D9;  
    line-height: 26px;  
    padding: 4px 20px 4px 4px;  
    zoom: 1;  
}  
 
*+html .RadComboBoxDropDown_Web20 .rcbItem,  
*+html .RadComboBoxDropDown_Web20 .rcbHovered,  
*+html .RadComboBoxDropDown_Web20 .rcbDisabled,  
*+html .RadComboBoxDropDown_Web20 .rcbLoading  
{  
    zoom: normal;  
}  
 
.RadComboBoxDropDown_Web20_rtl .rcbItem,  
.RadComboBoxDropDown_Web20_rtl .rcbHovered,  
.RadComboBoxDropDown_Web20_rtl .rcbDisabled,  
.RadComboBoxDropDown_Web20_rtl .rcbLoading  
{  
    padding: 4px 4px 4px 20px;  
}  
 
.RadComboBoxDropDown_Web20 .rcbHovered  
{  
    background: #EBF5F7;  
    border-color: #DAE8EB;  
    color: #555;  
}  
 
.RadComboBoxDropDown_Web20 .rcbSeparator  
{  
    background: #F1F2E9;  
    color: #222;  
    line-height: normal;  
}  
 
.RadComboBoxDropDown_Web20 .rcbDisabled  
{  
    color: #ccc;  
    cursor: no-drop;  
}  
 
.RadComboBoxDropDown_Web20 .rcbLoading  
{  
    background: #004275;  
    color: #FFF;  
}  
 
.RadComboBoxDropDown_Web20 .rcbNoWidth .rcbLoading  
{  
    text-align: center;  
}  
 
.RadComboBoxDropDown_Web20 .rcbMoreResults  
{  
    background: #f3f3f3;  
    clear: both;  
    padding: 4px;  
    text-align: center;  
}  
 
.RadComboBoxDropDown_Web20 .rcbMoreResults a  
{  
    background: url(RadComboBox/rcbMoreResults.gif) no-repeat transparent;  
    cursor: pointer;  
    display: block;  
    height: 6px;  
    margin: 0 auto 2px;  
    overflow: hidden;  
    text-decoration: none;  
    text-indent: -3333px;  
    width: 6px;  
}  
 
.RadComboBoxDropDown_Web20 .rcbMoreResults a:hover  
{  
    background-position: 0 100%;  
}  
 
.RadComboBoxDropDown_Web20 .rcbMoreResults span  
{  
    display: block;  
    text-align: center;  
}  
 
.RadComboBoxDropDown_Web20 .rcbScroll  
{  
    /*
    scrollbar-face-color: #DAE8EB;
    scrollbar-highlight-color: white;
    scrollbar-shadow-color: #004275;
    scrollbar-3dlight-color: #DAE8EB;
    scrollbar-arrow-color: #fff;
    scrollbar-track-color: #DAE8EB;
    scrollbar-darkshadow-color: #404040;
    */ 
}  
 
/*hacks*/ 
 
/*Opera start*/ 
@media screen and (min-width:550px)  
{  
    .RadComboBoxDropDown_Web20_rtl .rcbItem,  
    .RadComboBoxDropDown_Web20_rtl .rcbHovered,  
    .RadComboBoxDropDown_Web20_rtl .rcbDisabled,  
    .RadComboBoxDropDown_Web20_rtl .rcbLoading  
    {  
        padding: 4px 4px 4px 20px;  
    }  
} /*Opera end*/ 

0
Accepted
Simon
Telerik team
answered on 11 Dec 2009, 12:38 PM
Hello Fred,

A recent fix in RadComboBox client-side code is causing this issue in older skins which miss the position:relative style set to the rcbScroll element. So adding the following CSS in your skin will fix the issue:

.rcbScroll
{
    position: relative;
}


Sincerely yours,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Fred
Top achievements
Rank 1
answered on 11 Dec 2009, 02:38 PM

Hello Simon,

Following the addition of the CSS class, it works!

 

Thanks!

0
Hans Gunnar
Top achievements
Rank 1
answered on 09 Feb 2010, 07:30 AM
Thank you for your solution, Simon. Just what I was looking for!
Tags
ComboBox
Asked by
Fred
Top achievements
Rank 1
Answers by
Yana
Telerik team
Fred
Top achievements
Rank 1
Simon
Telerik team
Hans Gunnar
Top achievements
Rank 1
Share this question
or