Styling an @Html.EditorFor helper RSS

• • Reply
  

  mrando820

  Member

  12 Points

  9 Posts

  Styling an @Html.EditorFor helper

  Jun 06, 2011 04:00 PM|LINK

  For some reason,

  @Html.EditorFor(model => model.middle_initial, new {style = "width: 10em;"})

  just isn't sticking. I've seen examples of this, as well as one with a blank template in the middle, i.e.

  @Html.EditorFor(model => model.middle_initial, "", new {style = "width: 10em;"}) 

   But I just can't seem to get it to work. I don't need a one character field to be the default length, I'd like it shorter, but creating a whole new helper class seems like overkill.

  What did I do wrong here?

  Thanks!

• • Reply
  

  sunny43

  Member

  126 Points

  170 Posts

  Re: Styling an @Html.EditorFor helper

  Jun 06, 2011 04:22 PM|LINK

  Try to set a CSS style like

  #middle_intial

  {

  width:10em;

  }

  (OR)

  I faced the same problem with "EditorFor"..

  I was trying to put a class attribute for one of my input field but it didn't work..then i switched to TextBoxFor.

  TextBoxFor is almost same as EditorFor.. if you are ok with TextboxFor instead of a Editorfor just go with it..

  @Html.TextBoxFor(model => model.PropertyName, new { @class = "classname" })

  I am new to MVC and I am not expert in it..if you want correct answer wait for some more replys...

  Regards,

  Sunny

  • Marked as answer by mrando820 on Jun 06, 2011 04:36 PM
• • Reply
  

  mrando820

  Member

  12 Points

  9 Posts

  Re: Styling an @Html.EditorFor helper

  Jun 06, 2011 04:36 PM|LINK

  Thanks Sunny, the CSS style answer will work for me.

• • Reply
  

  timmykhan

  Member

  12 Points

  6 Posts

  Re: Styling an @Html.EditorFor helper

  Nov 19, 2011 08:03 PM|LINK

  you can add styles to the Editfor as well.

  Here is how i did it:

  <style>

  #comment-input
      {
          width:400px;
          height:300px;
      }

  </style>

  @Html.EditorFor(model => model.Comments,null,"comment-input", null)

  the comment-input is the html ID of this field when the browser renders the page, and any styles associated with that page will get picked up by the browser.

  Here is how  you will see it in the view source:

  <textarea class="text-box multi-line" data-val="true" data-val-length="The field Comments must be a string with a maximum length of 800." data-val-length-max="800" id="comment-input" name="comment-input">

  Hope this helps, and mark as Answer, if you think this helped you and worked out for you as well.

  Timmy,
  http://www.tralp.com
• • Reply
  

  JoeKahl

  Member

  6 Points

  3 Posts

  Re: Styling an @Html.EditorFor helper

  Jul 30, 2012 03:28 AM|LINK

  Thanks.  This is clear and simple.  I think using CSS is the way to go.  I wish I could do more with .NET coding, like in XAML, but in the browser CSS is king.

   Site.css 

  #account-note-input {
      width:1000px;
      height:300px;
  }

  .cshtml

  <div class="editor-label">
    @Html.LabelFor(model => model.Note)
  </div>
  <div class="editor-field">
    @Html.EditorFor(model => model.Note, null, "account-note-input", null)
    @Html.ValidationMessageFor(model => model.Note)
  </div>
  

  Joe