Dart Polymer: Creating PaperDialog with CoreAnimatedPages displayed incorrectly in Firefox

Question

I use Dart Polymer PaperDialogs containing CoreAnimatedPages. The idea is to have popups in which you can click through multiple option views.

Example repository available at: https://bitbucket.org/neogucky/polymer-dialog-problem/

DialogView: view.html

<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/paper_elements/paper_button.html">
<link rel="import" href="packages/paper_elements/paper_dialog.html">
<link rel="import" href="packages/paper_elements/paper_dialog_transition.html">
<link rel="import" href="packages/core_elements/core_animated_pages.html">

<polymer-element name="test-view">
  <template>
    <paper-dialog id="extendedNode" vertical autoCloseDisabled=true transition="paper-transition-center" opened=true class="noTitle">
      <content> 
      <core-animated-pages selected="{{page}}" valueattr="id" transitions="hero-transition cross-fade">
            <section id="0">
                <br><br>
                <p cross-fade>Click next to see the secret text.</p>
            </section>
            <section id="1">
                <br><br>
                <p cross-fade >This text is a secret, so don't tell Firefox users!</p>
          </section>
        </core-animated-pages>
    </content>
    </paper-dialog>
  </template>

<script type="application/dart" src="view.dart"></script>
</polymer-element>

CSS-file:

html /deep/ paper-dialog {
  margin-top: -150px;
  margin-left: -300px;
}

html /deep/ paper-dialog /deep/ core-animated-pages{
  height: 300px;
  width: 600px;
}

Expected behavior: Upon page load a 300px x 600px dialog should popup with a button at the bottom left.

Behavior in Firefox: A small dialog is shown and resembles the dialog in chrome when there is no size set in the css file.

I would like to confirm if this is my fault for using incorrect CSS hooks or if this seems to be a polymer problem with Firefox.

Answer 1

If you CSS is not inside a Polymer element you need to add the polyfill version of the selectors to make it work on browsers without native shadow-DOM support

html paper-dialog,
html /deep/ paper-dialog {
  margin-top: -150px;
  margin-left: -300px;
}

html paper-dialog core-animated-pages,
html /deep/ paper-dialog /deep/ core-animated-pages{
  height: 300px;
  width: 600px;
}

See https://www.polymer-project.org/0.5/docs/polymer/styling.html and https://www.polymer-project.org/0.5/articles/styling-elements.html for more details