RadComboBox text appears over arrow...

8 posts, 0 answers
  1. Karl
    Karl avatar
    172 posts
    Member since:
    Sep 2010

    Posted 15 Mar 2011 Link to this post

    I have just created a combobox on my page and need to skin it so it fits with my site and have come across an issue that I can't figure out.

    When an item is selected in the combobox that has a length greater than that of the control, the text for the selected value over runs slightly and text appears outside of the input area and over the arrow icon on the end. I have attached a blown up screen shot of my control to show what I mean.

    Below is the code used to build my control, as well as the stylesheet which I have properly referenced in my page.

    Can anyone spot whats causing this and how I'd go about fixing it?

    Thanks
    Karl

    <telerik:RadComboBox 
            id="Test15" 
            runat="server" 
            width="200px" 
            Skin="Probitas" 
            EnableEmbeddedSkins="false"
            EmptyMessage="Select a value...">
        <Items>
            <telerik:RadComboBoxItem Text="One" Value="1" />
            <telerik:RadComboBoxItem Text="Two" Value="2" />
            <telerik:RadComboBoxItem Text="Three" Value="3" />
            <telerik:RadComboBoxItem Text="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789" Value="All" />
        </Items>
    </telerik:RadComboBox>

    and the stylesheet...
    /* RadComboBox Simple skin */
      
    /*global*/
      
    .RadComboBox_Probitas,
    .RadComboBox_Probitas .rcbInput,
    .RadComboBoxDropDown_Probitas
    {
        font: 12px "Segoe UI", Arial, sans-serif;
        color: #333;
    }
      
    /* combobox */
      
    div.RadComboBox_Probitas table td.rcbInputCell
    {
        height: 18px;
        line-height: 18px;
        border: 1px solid #10568A;
        background: #fff;
    }
          
    * html div.RadComboBox_Probitas table td.rcbInputCell
    {
        height /**/: 20px;
        line-height /**/: 20px;
    }
      
    div.RadComboBox_Probitas table td.rcbInputCellLeft { border-width: 1px 0 1px 1px; }
    div.RadComboBox_Probitas table td.rcbInputCellRight { border-width: 1px 1px 1px 0; }
      
    * html div.RadComboBox_Probitas .rcbInputCell .rcbInput
    {
        height /**/: 16px;
        padding /**/: 2px 0; /* This should fix the ajax introduced height in IE7 and not break IE6 */
    }
      
    .RadComboBox_Probitas .rcbInputCell .rcbEmptyMessage
    {
        color: #666;
    }
      
    .RadComboBox_Probitas .rcbHovered .rcbInputCell .rcbInput,
    .RadComboBox_Probitas .rcbFocused .rcbInputCell .rcbInput { color: #333333; }
      
    div.RadComboBox_Probitas table td.rcbArrowCell
    {
        border: 1px solid #10568A;
        background: #fff url('ComboBox/rcbSprite.png') no-repeat -1px 50%;
    }
      
    div.RadComboBox_Probitas .rcbReadOnly .rcbArrowCellLeft,
    div.RadComboBox_Probitas .rcbArrowCellHidden.rcbArrowCellLeft { border-width: 1px 1px 1px 1px; }
    div.RadComboBox_Probitas .rcbReadOnly .rcbArrowCellRight,
    div.RadComboBox_Probitas .rcbArrowCellHidden.rcbArrowCellRight { border-width: 1px 1px 1px 1px; }
      
    .RadComboBox_Probitas td.rcbArrowCell { background-position: -1px 50%; }
    .RadComboBox_Probitas .rcbHovered .rcbArrowCell { background-position: -21px 50%; }
    .RadComboBox_Probitas .rcbFocused .rcbArrowCell { background-position: -41px 50%; }
    .RadComboBox_Probitas .rcbDisabled .rcbArrowCell { background-position: -61px 50%; }
      
    .RadComboBox_Probitas .rcbReadOnly td.rcbArrowCell { background-position: -2px 50%; }
    .RadComboBox_Probitas .rcbHovered .rcbReadOnly .rcbArrowCell { background-position: -22px 50%; }
    .RadComboBox_Probitas .rcbFocused .rcbReadOnly .rcbArrowCell { background-position: -42px 50%; }
    .RadComboBox_Probitas .rcbDisabled .rcbReadOnly .rcbArrowCell { background-position: -62px 50%; }
      
    .RadComboBox_Probitas td.rcbArrowCellHidden,
    .RadComboBox_Probitas .rcbHovered td.rcbArrowCellHidden,
    .RadComboBox_Probitas .rcbFocused td.rcbArrowCellHidden,
    .RadComboBox_Probitas .rcbReadOnly td.rcbArrowCellHidden,
    .RadComboBox_Probitas .rcbHovered .rcbReadOnly .rcbArrowCellHidden,
    .RadComboBox_Probitas .rcbFocused .rcbReadOnly .rcbArrowCellHidden,
    .RadComboBox_Probitas .rcbDisabled .rcbReadOnly .rcbArrowCellHidden,
    .RadComboBox_Probitas table.rcbDisabled td.rcbArrowCellHidden  
    {
        /*background: #none; */
        background: #ffffff; 
    }
      
      
    .RadComboBox_Probitas .rcbHovered .rcbArrowCell,
    .RadComboBox_Probitas .rcbHovered .rcbReadOnly .rcbInputCell,
    .RadComboBox_Probitas .rcbHovered .rcbReadOnly .rcbArrowCellHidden { background-color: #ffffff; }
    .RadComboBox_Probitas .rcbFocused .rcbArrowCell,
    .RadComboBox_Probitas .rcbFocused .rcbReadOnly .rcbInputCell,
    .RadComboBox_Probitas .rcbFocused .rcbReadOnly .rcbArrowCellHidden { background-color: #ffffff; }
      
    div.RadComboBox_Probitas .rcbHovered .rcbArrowCell,
    div.RadComboBox_Probitas .rcbHovered .rcbInputCell { border-color: #10568A; }
    div.RadComboBox_Probitas .rcbFocused .rcbArrowCell,
    div.RadComboBox_Probitas .rcbFocused .rcbInputCell { border-color: #10568A; }
    div.RadComboBox_Probitas .rcbDisabled .rcbArrowCell,
    div.RadComboBox_Probitas .rcbDisabled .rcbInputCell { border-color: #10568A; }
      
    div.RadComboBox_Probitas .rcbArrowCell a
    {
        height: 20px;
    }
      
    div.RadComboBox_Probitas td.rcbArrowCellHidden,
    div.RadComboBox_Probitas .rcbArrowCellHidden a
    {
        width: 1px;
    }
      
    div.RadComboBox_Probitas td.rcbArrowCellHidden.rcbArrowCellRight
    {
        border-left: 1px solid #10568A;
    }
      
    /* Read-only styles */
      
    /* dropdown */
      
    .RadComboBoxDropDown_Probitas
    {
        background: #fff;
        border-color: #10568A;
    }
      
    .RadComboBoxDropDown_Probitas .rcbHeader,
    .RadComboBoxDropDown_Probitas .rcbFooter
    {
        background: #e4e4e4;
        color: #000;
    }
      
    .RadComboBoxDropDown_Probitas .rcbHeader
    {
        border-bottom-color: #10568A;
    }
      
    .RadComboBoxDropDown_Probitas .rcbFooter
    {
        border-top-color: #10568A;
    }
      
    .RadComboBoxDropDown_Probitas .rcbItem em
    {
        background: #ffffff;
    }
      
    div.RadComboBoxDropDown_Probitas .rcbHovered
    {
        background: #ffffff;
        color: #ffffff;
        border: 1px solid #10568A;
        padding: 1px 5px;
    }
      
    .RadComboBoxDropDown_Probitas .rcbSeparator
    {
        color: #cc0000;
        background: #0000cc;
      
        /*
        color: #fff;
        background: #8a8a8a;
        */
    }
      
    .RadComboBox_Probitas .rcbDisabled .rcbInputCell .rcbInput,
    .RadComboBoxDropDown_Probitas .rcbDisabled
    {
        color: #888888;
    }
      
    .RadComboBoxDropDown_Probitas .rcbLoading
    {
        background: #ffffff;
    }
      
    .RadComboBoxDropDown_Probitas .rcbMoreResults
    {
        border-top-color: #10568A;
        background: #ffffff;
        color: #333333;
    }
      
    .RadComboBoxDropDown_Probitas .rcbMoreResults a
    {
        background: url('ComboBox/rcbSprite.png') no-repeat -1px -85px;
    }
      
      
      
      
      
      
      
      
      
    div.RadComboBox_Probitas .rcbInputCell 
    {
        border-color: #10568A;
    }
      
    .RadComboBox_Probitas .rcbInput 
    {
        color: #000000;
    }
      
    DIV.RadComboBox_Probitas .rcbArrowCell 
    {
        border-color: #10568A;
    }
      
    div.RadComboBox_Probitas .rcbHovered .rcbInputCell 
    {
        border-color: #10568A;
    }
      
    div.RadComboBox_Probitas .rcbHovered .rcbInput 
    {
        color: #000000;
    }
      
    .RadComboBox_Probitas .rcbHovered .rcbArrowCell 
    {
        border-color: #10568A;
        background-color: #FFFFFF;
    }
      
    div.RadComboBox_Probitas .rcbFocused .rcbInputCell 
    {
        border-color: #10568A;
    }
      
    div.RadComboBox_Probitas .rcbFocused .rcbInput 
    {
        color: #000000;
    }
      
    div.RadComboBox_Probitas .rcbFocused .rcbArrowCell 
    {
        background-color: #FFFFFF;
    }
      
    div.RadComboBox_Probitas .rcbDisabled .rcbInputCell 
    {
        border-color: #888888;
    }
      
    div.RadComboBox_Probitas .rcbDisabled .rcbArrowCell 
    {
        border-color: #888888;
    }
      
    div.RadComboBoxDropDown_Probitas 
    {
        border-color: #10568A;
    }
      
      
    div.RadComboBoxDropDown_Probitas .rcbHeader 
    {
        background-color: #BCD1E1; /*light blue*/
    }
    div.RadComboBoxDropDown_Probitas .rcbHovered 
    {
        border: #10568A 1px solid;
        background-color: #BCD1E1;
        color: #000000;
    }
      
      
      
      
      
    /*General*/
    div.RadComboBox_Probitas .rcbInputCell 
    {
        border-color: #10568A;
        border-right: #10568A 1px solid;
    }
      
      
    div.RadComboBox_Probitas .rcbArrowCell 
    {
        border-color: #10568A;
    }
      
      
    /*Hovered*/
    div.RadComboBox_Probitas .rcbHovered .rcbInputCell 
    {
        border-right: #10568A 1px solid;
    }
    div.RadComboBox_Probitas .rcbHovered .rcbInput
    {
        color: #000000;
    }
    /*Focused*/
    div.RadComboBox_Probitas .rcbFocused .rcbInputCell 
    {
        border-right: #10568A 1px solid;
        border-color: #10568A;
    }
    div.RadComboBox_Probitas .rcbFocused .rcbInput 
    {
        color: #000000;
    }
    /*Disabled*/
    div.RadComboBox_Probitas .rcbDisabled .rcbInputCell 
    {
        border-right: #888888 1px solid;
        border-color: #888888;
    }
    div.RadComboBox_Probitas .rcbDisabled .rcbInput 
    {
        color: #888888;
    }
    div.RadComboBox_Probitas .rcbDisabled .rcbArrowCell 
    {
        border-color: #888888;
        color: #888888;
    }
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 17 Mar 2011 Link to this post

    Hi Karl,

    I tested your code and it works fine for me when I add the following css class selector to the stylesheet that you provided:
    div.RadComboBox table td.rcbInputCell,
    div.RadComboBox .rcbInputCell .rcbInput {  padding-right: 4px;    }


    Kind regards,
    Kate
    the Telerik team
  3. Karl
    Karl avatar
    172 posts
    Member since:
    Sep 2010

    Posted 17 Mar 2011 Link to this post

    Hi Kate,

    Thanks for your update.

    I've applied the class selectors to my stylesheet and had another go but the text is still "crossing the line" and appeaing in the arrow cell. (see attached image)

    I tried increasing the width of the padding to 20px to see if I could get it to go really short, but it didn't make any difference. I've even altered it to include my specific skin name and forced the width by including "!important"

    To summerise, I have added the following to my previously posted stylesheet and it still hasn't worked. It is worth noting that this skin was built using the Telerik online stylebuilder which I understand is in Beta.

    div.RadComboBox table td.rcbInputCell,
    div.RadComboBox .rcbInputCell .rcbInput { padding-right: 20px; }
    div.RadComboBox_Probitas table td.rcbInputCell,
    div.RadComboBox_Probitas .rcbInputCell .rcbInput { padding-right: 20px; }
    div.RadComboBox table td.rcbInputCell,
    div.RadComboBox .rcbInputCell .rcbInput { padding-right: 20px !important; }
    div.RadComboBox_Probitas table td.rcbInputCell,
    div.RadComboBox_Probitas .rcbInputCell .rcbInput { padding-right: 20px !important; }
  4. Karl
    Karl avatar
    172 posts
    Member since:
    Sep 2010

    Posted 18 Mar 2011 Link to this post

    This seems to be an IE problem in the way it's rendering some aspect of the stylesheet. When I test the control and stylesheet using Firefox it does put the padding on the right and fixes the issue.


  5. Karl
    Karl avatar
    172 posts
    Member since:
    Sep 2010

    Posted 18 Mar 2011 Link to this post

    In Addition to this problem, I've spotted another.

    if you use the stylesheet I've provided previously, and create 2 RadComboBox controls using the following code, the drop down arrows on the right are different sizes? The only difference between the two is that the first one has the "AllowCustomText" option set to "true" .

    Can you spot if theres anything in my stylesheet that would cause this?

     <telerik:RadComboBox
            id="Test15"
            runat="server"
            width="200px"
            height="100px"
            DropDownWidth="200px"
            AllowCustomText="true"
            EmptyMessage="Select an option..."
            Skin="Probitas"
            EnableEmbeddedSkins="false"
            >
        <Items>
            <telerik:RadComboBoxItem Text="Short option" Value="1" />
            <telerik:RadComboBoxItem Text="AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890" Value="2" />
            <telerik:RadComboBoxItem Text="aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ0123456789" Value="3" />
            <telerik:RadComboBoxItem Text="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz9876543210" Value="4" />
            <telerik:RadComboBoxItem Text="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ9876543210" Value="5" />
        </Items>
    </telerik:RadComboBox><br />
     <telerik:RadComboBox
            id="Test16"
            runat="server"
            width="200px"
            height="100px"
            DropDownWidth="200px"
            EmptyMessage="Select an option..."
            Skin="Probitas"
            EnableEmbeddedSkins="false"
            >
        <Items>
            <telerik:RadComboBoxItem Text="Short option" Value="1" />
            <telerik:RadComboBoxItem Text="AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz1234567890" Value="2" />
            <telerik:RadComboBoxItem Text="aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ0123456789" Value="3" />
            <telerik:RadComboBoxItem Text="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz9876543210" Value="4" />
            <telerik:RadComboBoxItem Text="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ9876543210" Value="5" />
        </Items>
    </telerik:RadComboBox><br />
  6. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 21 Mar 2011 Link to this post

    Hello Karl,

    I tested the two RadComboBox controls that you have, but I do not get the behaviour of the arrows that you describe. Conserning the other question for the padding, it is actually applied but since the text is too long, you can not see the padding. Another approach would be to use the following css selector:

    div.RadComboBox table td.rcbInputCell
          {
              padding-right: 10px;
              padding-left: 10px;
          }

    Regards,
    Kate
    the Telerik team
  7. Karl
    Karl avatar
    172 posts
    Member since:
    Sep 2010

    Posted 24 Mar 2011 Link to this post

    Hi Kate,

    The formatting is now working ok, so thank you for that.
    Strange that the last bit of CSS you posted fixed it, even though it's very similar to the original CSS you posted (apart from the part after the comma) and that didn't?

    However, I am still haing the issue where the drop down arrow boxes on the right are different sizes if I specifiy "AllowCustomText=true" or not, but I'll start a new thread with this one as is seems to be a separate issue.

    Karl
  8. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 24 Mar 2011 Link to this post

    Hi Karl,

    The trick is to locate the right css selector class and apply the changes to it only. However, there are also cases in which when you apply a css selector to other classes the changes also take effect and there is no or just slight diffrence. You can read more about the diffrent classes of the RadComboBox here

    Kind regards,
    Kate
    the Telerik team
Back to Top