RadcomboBox height rendering issues

6 posts, 0 answers
  1. swordfish450
    swordfish450 avatar
    3 posts
    Member since:
    Apr 2015

    Posted 22 Apr 2015 Link to this post

    I have an issue with a Radcombobox. I am trying to set the height of the radcombobox on ClientSelectedIndexChanged, but I am getting a rendering issue and I cannot see where the problem is.

     Below, you will find my code;

     CSS:

    div.RadComboBox_Windows7 .rcbInputCell INPUT.rcbInput

    {

    height: 37px;

    }

    ASPX:

    <telerik:RadComboBox ID="RCB_Test" runat="server" Width="340px" OnClientSelectedIndexChanged="OnClientSelectedIndexChangedHandler">

    <Items>

    <telerik:RadComboBoxItem runat="server" Text="Testing please" Value="Testing please" />

    <telerik:RadComboBoxItem runat="server" Text="Testing please" Value="Testing please" />

    <telerik:RadComboBoxItem runat="server" Text="Testing please" Value="Testing please" />

    </Items>

    </telerik:RadComboBox>

     

    JavaScript:

    function OnClientSelectedIndexChangedHandler(sender, eventArgs) {

    var item = sender.get_inputDomElement();

    item.style.height = "37px";

     

    I have also attached an image of the problem.

     

    Any help would be appreciated.

    }

     

     

  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 24 Apr 2015 Link to this post

    Hello,

    RadComboBox in classic render mode uses sprite images to display backgrounds and borders in all skins that have rounded borders and gradients. The reason is supporting the control also in old browser. When you set bigger height of the control, there are visible other parts of the control. We recommend you to use lightweight render mode for the purpose.
    <telerik:RadComboBox RenderMode="Lightweight" ...>

    Regards,
    Magdalena
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. swordfish450
    swordfish450 avatar
    3 posts
    Member since:
    Apr 2015

    Posted 29 Apr 2015 in reply to Magdalena Link to this post

    Hey Magdelana,

     Sorry for the delay.

    That did solve the rendering problem, so thank you for that.

    However, I am still not able to get the RadComboBox to expand to height I have set. It seems to set the height within the RadComboBox, but not the RadComboBox itself, which I am trying to expand.  

    Do you see anything else that I am doing wrong?

    Thank you for your time.

  5. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 29 Apr 2015 Link to this post

    Hi,

    The following CSS should customize the height of the lightweight ComboBox:
    html .RadComboBox .rcbInput {
        height: ... ;
    }


    Regards,
    Magdalena
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  6. swordfish450
    swordfish450 avatar
    3 posts
    Member since:
    Apr 2015

    Posted 30 Apr 2015 in reply to Magdalena Link to this post

    Hey Magdalena,

    I have tried implementing your solution, but it does not seem to have the right effect on my RadComboBox.

    Upon selecting a list item from the RadComboBox, the text is now out of the RadComboBox based on the height set.

    What I want is to set the height of the RadComboBox, not the text in the RadComboBox. I am basically trying to find a solution when I have very long text and upon selection, how I can set the height and in some way make multiple lines in case the text is longer than the width of the RadComboBox.

    Here is my ComboBox:

    <table> 

    <tr>

    <td>

    <telerik:RadComboBox ID="RCB_BillOfMotherMaterialNumber" runat="server" RenderMode="Lightweight" Skin="Windows7" AppendDataBoundItems="true" Filter="Contains" Width="340px" MarkFirstMatch="True" OnSelectedIndexChanged="RCB_BillOfMotherMaterialNumber_SelectedIndexChanged" AutoPostBack="true">

    <Items>

    <telerik:RadComboBoxItem runat="server" Text="" Value="" />

    <telerik:RadComboBoxItem runat="server" Text="Yes" Value="Yes" />

    <telerik:RadComboBoxItem runat="server" Text="No" Value="No" />

    </Items>

    </telerik:RadComboBox>

    </td>

    </table>

    I hope my explanation clarifies what I am trying to do.

     

    Regards,

    Sabri

  7. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 04 May 2015 Link to this post

    Hi,

    As the text in RadComboBox is rendered in an <input> DOM element, it is not possible to wrap it to a next line.

    Regards,
    Magdalena
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017