views:

38

answers:

2

I'm trying out ASP.NET MVC 2 by going through the "NerdDinner" tutorial. But apparently version 2 of MVC doesn't create a Details page the same as in the tutorial, and you get divs with css classes on them to style. However, I want to get the style where each label is followed on the same line with the field, and I can't do it, I get them on top of each other, or if I try using floats weird things happen (probably because I don't know exactly how to use it in this situation, where every other div should be on the same line). Here's the generated html for the Details page:

<fieldset>
        <legend>Fields</legend>
        <div>
        <div class="display-label">DinnerID</div>
        <div class="display-field"><%: Model.DinnerID %></div>

        <div class="display-label">Title</div>
        <div class="display-field"><%: Model.Title %></div>

        <div class="display-label">EventDate</div>
        <div class="display-field"><%: String.Format("{0:g}", Model.EventDate) %></div>

        <div class="display-label">Description</div>
        <div class="display-field"><%: Model.Description %></div>

        <div class="display-label">HostedBy</div>
        <div class="display-field"><%: Model.HostedBy %></div>

        <div class="display-label">ContactPhone</div>
        <div class="display-field"><%: Model.ContactPhone %></div>

        <div class="display-label">Address</div>
        <div class="display-field"><%: Model.Address %></div>

        <div class="display-label">Country</div>
        <div class="display-field"><%: Model.Country %></div>

        <div class="display-label">Latitude</div>
        <div class="display-field"><%: String.Format("{0:F}", Model.Latitude) %></div>

        <div class="display-label">Longitude</div>
        <div class="display-field"><%: String.Format("{0:F}", Model.Longitude) %></div>

        <div class="display-label">IsValid</div>
        <div class="display-field"><%: Model.IsValid %></div>
        </div>
    </fieldset>

How do I get the display-label and display-field for each "entry" to appear on the same line?

+1  A: 

Try

.display-label{
  float:left;

}
.display-field{
  float:left;
}

And

    <div class="display-label">DinnerID</div>
    <div class="display-field"><%: Model.DinnerID %></div>
    <br/>
    <div class="display-label">Title</div>
    <div class="display-field"><%: Model.Title %></div>
Salil
Thanks, but it didn't quite work out as expected. The rows all started after the previous row ended (horizontally) Also, I was hoping there would be a way to style the default generated details view without changing the html, only by using css...
Anders Svensson
+1  A: 

Same as @Salil's answer, but instead of using a <br/> you can use another div around each "row" and set the margin manually. It just gives you a litte more control.

.itemrow
{
    margin-bottom: 10px;
}

<div class="itemrow">
    <div class="display-label">DinnerID</div>
    <div class="display-field"><%: Model.DinnerID %></div>
</div>
<div class="itemrow">
    <div class="display-label">Title</div>
    <div class="display-field"><%: Model.Title %></div>
</div>

Also, don't forget a <div style="clear:both"/> at the end to reset the alignment.

Ryan
Thanks, this works. But again, see the comment for Salil about my hopes to be able to do it solely by css... If it's not possible I'll have to accept that, it just seemed to me there should be a way...
Anders Svensson
You might be able to just use `.display-label { clear:both; float:left }`. I always have a wrapper div so I've never tried this.
Ryan
Great, that worked! Thanks, that's the answer I was looking for. Now there's just one problem: If I place borders around them to sort of emulate a table, the display-fields are right up against the border, and padding doesn't seem to help because it seems to refer to the leftmost edge of the "table" (where the display-label is)... Any idea how to get around this?
Anders Svensson
Can you use `padding-left` on the .display-item? I also usually set a specific width on the label div style.
Ryan
It works fine with display-label, but nothing happens with display-field... I have set a width of 200px for the display-label.
Anders Svensson