CODEWITHSUNDEEP
c#asp.net-mvcrazor
Nathiel Paulino
Nathiel Paulino

Reputation: 544

How to add space between a row items

I'm trying to put a space between Elements with @Html.DisplayFor. I know the DisplayFor is a property "bound", but in this case I can't modify.

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Id)
        </td>
        <td>
            @{
                foreach (var t in item.ProcessDataDefinitions)
                {                      
                    @Html.DisplayFor(model => t.Name )
                    @Html.Label(" : ")
                    foreach (var gg in t.Values)
                    {                          
                        @Html.DisplayFor(model => gg.Value)
                    }                       
                }
            }
        </td>
        <td>
            @Html.ActionLink("Ir", "../Process/Show", new { id = item.Id }) |
            @Html.ActionLink("Andamento", "../Process/ViewTracker", new { id = item.Id })
        </td>


    </tr>
}

So in the second foreach I want to create a little space between the property Name and Value, I tried to use @Html.Label(" : ") the : appears but doesn't give some space.

Upvotes: 2

Views: 5013

Answers (3)

Salah Akbari
Salah Akbari

Reputation: 39956

You can use the <text> element for this purpose:

@Html.DisplayFor(model => t.Name )<text>" : "</text>

I think you can also use the @: as another alternative. You can get more information here: Razor’s @: and <text> syntax

Upvotes: 3

GoldenAge
GoldenAge

Reputation: 3068

It can be even more simple, you don't need any extra tags(extra tags makes your page heavier):

@Html.DisplayFor(model => t.Name) :

you can also use the &nbsp; like:

 @Html.DisplayFor(model => t.Name)&nbsp;:

Upvotes: 2

DavidG
DavidG

Reputation: 118957

If you are looking to just put a gap between your elements, then you should use CSS, for example:

<div class="model-name">
    @Html.DisplayFor(model => t.Name )
</div>

foreach (var gg in t.Values)
{     
    <div class="model-value">                     
        @Html.DisplayFor(model => gg.Value)
    </div>
}

And your CSS could be something like this:

.model-name { 
    display: inline-block;
    margin-right: 10px;
}

.model-value { 
    display: inline-block;
}

Here is a runnable demo to demonstrate my point (with coloured borders to emphasise the positions): 

.model-name { 
    border: 1px solid red;
    display: inline-block;
    margin-right: 10px;
}

.model-value { 
    border: 1px solid blue;
    display: inline-block;
}
<div class="model-name">
        ModelName
</div>

<div class="model-value">                     
    Model Value 1
</div>
<div class="model-value">                     
    Model Value 2
</div>
<div class="model-value">                     
    Model Value 3
</div>

Upvotes: 2

Related Questions