I am new to this, and looking for best practices in this area.
What is a good way to customize extensions to standardize accross the whole website?
For example I have TextArea which I want to resize to look and feel the same across the website wherever I call it. And similarly I would like to use some sort of a date picker element.
Btw: In addition, I am unable to understand what the row and column arguments do in the
Html.TextArea( ... int row, int col, ... ). They did not resize the textarea at all:
Html.TextArea( ..., new { width='20', height='10' } ). I also tried sending in the Height and width arguments in html attributes, but that doesn't seem to work either. Looking for advice in that as well.
The reason your approach doesn't work is because the TextArea tag doesn't support the width or height attribute. Instead it uses
rows and cols. However, since you want this to be consistent across your application, I'd recommend using CSS to accomplish this. When creating your TextArea controls, specify the CSS class you
want to use like so.
But the TextArea still looked too big, and accepted over 6 rows.
I would have liked to implement the standardization using partial views or some sort of default overriding of the Html extension methods, but if I can't figure that out, I would certainly use the CSS route.
I know I am a few years late to the game, but I ran into this same issue when I was dealing with a TextArea. I am sure there may be several other people that will run into this same issue when creating an MVC application, so I figured I would go ahead and
respond.
The previous answer is completely correct, but one thing is missing. When the MVC application is built, the site.css file contains a min-height value for all textareas. This causes the textarea to not respond to the changes in the row property. Just do
a quick search for "textArea" and remove it from the site.css file, and you are back in the game!!
priyeshj
Member
1 Points
10 Posts
Html Helper Customization
Sep 24, 2010 06:13 PM|LINK
I am new to this, and looking for best practices in this area.
What is a good way to customize extensions to standardize accross the whole website?
For example I have TextArea which I want to resize to look and feel the same across the website wherever I call it. And similarly I would like to use some sort of a date picker element.
Btw: In addition, I am unable to understand what the row and column arguments do in the Html.TextArea( ... int row, int col, ... ). They did not resize the textarea at all: Html.TextArea( ..., new { width='20', height='10' } ). I also tried sending in the Height and width arguments in html attributes, but that doesn't seem to work either. Looking for advice in that as well.
Thanks
Textarea Html Extensions UI Elements
robv8r
Participant
889 Points
138 Posts
Re: Html Helper Customization
Sep 24, 2010 06:33 PM|LINK
The reason your approach doesn't work is because the TextArea tag doesn't support the width or height attribute. Instead it uses rows and cols. However, since you want this to be consistent across your application, I'd recommend using CSS to accomplish this. When creating your TextArea controls, specify the CSS class you want to use like so.
Then speicify the width and height in CSS.
<style type="text/css"> .formTextBox { width: 300px; height: 400px; } </style>priyeshj
Member
1 Points
10 Posts
Re: Html Helper Customization
Sep 24, 2010 06:51 PM|LINK
Thanks robv8r for the suggestion.
At the same time, I am wondering why did the row and column assignment did not work for me. I tried to do
<%: Html.TextArea("Text" + Model.Order, "", 4, 4, null )%>But the TextArea still looked too big, and accepted over 6 rows.
I would have liked to implement the standardization using partial views or some sort of default overriding of the Html extension methods, but if I can't figure that out, I would certainly use the CSS route.
Rogala
Member
4 Points
8 Posts
Re: Html Helper Customization
Feb 20, 2013 03:39 PM|LINK
I know I am a few years late to the game, but I ran into this same issue when I was dealing with a TextArea. I am sure there may be several other people that will run into this same issue when creating an MVC application, so I figured I would go ahead and respond.
The previous answer is completely correct, but one thing is missing. When the MVC application is built, the site.css file contains a min-height value for all textareas. This causes the textarea to not respond to the changes in the row property. Just do a quick search for "textArea" and remove it from the site.css file, and you are back in the game!!
~Cheers