Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Badge appears in wrong position when used with app-drawer #66

Open
ghost opened this issue Aug 27, 2017 · 1 comment
Open

Badge appears in wrong position when used with app-drawer #66

ghost opened this issue Aug 27, 2017 · 1 comment

Comments

@ghost
Copy link

ghost commented Aug 27, 2017

I'm using app-layout with app-drawer / app-drawer-layout and app-header / app-header-layout (see MWE below). The paper-badge is attached to an element inside the app-header. The first time the page is loaded, it briefly appears in the correct position (issue #12), than disappears off the right of the screen, exactly 256px too far to the right, which is the exact size of the app-drawer.

When the screen is resized, it recalculates the position to the correct place.

This does not happen when the app-drawer is retracted and not visible.

I tried running updatePosition() at ready but that did not help. Any ideas how this can be solved?

Here is my MWE:

<template>
<style is="custom-style">
    app-drawer {
      --app-drawer-content-container: {
          background-color: green;
      };
    }
    app-header {
      background-color: yellow;
    }
</style>

  <app-drawer-layout fullbleed>

    <app-drawer slot="drawer">
        <div id="drawerbox">Navigation Drawer</div>
    </app-drawer>

    <div class="container">
      <app-header-layout>
        <app-header id="header" condenses reveals effects="waterfall" slot="header">
           <app-toolbar id="toolbarheader">
              <div main-title id="toolbartitlebox">Title Toolbar</div>
              <paper-icon-button id="discoursebutton" icon="communication:forum"></paper-icon-button>
              <paper-badge for="discoursebutton" label="20" title="20 results"></paper-badge>
           </app-toolbar>
        </app-header>
      </app-header-layout>
    </div>
  </app-drawer-layout>
</template>

In this MWE it would work by placing the badge below and outside the app-drawer-layout. However, in my real code they are in different elements so it no longer works to do that.
One hack that works is to set a setTimeout on the updatePosition():

        ready: function() {
          var self = this;
          setTimeout(function(){
            self.$$('paper-badge').updatePosition();
          }, 100);
        }
@dshukertjr
Copy link

Having the same issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant