This is a migrated thread and some comments may be shown as answers.

Indent Text RCB

3 Answers 81 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Greg
Top achievements
Rank 1
Greg asked on 31 Aug 2010, 08:30 PM

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>      

3 Answers, 1 is accepted

Sort by
0
Greg
Top achievements
Rank 1
answered on 31 Aug 2010, 09:26 PM
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
0
Cori
Top achievements
Rank 2
answered on 02 Sep 2010, 07:29 PM
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.
0
Kalina
Telerik team
answered on 02 Sep 2010, 09:55 PM
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
Tags
ComboBox
Asked by
Greg
Top achievements
Rank 1
Answers by
Greg
Top achievements
Rank 1
Cori
Top achievements
Rank 2
Kalina
Telerik team
Share this question
or