1

I'm trying to use ember-paper in my ember app but i can't float content to the right.

Example

enter image description here

What I want to achieve (from ember-paper official website)

enter image description here

My code

application.hbs

{{#paper-nav-container}}
  {{#paper-sidenav class="md-sidenav-left site-sidenav md-whiteframe-z2" locked-open="gt-sm"}}
    {{#paper-toolbar}}
      <div class="md-toolbar-tools">
        <div class="logo">
          <strong>Paper</strong>
        </div>
      </div>
    {{/paper-toolbar}}

    {{#paper-content}}
      {{#paper-list}}
        {{#paper-item action=(transition-to "employees.list")}}Introduction{{/paper-item}}
        {{#paper-item action=(transition-to "index")}}Another link{{/paper-item}}
      {{/paper-list}}
    {{/paper-content}}
  {{/paper-sidenav}}

  <div layout="column" tabindex="-1" role="main" flex>
    {{#paper-toolbar}}
      <div class="md-toolbar-tools">
        <span class="md-breadcrumb-page">Title</span>
      </div>
    {{/paper-toolbar}}

    {{#paper-content class="md-padding"}}
      {{outlet}}
    {{/paper-content}}
  </div>
{{/paper-nav-container}}

How can I float sidebar to the left? I have no errors in console, and it was a straight copy-paste from official guide

intelis
  • 7,829
  • 14
  • 58
  • 102

1 Answers1

1

The example is using the display:flex probably thats not supported in your browser http://caniuse.com/#search=flex ? provided you copy pasted the entire CSS required.

Mohamed Jahaber Sadiq
  • 149
  • 4