CODEWITHSUNDEEP
cssasp.net-mvc-3tablelayout
Steve Newton
Steve Newton

Reputation: 1078

MVC3 - Best approach to create a column layout from scaffolded results

I have read quite a few entries/external sites related to using tables or CSS but I wondered what the best practice approach was for layouts created with the MVC scaffolder.

The code below obviously has a div class for the label and another for the field which is then repeated for as many pairs as you have in the view.

I would like to have a two column layout as the default scaffolder output creates a very long page and wasted screen real estate.

Is the best answer to create a table or to create another two divs and control there position in CSS therefore creating two columns.

<div class="editor-label">
@Resources.Agency
</div>

<div class="editor-field">
@Html.DropDownListFor(model => model.AgencyId,         ((IEnumerable<PartnerWebWI.Models.Agency>)ViewBag.PossibleAgencies).Select(option => new SelectListItem {
    Text = Html.DisplayTextFor(_ => option).ToString(), 
    Value = option.AgencyId.ToString(),
    Selected = (Model != null) && (option.AgencyId == Model.AgencyId)
}), "Choose...")
@Html.ValidationMessageFor(model => model.AgencyId)

Upvotes: 1

Views: 1600

Answers (2)

Ben Hoffman
Ben Hoffman

Reputation: 8259

Just use the labels that already exist and add CSS for them.

.editor-label
{
    width: 20%;
    height: 100%;
    float: left;
}

.editor-field
{
    width: 80%;
    height: 100%;
    float: right;
}

Then move the Create button outside of the <fieldset> tag. This is the code you need to move:

<p>
    <input type="submit" value="Create" />
</p>

You can change the CSS of the two fields to make it look even better.

Upvotes: 0

Carl Finch
Carl Finch

Reputation: 152

I'd simply do this with div tags.

Have one div container then put 2 divs inside of there.

I'd do something like the following

    <style type="text/css">
         .container{
             width: 100%;
             height: 100%;
             position: absolute;
             left: 0
             top: 0
          }

          .left{
               width: 20%;
               height: 100%;
               float: left;
          }

          .right{
               width: 80%;
               height: 100%;
               float: right;
          }

    </style>

<div class="container">

<!-- left container-->
<div class="left"></div>

<!--Right container-->
<div class="right"></div>
</div>

I'd do something like that. Forgive me if the div's aren't exactly as they are in CSS, but essentially you do this all with div tags, and setup each div class or ID according to which side of the page you wanted and setup their width/height and other properties.

Upvotes: 1

Related Questions