10

Please consider this jsFiddle. It is equivalent (code wise) to this Stack Snippet:

$(document).ready(function () {
    $('.modal').modal("show");
});
body {
    padding-top: 50px;
}
.my-module {
    position: fixed;
    top: 0;
    left: 0;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<p>Lorem ipsum dolor sit amet.</p>
<div class="my-module">This container contains the modal code.
    <div class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">Modal</div>
            </div>
        </div>
    </div>
</div>

However, the Stack Snippet renders differently, it does not show the problem I'm trying to reproduce, whereas the jsFiddle does.

The reason's because of the way the Stack Snippet is rendered (abbreviated):

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
    margin-top: 10px;
    padding-top: 50px;
}

.my-module {
    position: fixed;
    top: 0;
    left: 0;
    border: 1px solid red;
}
    </style>
</head>
<body>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

... etc

The problem is caused by the order of the CSS. I want / expect the external CSS files to load before the snippet's CSS. I think that's reasonable, as most external CSS files will be those for libraries like Bootstrap, and should come before any page-specific styles.

In addition to the order problem, I also noted the link elements are placed inside the body. I'm unsure whether that's correct or not, if I understand this question's main answer correctly they should be inside the head, because they have a rel attribute (haven't double checked that though!).

2
  • 3
    I just had this problem today and it was quite annoying mostly because I had to leave my question edit when I realized it won't work. I think it is fairly logic that <link> elements should be included in the <head> and not the other way around like it is now. People usually want to include standard plugins with their styles like jQuery UI or Bootstrap and then overwrite them. There might not be that many cases since less people seems to include a full running Code Snippet but when people actually want to make it work they are stopped by the design of the Stack Snippets.
    – Spokey
    Feb 16, 2015 at 19:51
  • 1
    Same problem here. Why hasn't anybody even acknowledged the existence of this question?
    – Mr Lister
    Jul 23, 2015 at 6:24

1 Answer 1

2

I completely agree that this is an issue that needs resolving. In the meantime you can work round it by embedding your css in a style tag after the css libraries like in this answer - https://stackoverflow.com/a/45753117/596639 - or similarly below.

Failing example using the css panel.

.btn-info {
  color: #000;
  background-color: red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-info">Using the css section fails to change colour</button>

Working example with embedded style

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<style>
  .btn-info {
    color: #000;
    background-color: red;
  }
</style>
<button class="btn btn-info">Using embedded style after css libraries changes colour</button>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .