CODEWITHSUNDEEP
polymer-1.0paper-elements
Tusshu
Tusshu

Reputation: 1734

How to position polymer paper-toast element

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?

Upvotes: 0

Views: 1290

Answers (2)

Janith Widarshana
Janith Widarshana

Reputation: 3483

Following css also can solve your problem.

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

Upvotes: 2

Tusshu
Tusshu

Reputation: 1734

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 .

Upvotes: 0

Related Questions