Putting a value from model into an HTML style attribute via Razor

Question

I'm trying to display a series of divs in my view, the width of each being dependent on the amount of items in a child list in my viewmodel. I'm determining what the width of the divs ought to be in my controller and am trying to alter the width of the divs in my view by changing the value of the HTML style attribute. However, I can't seem to insert a value from my model into a style attribute in the same way I can insert it into a class attribute. Here's a little bit of my code:

@for (int i = 0; i < Model.IntegrationActivityList.Count; i++)
{
    <div data-integration-id="@Model.IntegrationActivityList[i].WorkflowIntegrationActivityParentId" style="width:@Model.IntegrationActivityList[i].IntegrationActivityDivWidth;">
        /* more code here, iterate through child list items */
    </div>
}

data-integration-id="@Model.IntegrationActivityList[i].WorkflowIntegrationActivityParentId" works fine, but style="width:@Model.IntegrationActivityList[i].IntegrationActivityDivWidth;" does not result in a rendered style attribute at all.

I've tried a couple other methods, such as using Html.Raw to generate the markup, also to no avail: <div @Html.Raw("style='width: " + Model.IntegrationActivityList[i].IntegrationActivityDivWidth + ";'")>.

How can I modify the width of my div using Razor and information from my model? (I'm also open to any other suggestions on better ways to accomplish this.)

can you try removing style. eg. "[email protected][i].IntegrationActivityDivWidth;"> /* more code here, iterate through child list items */ And your width value should end with px or % — Karthik M R
– Karthik M R, Commented May 19, 2016 at 17:29
Thanks, I added 'px' to the end of my viewmodel property. However, the width HTML attribute doesn't seem to work, I think because my divs are inline-blocks. — dumbchemistry
– dumbchemistry, Commented May 19, 2016 at 17:48
Is your browser rendering width attribute with value? where have you specified the div as inline-block? The width can be specified for inline-block as well — Karthik M R
– Karthik M R, Commented May 19, 2016 at 17:59
Hi, yeah, it's rendering the width attribute with the value. I could be wrong but the width attribute doesn't seem to be working with an inline-block: js-fiddle. Also, my div elements are absolutely positioned which appears to be preventing the width attribute from working as well. — dumbchemistry
– dumbchemistry, Commented May 19, 2016 at 18:10
if you specify style="width:400px", its working. so can you readd the style attribute and check — Karthik M R
– Karthik M R, Commented May 19, 2016 at 18:28

dumbchemistry · Accepted Answer · 2016-05-19 20:17:27Z

2

I was able to fix this issue by adding the @Html.Raw() function call inside the style attribute like so:

<div style="@Html.Raw("width:" + Model.IntegrationActivityList[i].IntegrationActivityDivWidth + ";")"></div>

answered May 19, 2016 at 20:17

dumbchemistry

4141 gold badge7 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Putting a value from model into an HTML style attribute via Razor

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related