Why does adding a @Scripts.Render("") alter my html layout?

Question

Ran into this 'funny' issue today. I have an asp.net mvc application, with a twitter bootstrap design template, which up until now has been working fine. However, when I added some @Scripts.Render("...") statements to the top of my view (Not shared layout file, but view) it seems to alter my layout!

View:

@Scripts.Render("~/Scripts/jquery.signalR-1.1.2.js")
@Scripts.Render("~/signalr/hubs")
@Scripts.Render("~/Scripts/Stimline/connector.js")

<div class="span12"> 
    <legend>Fleet List</legend>
    <div class="row-fluid">
       ...
    </div>
</div>

Whenever the three script statements at the top is added to my .cshtml file, it seems to move the entire div-part over to the right, so that it aligns with the edge of my browser. Removing the statements again causes it to go back to normal, adding the margin supposed to be there by default from bootstrap.

I have not done any changes to the bootstrap css.

Has anybody seen this, or at least something similar, before?

Here's how it looks with the @Render.Scripts statement: enter image description here

And here's without it: enter image description here

If you use the fixed header bar as a reference for right edge, you'll see that the table is aligned all the way to the right in one image, and correctly "spaced" from the edge in the other.

Do you wrapped <div class="span12"> with <div class="row"> ? — z1m.in
– z1m.in, Commented Jul 11, 2013 at 8:35
Yes, in my _Layout.cshtml it's wrapped inside a container-fluid and then a row-fluid. — Nicklas Pouey-Winger
– Nicklas Pouey-Winger, Commented Jul 11, 2013 at 8:38
I'm sorry, that's not possible as this is an internal project at work :( Anything else I can provide you with to help? — Nicklas Pouey-Winger
– Nicklas Pouey-Winger, Commented Jul 11, 2013 at 8:43

gene · Accepted Answer · 2013-07-22 16:35:00Z

1

I recently ran into a similar issue where I was float li elements for a menu. I had each element on it's own line in the html, so a space was rendered between each item.

<ul>
    <li style="float:left">Item 1</li>
    <li style="float:left">Item 2</li>
    <li style="float:left">Item 3</li>
</ul>

changed to

<ul>
    <li style="float:left">Item 1</li><li style="float:left">Item 2</li><li style="float:left">Item 3</li>
</ul>

In your situation moving the script to the bottom of the page would be best to follow other best practices, but you could also remove the whitespace to get the same result.

edited Jul 22, 2013 at 16:35

answered Jul 18, 2013 at 17:18

gene

3381 gold badge2 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

Why does adding a @Scripts.Render("") alter my html layout?

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