Indent Text RCB

4 posts, 0 answers
  1. Greg
    Greg avatar
    22 posts
    Member since:
    Aug 2010

    Posted 31 Aug 2010 Link to this post

    For a RadComboBox I am still having trouble with aligning the text to be indented off of the image on the selected item. I followed this example: http://www.telerik.com/community/code-library/aspnet-ajax/combobox/show-the-selected-item-image-in-input.aspx
    This won't indent the text.

     

     

     

    <style type="text/css">
        .cbGeographicUnit .rcbInputCell .rcbInput
        {
            padding-left: 22px;
        }
    </style>
      
    <tr>
        <td>
        <telerik:RadComboBox ID="cbGeographicUnit" OnClientLoad="showFirstItemImage" OnClientSelectedIndexChanging="showImageOnSelectedItemChanging" HighlightTemplatedItems="true">
                            <ItemTemplate>
                                ...
                            </ItemTemplate>
                        </telerik:RadComboBox>
             </td>
    </tr>      

  2. Greg
    Greg avatar
    22 posts
    Member since:
    Aug 2010

    Posted 31 Aug 2010 Link to this post

    If I use this, it works but it will change all rcbInputCells on the page:

    .rcbInputCell .rcbInput
    {
        padding-left: 22px !important;
        margin-left:6px !important;
        margin-right:1px !important;
        padding-top:2px !important;
        padding-bottom:2px !important;
        vertical-align:middle !important;
    }

    However, if I use .cbGeographicUnit .rcbInputCell .rcbInput, it will not style only the cbGeographicUnit radcombobox. How do I get it to style only that radcombobox? I've tried td#cbGeographicUnit .rcbInputCell .rcbInput
  3. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 02 Sep 2010 Link to this post

    Hello Greg,

    If you just want the text to be moved over from the image then change you css style to, .rcbInputCell .rcbInput img, so only one's with images will be indented. You would then just need to set the margin-right for the image.

    I hope that helps.
  4. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 02 Sep 2010 Link to this post

    Hello,

    Let me suggest you apply the “padding-left” style attribute to only one RadComboBox by setting it dynamically at OnClientLoad and OnClientSelectedIndexChanging event handlers:
    <head runat="server">
        <title>Untitled Page</title>
    </head>
     
    <script language="javascript" type="text/javascript">
        function showImageOnSelectedItemChanging(sender, eventArgs) {
            var input = sender.get_inputDomElement()
            input.style.background =
                "url(" + eventArgs.get_item().get_imageUrl() + ") no-repeat";
            input.style.paddingLeft = "22px";
        }
     
        function showFirstItemImage(sender) {
            var input = sender.get_inputDomElement()
            input.style.background =
                "url(" + sender.get_items().getItem(0).get_imageUrl() + ") no-repeat";
            input.style.paddingLeft = "22px";
        }
    </script>
     
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
            <telerik:RadComboBox ID="RadComboBox1" runat="server" Height="180px"
                OnClientLoad="showFirstItemImage"
                OnClientSelectedIndexChanging="showImageOnSelectedItemChanging">
            </telerik:RadComboBox>
        </div>
        </form>
    </body>


    Greetings,
    Kalina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top