Question

I’m looking for suggestions on how to improve default/generated ASP.Net MVC views using the pre-existing elements.

I have an app that has lots of forms and I’d like to improve their look without spending too much time on each form, and just applying a style en-masse.

Is there a way to add columns to the style below?

<style type="text/css"> 
form      
{
    background-color: #f3f3f3;     
    border: solid 1px #a1a1a1;     
    padding: 10px;     
    width: 300px; 
}  

.editor-label, .editor-field 
{     
    display: block;     
    width: 120px;     
    float: left;     
    margin-bottom: 10px; 
}  

.editor-label      
{
    text-align: right;     
    padding-right: 20px; 
}  

br      
{
    clear: left; 
}

</style>

Answer 1

You are going to need more HTML elements to work with in order to achieve a column structure. You may have to edit the T4 template so that it generates the additional markup for you when you create a view.

Another possibility is progressively enhancing the layout via jQuery. This example wraps each label and field with a DIV so that you have a little more to work with. You can easily extend this to apply a column system of your choosing.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('.editor-label').each(function () {
            var $labelAndField = $(this).add($(this).next('.editor-field'));
            $labelAndField.wrapAll('<div class="field" />');
        });
    });
</script>