Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS inheritance issues with Ember.js

I'm having issues with getting Inspiritas as an Ember app. The index.html looks like below:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>title</title>
        <meta name="author" content="me">
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link rel="shortcut icon" href="favicon.ico">
        <link href="inspiritas.css" rel="stylesheet">
    </head>

    <body>
        <script type="text/x-handlebars">
            <div class="navbar navbar-static-top navbar-inverse">
                <div class="navbar-inner">
                    <div class="container">
                        ...
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row-fluid">
                    <div class="span3">
                        ...
                    </div>
                    {{outlet}}
                </div>
            </div><!-- /container -->
        </script>

        <script type="text/x-handlebars" id="dashboard">
            <div class="span9" id="content-wrapper">
                <div id="content">
                    <section id="tables">
                        ...
                    </section>
                </div>
            </div>
        </script>

First off, it won't load the CSS for <div class="container"> (not the one inside the navbar). Instead, it inherits from body.ember-application, and in the process loses all the CSS. This only happens with this container, though. The only bit of LESS I can narrow it down to is some custom styling here:

body > .container {
    // Color the whole container like the sidebar to fix faux columns
    background: url('images/sidebar_bg.png') repeat @sidebarBackground;

    .border-radius(@borderRadiusLarge);

    // Make some space, eh.
    margin-top: 40px;
    margin-bottom: 40px;
}

UPDATE: Well, I've got no clue why but one class name change later its all gone to shit and everything has lost its styling.

like image 347
Hassan Khan Avatar asked May 09 '26 14:05

Hassan Khan


1 Answers

The CSS rule you pasted uses the descendant selector, which means only elements with the container class that are directly below the body element will be styled. But when Ember inserts Handlebars templates it wraps them via a View, which creates another intermediary DIV. I'd guess that's responsible for your styles not appearing.

like image 164
Pascal Zajac Avatar answered May 12 '26 08:05

Pascal Zajac