0

Hi everyone i want to change the height and width of this editor field i tried changing the editor field class but it did not resize the textbox itself rather the space around the textbox, i even tried adding "new{}" but did not work please help thank you for your time

    <div class="editor-field">
                        @Html.EditorFor(model => model.HomeAddress)<br>
                        @Html.ValidationMessageFor(model => model.HomeAddress)
                    </div>

> legend {
    font-size: 1.2em;
    font-weight: bold;

}

textarea {
    min-height: 75px;

}

.editor-label {
    margin: 1em 0 0 0;

}

.editor-field {
    margin: 0.5em 0 0 0;
    height:10000px;
    width:10000px;
}
Julius
  • 31
  • 1
  • 7
  • Possible duplicate of [MVC and EditorFor width](http://stackoverflow.com/questions/4720909/mvc-and-editorfor-width) – CodeCaster Nov 19 '15 at 09:25
  • See [duplicate](http://stackoverflow.com/questions/4720909/mvc-and-editorfor-width). `EditorFor()` will render a user-specified or built-in editor template. This is not guaranteed to be any, or one HTML element. An editor template can theoretically output nothing, or multiple elements instead, so it is impossible to apply a class or style to it. To do that, you must use `TextBoxFor()`, or wrap the `EditorFor()` in an element of your choosing in which you style all controls through CSS, or create your own editor template containing the desired CSS. – CodeCaster Nov 19 '15 at 09:27
  • He needs to tweak the CSS for *editor-field*, so this question is pretty straightforward. – Rob Nov 19 '15 at 09:59
  • there is the site.css as you can see the editor-field is there i made the height over 1000 just so i can see some sort of change but nothing happens – Julius Nov 19 '15 at 12:21

1 Answers1

0

You can use the Dev Tools in Chrome (F12), e.g., to analyze the CSS rules that apply to that very element. Moreover, you can also tweak them "live", so you usually find out very quickly where and how to change the styles. In your case, you probably want to change the padding of the input element.

Rob
  • 11,492
  • 14
  • 59
  • 94
  • Thanks for replying so quickly, i will try it – Julius Nov 19 '15 at 09:09
  • You're welcome. In Dev Tools, just press CTRL-SHIFT-C and then click on your input box to see the hierarchical CSS rules for that element. – Rob Nov 19 '15 at 09:14
  • The question is _"How to change the style of an editor template in MVC"_, not _"How to use the dev tools to find out the applied styles"_. – CodeCaster Nov 19 '15 at 09:25
  • ok i tried it im using visual studios i found the right line of code that needs to be changed in chrome but i cant find that line of code in visual studio – Julius Nov 19 '15 at 09:53
  • You can see the filename that contains the rule you are currently tweaking in Dev Tools. Alternatively, you can do a project-wide search in VS. In MVC projects, the standard CSS often sits in */content/site.css*. – Rob Nov 19 '15 at 09:58