Polymer 1.0 Layout Issues- background image, center play button, and document flow

Darin Hensley

unread,

Jul 7, 2015, 10:52:08 AM7/7/15

to polym...@googlegroups.com

Stackover flow cross post: http://stackoverflow.com/questions/31272000/polymer-1-0-layout-issues-background-image-center-play-button-and-document-fl

I am new to the Polymer layout scheme and having issues along with a few questions.

Here is the jsbin: http://jsbin.com/takoxe/edit?html,css,output

1) For the picture of king david, I am trying to display it full width and height and have it responsive. I should be able to do this with just `fullbleed fit`, but instead I have to use `top: 50px; z-index: -1`. I am sure I am doing this wrong and if someone could show me the correct way, please.

2) I can not get the `play-button-contain` and `play-button-video` to center in the middle vertically and it doesn't stay in the middle responsive when I move it. I was hoping `class="layout vertical"` would be the answer but it's not.

3) I later on, as I add the page, I will add a section/polymer element underneath the King David picture. So, as a filler I used `<h5>A new section that should be on the bottom, not top</h5>` but instead it shows on top of the King David picture. This is really confusing since it's not following the document flow.

I am using the https://events.google.com/io2015/ site as a model, which I like alot. This is why I am using `background-image`, etc for this set up and not some other way.

Eric Bidelman

unread,

Jul 8, 2015, 12:24:11 PM7/8/15

to Darin Hensley, polym...@googlegroups.com

Think this is what you're after: http://jsbin.com/zagorevaqo/edit?html,css,output

On Tue, Jul 7, 2015 at 7:52 AM Darin Hensley <darin....@gmail.com> wrote:

Stackover flow cross post: http://stackoverflow.com/questions/31272000/polymer-1-0-layout-issues-background-image-center-play-button-and-document-fl

I am new to the Polymer layout scheme and having issues along with a few questions.

Here is the jsbin: http://jsbin.com/takoxe/edit?html,css,output

1) For the picture of king david, I am trying to display it full width and height and have it responsive. I should be able to do this with just `fullbleed fit`, but instead I have to use `top: 50px; z-index: -1`. I am sure I am doing this wrong and if someone could show me the correct way, please.

`fullbleed` only works on <body>. Instead, I made the <body> a flexbox container using `layout vertical`, and told the center <div> to flex to it takes up the entire middle section.

2) I can not get the `play-button-contain` and `play-button-video` to center in the middle vertically and it doesn't stay in the middle responsive when I move it. I was hoping `class="layout vertical"` would be the answer but it's not.

3) I later on, as I add the page, I will add a section/polymer element underneath the King David picture. So, as a filler I used `<h5>A new section that should be on the bottom, not top</h5>` but instead it shows on top of the King David picture. This is really confusing since it's not following the document flow.

Since the center section is flexing, it pushes this bar down to the bottom. If that's not what you want, you could also make it position: absolute; bottom: 0; width: 100%;

I am using the https://events.google.com/io2015/ site as a model, which I like alot. This is why I am using `background-image`, etc for this set up and not some other way.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/9224a9d5-761a-411c-8be0-2d1d3d97b603%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Darin Hensley

unread,

Jul 10, 2015, 1:14:04 PM7/10/15

to polym...@googlegroups.com, darin....@gmail.com

Thank you so much for your help! This information has helped me greatly.

However, I cut and pasted the same code from http://jsbin.com/zagorevaqo/edit?html,css,output, on to my local development. With the exception of the <base href="http://milestech.net/components/"> and <script src="webcomponentsjs/webcomponents-lite.min.js"></script>, I did my local injections from the bower dir. The layout was wonky. The picture had no height and when I manually added the height it seems pushed down. I am using Polymer 1.0.3 and iron-flex-layout 1.0.2. What would cause this discrepancy?

On my local server, I was able to make it look like the google I/O site with(although I'm sure in the long run I will find I did not do it correctly):

    <div class="layout vertical center-justified">
      <div id="video-photo-container" class="fullbleed fit">
        <div class="horizontal layout center" style="height: 100%">
          <div class="layout vertical center" style="width: 100%">
            <div id="play-button-container" class="horizontal center-center layout wrap">
              <div id="play-button-png"></div>
              <h5>See and hear the story</h5>
            </div>
          </div>
        </div>
      </div>
    </div>

html,body {
 margin: 0;
 background-color: #E5E5E5;
 font-family: 'RobotoDraft', sans-serif;
}


.video-dialog {
 max-height: 100%;
 max-width: 100%;
}


#video-photo-container {
 min-height: 100px;
 background-image: url("../img/pastor_mulinde3.jpg");
 position: aboslute;
 background-size: cover;
 top: 50px;
 z-index: -1;
 max-height: 500px;
}






#play-button-png {
 background: url("../img/play-video-button.png") no-repeat 50% 0;
 background-size: 40px;
 height: 60px;
 width: 50px;
}




#play-button-container {
 width: 150px;
 height: 150px;
}


div#video-photo-container h5 {
 color: white;
 font-family: 'Roboto', sans-serif;
 font-size: 14px;
 font-weight: 500;
 line-height: 24px;
}

Reply all

Reply to author

Forward