How to position polymer paper-toast element

0
votes

Created Polymer app using polymer init command and selecting app-drawer-template.

In my-view1.html, linked to paper-toast.html and modified the template and script as follows:

 <template>
   <div class="card">
   <div class="circle">1</div>
   <h1>View One</h1>

   <button on-tap="handleTap">open</button>

   <paper-toast id="toast0" text="This toast auto-closes after 3 seconds"></paper-toast>

</div>

</template>

<script>

 Polymer({

   is: 'my-view1',

    handleTap: function(){
    this.$.toast0.open();
  }

  });

When the button is clicked, the toast appears but most of it appears behind the Menu drawer and only part of the toast window is visible.

I tried to center the toast using css but it does not work. Setting z-index did not work either. How can the toast window be positioned so it is not hidden behind the drawer?

2
polymer-1.0paper-elements
Added the following css:.mytoast { width: 100%; text-align: right; } Now toast window spans the page and text shows aligned to right end . - Tusshu

2 Answers

2
votes

Following css also can solve your problem.

paper-toast {
   width: 300px;
   margin-left: calc(50vw - 150px);
}
0
votes

Added the following css class to toast element:

.mytoast {
   width: 100%;
   text-align: right;

 }

Now toast window spans the page and text shows aligned to right end .