Как сделать изображение встроенным с помощью telerik radcombobox

Question

Я пытаюсь сделать изображение видимым справа от комбобокса, но оно почему-то опускается под ним.Любая помощь будет принята с благодарностью.

<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>

Answer 1

Вы можете использовать классы boostrap: row, col-6 и col-1, чтобы оставить все в одной строке, no-gutters поможет вам удалить ненужные row отступы

    <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>

Вы можете настроить col-X в зависимости от ширины, которую вы ищете, у вас есть от col-1 до col-12

Answer 2

Проверьте стили для поля со списком telerik.Необходимо, чтобы оба элемента имели display inline или inline-block

Другой вариант - задать абсолютное положение изображения и выровнять его относительно относительно позиционированного родительского элемента.Таким образом, вы сможете точно настроить его положение.

Примерно так:

.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>