search

InfomediaLtd / angular2-materialize

Angular 2 support for Materialize CSS framework.
https://infomedialtd.github.io/angular2-materialize/
MIT License
406 stars 139 forks source link

Issue with bottom sheet style modals and buttons with wave-effect #16

Closed vesteraas closed 8 years ago

vesteraas commented 8 years ago

It looks like bottom-sheet modals does not play very well with buttons using the waves-effect class. The first time the modal is opened, the button is visible, but the next time, the button is gone. So it seems.

Using the inspect tool reveals that the button is still there. You can click the button, and in the moment you do, it 'magically' appears.

<div id="errorModal" class="modal bottom-sheet">
    <div class="modal-content">
        Blah blah
    </div>
    <div class="modal-footer">
        <a class="modal-action modal-close btn-flat waves-effect waves-red">Oh well</a>
    </div>
</div>
rubyboy commented 8 years ago

@vesteraas thanks for reporting this problem. Have you got a specific setup that reproduces it? Does it happen on a specific browser or screen size? Here's the full component that I used to try and reproduce it, but it seems to work well for me. Can you give it a try? If that is still not working for you then we can try creating a repository fork for reproducing it and nailing down the exact use case where this happens.

import {MaterializeDirective} from "angular2-materialize";
import {Component} from "angular2/core"

@Component({
    selector: "dialogs",
    directives: [MaterializeDirective],
    template: `
      <!-- Modal Trigger -->
      <a materialize="leanModal" class="waves-effect waves-light btn modal-trigger" href="#errorModal">Modal</a>
      <div id="errorModal" class="modal bottom-sheet">
          <div class="modal-content">
              Blah blah
          </div>
          <div class="modal-footer">
              <a class="modal-action modal-close btn-flat waves-effect waves-red">Oh well</a>
          </div>
      </div>
    `
})
export class Dialogs {
}
vesteraas commented 8 years ago

I've spent an hour creating a minimal working example, but I'm not able to reproduce the problem. I have no more time to spend on this now, but have managed to 'solve' it temporarily by removing the waves-effect and waves-red classes from the button.

rubyboy commented 8 years ago

Cool, I'm going to close this issue. If you do find a way to reproduce I'd be happy to take a look :)