CODEWITHSUNDEEP
csstelerik
dar25
dar25

Reputation: 93

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>

Upvotes: 1

Views: 163

Answers (2)

javimovi
javimovi

Reputation: 386

You can use the boostrap classes: row , col-6 and col-1 to leave everything in one line, no-gutters will help you remove unnecessary row padding

    <div class="row no-gutters">
      <telerik:RadComboBox ID="ddl" class="col-6" runat="server" AutoPostBack="true" DataTextField="Time" DataValueField="ID"  NoWrap="true" Width="40%" CausesValidation="false"> 
           </telerik:RadComboBox>

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

You can adjust the col-X depending on the width you are looking for, you have available from col-1 to col-12

Upvotes: 1

rubentd
rubentd

Reputation: 1275

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>

Upvotes: 0

Related Questions