Achieve proper alignment between a label and textbox using CSS styling

Question

Achieve proper alignment between a label and textbox using CSS styling

While the title may lead you to believe this is just another CSS issue, it's actually a bit different. I have a textbox with a placeholder property and a applied CSS class. Now, I need to add a label to signify it as a mandatory field. The problem arises because of the CSS - I can't seem to position the label in the top right corner of the textbox.

Here's the code snippet:

<div id="formwrap">
        <div class="formarea">
            <p class="sub_headline">
                User Details</p>

            <asp:TextBox ID="txtFname" class="input" placeholder="First name" runat="server"></asp:TextBox>
            <asp:Label runat="server" Text="*" ForeColor="Red"></asp:Label><br />
            <asp:RequiredFieldValidator runat="server" ErrorMessage="Please Enter First name" ControlToValidate="txtFname" ></asp:RequiredFieldValidator>


</div>
</div>

CSS snippet:

.input
{
    font-family: 'Lato' , sans-serif;
    border: 1px solid #CCCCCC;
    width: 65%;
    height: 20px;
    margin: 14px 94px 0 0;
    font-size: 16px;
    font-weight: lighter;
    padding: 4px;
    color: #E96151;
    float: left;
}

Any thoughts on how I can resolve this?

Appreciate your help!

asp.net css textbox alignment label

Answer 1

Answer №1

To make the textbox work, simply eliminate the margin.

.input
{
    font-family: 'Lato' , sans-serif;
    border: 1px solid #CCCCCC;
    width: 65%;
    height: 20px;
    /*margin: 14px 94px 0 0;*/
    font-size: 16px;
    font-weight: lighter;
    padding: 4px;
    color: #E96151;
    float: left;
}

Take a look at this DEMO with html controls. If you prefer not to edit the css class, you can override by adding style="margin:0;" directly in the Textbox.

Suggestion: The placeholder attribute only functions for html input elements. You may instead use the following code for better performance.

<asp:TextBox ID="txtFname" class="input" Text="First Name"
       onblur="if (this.value == '') {this.value = 'First Name';}" onfocus="if (this.value == 'First Name') {this.value = '';}" runat="server"></asp:TextBox>

Answer 2

To make the textbox work, simply eliminate the margin.

.input
{
    font-family: 'Lato' , sans-serif;
    border: 1px solid #CCCCCC;
    width: 65%;
    height: 20px;
    /*margin: 14px 94px 0 0;*/
    font-size: 16px;
    font-weight: lighter;
    padding: 4px;
    color: #E96151;
    float: left;
}

Take a look at this DEMO with html controls. If you prefer not to edit the css class, you can override by adding style="margin:0;" directly in the Textbox.

Suggestion: The placeholder attribute only functions for html input elements. You may instead use the following code for better performance.

<asp:TextBox ID="txtFname" class="input" Text="First Name"
       onblur="if (this.value == '') {this.value = 'First Name';}" onfocus="if (this.value == 'First Name') {this.value = '';}" runat="server"></asp:TextBox>

Answer 3

Answer №2

To tackle this issue, consider utilizing an HTML table to design the user interface for the application.

Begin by creating an HTML table and allocating one column for a textbox and another column for a label [Mandatory *] placed next to the textbox, as shown below:

<table class="style1">
    <tr>
        <td>
            <input type="text" id="textbox1" />
        </td>
        <td>
            <label for="lblMandatory">* Mandatory</label>
        </td>
    </tr>
</table>

Answer 4

To tackle this issue, consider utilizing an HTML table to design the user interface for the application.

Begin by creating an HTML table and allocating one column for a textbox and another column for a label [Mandatory *] placed next to the textbox, as shown below:

<table class="style1">
    <tr>
        <td>
            <input type="text" id="textbox1" />
        </td>
        <td>
            <label for="lblMandatory">* Mandatory</label>
        </td>
    </tr>
</table>

Answer 5

Answer №3

To ensure proper display of each element, you will need to create a separate parent container for each one.

<div id="formwrap">
    <div class="formarea">
        <p class="sub_headline">
            User Details</p>

        <asp:TextBox ID="txtFname" class="input" placeholder="First name" runat="server"></asp:TextBox>
        <div>
          <asp:Label runat="server" Text="*" ForeColor="Red"></asp:Label><br />
        </div>
        <div>
            <asp:RequiredFieldValidator runat="server" ErrorMessage="Please Enter First name" ControlToValidate="txtFname" ></asp:RequiredFieldValidator>
        </div>
     </div>  
</div>

Then, remember to set the style for vertical alignment as needed.

Answer 6

To ensure proper display of each element, you will need to create a separate parent container for each one.

<div id="formwrap">
    <div class="formarea">
        <p class="sub_headline">
            User Details</p>

        <asp:TextBox ID="txtFname" class="input" placeholder="First name" runat="server"></asp:TextBox>
        <div>
          <asp:Label runat="server" Text="*" ForeColor="Red"></asp:Label><br />
        </div>
        <div>
            <asp:RequiredFieldValidator runat="server" ErrorMessage="Please Enter First name" ControlToValidate="txtFname" ></asp:RequiredFieldValidator>
        </div>
     </div>  
</div>

Then, remember to set the style for vertical alignment as needed.

Achieve proper alignment between a label and textbox using CSS styling

Answer №1

Answer №2

Answer №3

Similar questions

Are checkboxes embedded within labels?

Different styles of Unicode arrowheads found on different versions of Android devices

allowing absolutely positioned region to expand

Inserting multiple rows of data into a MySQL database in a single page using only one query in PHP

Repopulate data with jQuery and JavaScript

Employing a lexicon of hexadecimal color code values to harmonize CSS styles

Question about authenticating users in ASP.NET

Ways to create a fixed button positioned statically at the bottom of a page

Adjustment of navigation as window size changes

CSS - Utilizing Flexbox for creating inline lists that adjust based on text length

Update the color of a span in JQuery when its value equals 0

The validators on the deployment server have ceased to function

The nested div escapes from its parent div despite the application of clearfix and the correct positioning of relative and absolute elements

Exploring nested selection with css and utilizing the ::focus pseudo class

Integrating autoprefix-cli into ANT build

Design interactive horizontal buttons containing images and corresponding labels using HTML5

Chrome may clip the gradient radius when setting the focal point outside of the SVG gradient

Unusual Happenings with jQuery Draggable

What sets apart transactions in SQL Server from those in ADO.NET?

Connecting pages through index.html within the hosting file manager directory