CODEWITHSUNDEEP
htmlcsspolymerflexbox
cayblood
cayblood

Reputation: 1876

Trouble vertically centering a polymer element inside a fullbleed body

I have a polymer element that I'm inserting into an html page where I'm using fullbleed in the body tag to leave no margins, and I want the element to fill the entire page. I'm trying to center some text in this element vertically on the page, but the usual layout attributes I'm using don't seem to have any effect. See the attached example.

<script src="http://www.polymer-project.org/0.5/webcomponents.js"></script>
<link rel="import" href="http://www.polymer-project.org/0.5/components/polymer/polymer.html">

<polymer-element name="polymer-css-test">
  <template>
    <style>
      #test {
        background-color: green;
      }
    </style>
    <div id="test" fit>
      <div vertical layout center>
        I want this text to be vertically and horizontally centered.
      </div>
    </div>
  </template>
  <script>
    Polymer('polymer-css-test', {
      ready: function () {
      }
    });
  </script>
</polymer-element>
<body unresolved fullbleed layout vertical>
  <polymer-css-test></polymer-css-test>
</body>

Upvotes: 2

Views: 2819

Answers (1)

jimi dough10
jimi dough10

Reputation: 2016

i was able to get it to work in chrome 41 and firefox 36.0.4 by moving the vertical layout attribute to the #test div and using center-justified in place of center then putting self-center attribute on the inner div. 

    <script src="http://www.polymer-project.org/0.5/webcomponents.js"></script>
    <link rel="import" href="http://www.polymer-project.org/0.5/components/polymer/polymer.html">

    <polymer-element name="polymer-css-test">
      <template>
        <style>
          #test {
            background-color: green;
          }
        </style>
        <div id="test" fit layout vertical center-justified>
          <div self-center>
            I want this text to be vertically and horizontally centered.
          </div>
        </div>
      </template>
      <script>
        Polymer('polymer-css-test', {
          ready: function () {
          }
        });
      </script>
    </polymer-element>
    <body unresolved fullbleed layout vertical>
      <polymer-css-test></polymer-css-test>
    </body>

example here http://plnkr.co/edit/2fF4FeJn4LbdMm8dyhiD?p=preview

Upvotes: 5

Related Questions