CODEWITHSUNDEEP
htmlcssasp.netcheckbox
Erica Stockwell-Alpert
Erica Stockwell-Alpert

Reputation: 4853

Asp.net checkbox - can't get label on same line as checkbox

I have an asp checkbox with a label, but the label is not aligned with the checkbox:

enter image description here

<div class="row checkbox">
    <label for="phcontent_2$cbStayInTouch"><asp:Label id="LabelStayInTouch" runat="server"></asp:Label></label>
    <asp:CheckBox runat="server" ID="cbStayInTouch"/>
</div>

I tried using inline-block to get the checkbox and label ("Send me emails") next to each other, but it didn't do anything.

I tried wrapping the checkbox in a div and putting inline-block on the div and elements inside, like so:

<div style="display: inline-block;">
    <input id="phcontent_1_cbStayInTouch" type="checkbox" name="phcontent_1$cbStayInTouch" style="display: inline-block;">
    <label for="phcontent_1_cbStayInTouch" style="display: inline-block;">Send me emails</label>
</div>

but they still aren't aligned:

enter image description here

EDIT: It should look like this:

enter image description here

Upvotes: 0

Views: 4474

Answers (2)

navnit
navnit

Reputation: 310

You can try this code

<div>
 <div style="display: inline-block;">
  <input id="phcontent_1_cbStayInTouch" type="checkbox" name="phcontent_1$cbStayInTouch" >
 </div>    
 <div style="display: inline-block;vertical-align: top;">
  <label for="phcontent_1_cbStayInTouch">Send me emails</label>
 </div>
</div>

Upvotes: 0

Win
Win

Reputation: 62260

Bootstrap has form-horizontal and form-group instead of row. You can read more here.

In addition, you want to use AssociatedControlID in ASP.Net.

Screen Shot

enter image description here

ASPX

<div class="form-horizontal">
    <div class="form-group">
        <asp:Label ID="LabelStayInTouch" runat="server" Text="Stay in touch"
            AssociatedControlID="cbStayInTouch" CssClass="col-xs-3 control-label" />
        <div class="col-xs-4">
            <asp:CheckBox runat="server" ID="cbStayInTouch"
                Text="Send me emails" CssClass="checkbox" />
        </div>
    </div>
    <div class="form-group">
        <asp:Label ID="FirstNameLabel" runat="server" Text="First Name"
            AssociatedControlID="FirstNameTextBox"
            CssClass="col-xs-3 control-label" />
        <div class="col-xs-4">
            <asp:TextBox ID="FirstNameTextBox" runat="server"
                CssClass="form-control" />
        </div>
    </div>
</div>

Rendered Output

<div class="form-horizontal">
    <div class="form-group">
        <label for="MainContent_cbStayInTouch" id="MainContent_LabelStayInTouch" 
            class="col-xs-3 control-label">Stay in touch</label>
        <div class="col-xs-4">
            <span class="checkbox"><input id="MainContent_cbStayInTouch" 
                type="checkbox" name="ctl00$MainContent$cbStayInTouch">
                <label for="MainContent_cbStayInTouch">Send me emails</label></span>
        </div>
    </div>
    <div class="form-group">
        <label for="MainContent_FirstNameTextBox" id="MainContent_FirstNameLabel" 
            class="col-xs-3 control-label">First Name</label>
        <div class="col-xs-4">
            <input name="ctl00$MainContent$FirstNameTextBox" type="text" 
                id="MainContent_FirstNameTextBox" class="form-control">
        </div>
    </div>
</div>

Upvotes: 1

Related Questions