Как помещать Glyphicon Bootstrap внутри asp: TextBox в ASP.Net Webforms?

Есть ли способ показать Глификон в управлении <asp:TextBox>?Как помещать Glyphicon Bootstrap внутри asp: TextBox в ASP.Net Webforms?

Я попытался это:

<div class="col-md-10 has-feedback"> 
    <asp:TextBox runat="server" ID="txtFullName" CssClass="form-control" MaxLength="50" /> 
    <i class="glyphicon glyphicon-user form-control-feedback"></i> 
</div>

Но это выравнивает ультраправых вместо внутри текстового поля ... Возможно ли это сделать? Благодаря!

Update: Это работает:

<div class="col-md-10 input-group input-group-lg"> 
<span class="input-group-addon"> 
    <span class="glyphicon glyphicon-envelope"></span> 
</span> 
<asp:TextBox runat="server" ID="Email" CssClass="form-control" TextMode="Email" /> 
</div>

источник

2017-02-01 Druid

Здесь с веб-формами.

<div class="col-md-4"> 
    <asp:Label ID="lblArrival" runat="server" Text="Arrival"></asp:Label> 
    <div class="input-group date txtDate"> 
    <asp:TextBox ID="txtArrival" runat="server" CssClass="form-control" style="width:100%"></asp:TextBox> 
    <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span> 
    </div> 
    </div>

Это то, что я делаю при использовании каландра. Возможно использовать тег span, а также add-group-addon.

Также это вам посоветует. https://v4-alpha.getbootstrap.com/components/input-group/

источник

2017-02-01 17:04:08

Спасибо! Я знаю, что он работает с MVC. Я хочу знать, можно ли его заставить работать в WebForms. Я попробовал ваше предложение использовать 'span', но это тоже не помогает - он выравнивается далеко правее, а не внутри текстового поля. – Druid

Я изменил свой пример. См. Выше. –

Я тоже пробовал ... Тот же результат ... – Druid

Следующий текст даст глиф смежный в текстовое поле, но глиф не будет перекрывать введенный текст.

HTML

<div class="form-group"> 
     <div class="input-group glyph-group"> 
      <div class="input-group-addon"><i class="glyphicon glyphicon-user form-control-feedback"></i></div> 
      <asp:TextBox runat="server" ID="TextBox1" CssClass="form-control" MaxLength="50" /> 
     </div> 
    </div>

CSS

.glyph-group div{ 
     background-color: rgba(0,0,0,0); 
     position: relative; 
     left: 1px; 
    } 

.glyph-group input{ 
     border-left-color: #fff; 
    }

Кроме того, это даст вам текстовое поле с инлайн глифа в текстовое поле (обратите внимание, что введенный текст перекрытия глиф, поэтому я дал ему полупрозрачный цвет).

HTML

<div class="form-group"> 
     <div class="input-group"> 
      <i class="glyphicon glyphicon-user form-control-feedback glyph-inline"></i> 
      <asp:TextBox runat="server" ID="TextBox2" CssClass="form-control" MaxLength="50" /> 
     </div> 
</div>

CSS

.glyph-inline { 
    position: absolute; 
    padding: 9px 12px; 
    font-size: 14px; 
    color: rgba(2, 2, 2, 0.21); 
    font-weight: normal; 
    line-height: 1; 
    border-radius: 4px; 
}

источник

2017-02-01 18:09:01

Как помещать Glyphicon Bootstrap внутри asp: TextBox в ASP.Net Webforms?

ответ

Смежные вопросы