Background missing in region sections of Firefox OS Building Blocks

Question

i am about to write my personal "Hello World Firefox OS App". To be consistent with the system's style guide, I want to use the Building Blocks provided by Mozilla.

Since I want to have a possibility to set some preferences, I decided to copy the drawer example.

While the example code works fine on buildingfirefoxos.com, my own code is missing some white background with a closed sidebar. I think, I'm struggling to use the Building Blocks properly.

This is my source code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no" />
        <title>
            some simple app
        </title>
        <link rel="stylesheet" href="./css/util.css" />
        <link href="./style/headers.css" rel="stylesheet" type="text/css">
        <link href="./style_unstable/progress_activity.css" rel="stylesheet" type="text/css">
        <link href="./style_unstable/drawer.css" rel="stylesheet" type="text/css">

    </head>
    <body  role="application">
        <section data-type="sidebar">
            <header>
                <menu type="toolbar">
                    <a href="#content"><span class="icon icon-add">add</span></a>
                </menu>
                <h1>Title <em>(9)</em></h1>
            </header>
            <nav>
                <ul>
                    <li><a href="#content">label</a></li>
                    <li><a href="#content">label</a></li>
                    <li><a href="#content">label</a></li>
                    <li><a href="#content">label</a></li>
                </ul>
                <h2>Subtitle</h2>
                <ul>
                    <li><a href="#content">label</a></li>
                    <li><a href="#content">label</a></li>
                    <li><a href="#content">label larger label than the </a></li>
                    <li><a href="#content">label</a></li>
                </ul>
            </nav>
        </section>
        <section role="region" id="main">
            <header>
                <a href="#content"><span class="icon icon-menu">hide sidebar</span></a>
                <a href="#main"><span class="icon icon-menu">show sidebar</span></a>
                <h1>Title</h1>
            </header>
            <progress value="80" max="100"></progress>
            <header>
                <h2>Subtitle</h2>
            </header>
            <article role="main">
                1234
            </article>
        </section>
    </body>
</html>

Here you can see, that the main section is overlapping with the sidebar (as expected), but is missing a background or something, that is hiding the sidebar.

Drawer Building Block with closed side bar Drawer Building Block with opened side bar

Do I have to change some CSS? I would like to use only Building Blocks, since this would help me to reduce time to spend on updates, when the Building Blocks are adapted to new style guides ...

thx in advance : )

score 0 · Answer 1 · edited Feb 11 '14 at 21:58

I had this same problem. The solution that worked for me was to make sure that I was including more of the tags that were in the source so that the CSS knows what it needs to act on.

<section id="drawer" role="region">
  <article class="content scrollable header">
    ...
  </article>
</section>

Make sure that you have the above tags in there and in the right place (don't forget the end tags). You can look at the Building Blocks source to see where these go.

Background missing in region sections of Firefox OS Building Blocks

1 Answers1