CODEWITHSUNDEEP
htmlcssasp.net
NibblyPig
NibblyPig

Reputation: 52922

How do I align a label and a textarea?

My code ends up like:

             XXXXX
             XXXXX
Description: XXXXX

I want:

             XXXXX
Description: XXXXX
             XXXXX

"Description" sometimes spans multiple lines.

Code:

<p class="DataForm">
    <label>Blah blah blah Description:</label>
    <asp:TextBox ID="txtBlahblahblahDescription"
                 runat="server"
                 TextMode="MultiLine"
                 Rows="8"
                 Columns="50"></asp:TextBox><br/>
</p>

CSS:

.DataForm {
}
.DataForm label {
    display: inline-block;
    font-size: small;
    margin-left: 5px;
    width: 5%;
    min-width: 60px;
}
.DataForm input {
    margin-right: 9px;
    display: inline-block;
    width: 21%;
    min-width: 30px;
}

Upvotes: 93

Views: 226768

Answers (7)

BalusC
BalusC

Reputation: 1108567

You need to put them both in some container element and then apply the alignment via the container element.

For example:

.formfield {
  display: flex;
  align-items: center;
}
<div class="formfield">
  <label for="textarea">Label for textarea</label>
  <textarea id="textarea" rows="5">Textarea</textarea>
</div>

Upvotes: 118

Mark B
Mark B

Reputation: 682

Align the text area box to the label, not the label to the text area,

label {
    width: 180px;
    display: inline-block;
}

textarea{
    vertical-align: middle;
}

<label for="myfield">Label text</label><textarea id="myfield" rows="5" cols="30"></textarea>

Upvotes: 5

Rado
Rado

Reputation: 436

Just wrap the textarea with the label and set the textarea style to

vertical-align: middle;

Here is some magic for all textareas on the page:)

<style>
    label textarea{
        vertical-align: middle;
    }
</style>

<label>Blah blah blah Description: <textarea>dura bura</textarea></label>

Upvotes: 27

vaibhav jain
vaibhav jain

Reputation: 21

Try this:

textarea { vertical-align: top; }​

Upvotes: 2

Charlie
Charlie

Reputation: 41

  1. Set the height of your label to the same height as the multiline textbox.

  2. Add the cssClass .alignTop{vertical-align: middle;} for the label control.

    <p>
    <asp:Label ID="DescriptionLabel" runat="server" Text="Description: " Width="70px" Height="200px" CssClass="alignTop"></asp:Label>
    <asp:Textbox id="DescriptionTextbox" runat="server" Width="400px" Height="200px" TextMode="MultiLine"></asp:Textbox>
    <asp:RequiredFieldValidator id="DescriptionRequiredFieldValidator" runat="server" ForeColor="Red"
    ControlToValidate="DescriptionTextbox" ErrorMessage="Description is a required field.">    
</asp:RequiredFieldValidator>

Upvotes: 4

h4xnoodle
h4xnoodle

Reputation: 1128

Try setting a height on your td elements.

vertical-align: middle;

means the element the style is applied to will be aligned within the parent element. The height of the td may be only as high as the text inside.

Upvotes: 0

Peter Stuifzand
Peter Stuifzand

Reputation: 5104

Use vertical-align:middle in your CSS.

<table>
    <tr>
       <td style="vertical-align:middle">Description:</td>
       <td><textarea></textarea></td>
    </tr>
</table>

Upvotes: 2

Related Questions