How do I align a label and a textarea

Question

My code ends up like                XXXXX              XXXXX Description  XXXXX   I want                XXXXX Description  XXXXX              XXXXX    Description  sometimes spans multiple lines   Code    lt p class  DataForm  gt       lt label gt Blah blah blah Description  lt  label gt       lt asp TextBox ID  txtBlahblahblahDescription                   runat  server                   TextMode  MultiLine                   Rows  8                   Columns  50  gt  lt  asp TextBox gt  lt br  gt   lt  p gt    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

User · Answer

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      lt label for  myfield  gt Label text lt  label gt  lt textarea id  myfield  rows  5  cols  30  gt  lt  textarea gt

User · Answer

You need to put them both in some container element and then apply the alignment on it   For example    x000D   x000D   formfield     x000D    vertical-align  middle  x000D    x000D   lt p class  formfield  gt  x000D     lt label for  textarea  gt Label for textarea lt  label gt  x000D     lt textarea id  textarea  rows  5  gt Textarea lt  textarea gt  x000D   lt  p gt  x000D   x000D   x000D

User · Answer

Use vertical-align middle in your CSS    lt table gt       lt tr gt          lt td style  vertical-align middle  gt Description  lt  td gt          lt td gt  lt textarea gt  lt  textarea gt  lt  td gt       lt  tr gt   lt  table gt

User · Answer

Set the height of your label to the same height as the multiline textbox  Add the cssClass  alignTop vertical-align  middle   for the label control    lt p gt       lt asp Label ID  DescriptionLabel  runat  server  Text  Description    Width  70px  Height  200px  CssClass  alignTop  gt  lt  asp Label gt       lt asp Textbox id  DescriptionTextbox  runat  server  Width  400px  Height  200px  TextMode  MultiLine  gt  lt  asp Textbox gt       lt asp RequiredFieldValidator id  DescriptionRequiredFieldValidator  runat  server  ForeColor  Red      ControlToValidate  DescriptionTextbox  ErrorMessage  Description is a required field   gt       lt  asp RequiredFieldValidator gt

User · Answer

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

User · Answer

Try this   textarea   vertical-align  top

User · Answer

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     lt style gt      label textarea          vertical-align  middle         lt  style gt    lt label gt Blah blah blah Description   lt textarea gt dura bura lt  textarea gt  lt  label gt

[html] How do I align a label and a textarea?

Examples related to html

Examples related to css

Examples related to asp.net