CODEWITHSUNDEEP
htmlasp.nettwitter-bootstraptwitter-bootstrap-3webforms
Druid
Druid

Reputation: 6453

How do I put a Bootstrap Glyphicon inside an asp:TextBox in ASP.Net Webforms?

Is there a way to show a Glyphicon in an <asp:TextBox> control?

I tried this:

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

But it aligns far right instead of inside the textbox... Is this possible to do? Thanks!

Update: This works:

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

Upvotes: 0

Views: 7869

Answers (2)

DiscoInferno
DiscoInferno

Reputation: 142

The following will give a glyph adjacent to the textbox, but the glyph won't overlap the inputted text.

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

Alternatively, this will give you a textbox with an inline glyph within the textbox (note that inputted text overlaps the glyph, so I gave it a semi-transparent color).

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

Upvotes: 0

user5375600
user5375600

Reputation:

Here it is with web forms.

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

This is what I do when using a calender. Possibly use span tag as well as input-group-addon.

Also this will advise you too. https://v4-alpha.getbootstrap.com/components/input-group/

Upvotes: 4

Related Questions