Search code examples
csstelerik

How to make image appear inline with telerik radcombobox


I am trying to make image appear to immediate right of combobox, but it drops down below it for some reason. Any help would be greatly appreciated.

<telerik:RadComboBox ID="ddl" runat="server" AutoPostBack="true" DataTextField="Time" DataValueField="ID"  NoWrap="true" Width="40%" CausesValidation="false"> 
       </telerik:RadComboBox>

<span style="display:inline" class="requiredTimeKeeper"><asp:Image CssClass="inline" id="Image1" ImageUrl="../../images/requiredfield.gif" runat="server"></asp:Image>

Solution

  • Check the styles for the telerik combo box. You need both of the elements to have have be display inline or inline-block

    Another option is to give the image absolute positioning, and align it with respect to a relatively positioned parent element. That way you'll be able to fine-tune its position.

    Something like this:

    .combo {
      position: relative;
    }
    
    .requiredTimeKeeper {
      position: absolute;
      top: 0;
      right: -10px;
    }
    <div class="combo">
      <telerik:RadComboBox ID="ddl" runat="server" AutoPostBack="true" DataTextField="Time" DataValueField="ID" NoWrap="true" Width="40%" CausesValidation="false">
      </telerik:RadComboBox>
    
      <div class="requiredTimeKeeper">
        <asp:Image CssClass="inline" id="Image1" ImageUrl="../../images/requiredfield.gif" runat="server"></asp:Image>
      </div>
    </div>