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

[Solved] Indent Text RCB

3 Answers 147 Views

ComboBox

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

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

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

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