CODEWITHSUNDEEP
htmlmedia-queriespolymer
Julian Pr
Julian Pr

Reputation: 320

Polymer core-media-query element for responsive layouts

I'm currently struggling with setting up a responsive web page using the core-media-query element from polymer. I have a simple div container with two child-elements which i want to be aligned horizontally on large screens and vertically on small screens (eg. phones). I played around with the Auto-vertical example from the documentation but didn't get it to work for me.

I also tried a different approach:

<core-media-query query="max-width: 640px" queryMatches="{{phoneScreen}}"></core-media-query>
<div layout {{phoneScreen ? vertical : horizontal}}>
  <div>Alpha</div>
  <div>Beta</div>
  <div>Gamma</div>
</div>

But this also doesn't seem to work for me.

Anyone have an idea on how to properly use the core-media-query-Element?

Upvotes: 0

Views: 1867

Answers (1)

Jeff Posnick
Jeff Posnick

Reputation: 56044

Here's a working example. There's a live version at http://jsbin.com/lufewa (I can't embed this using the SO code runner, because you can't resize the output window.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Polymer core-media-query Demo</title>
  </head>

  <body>
    <script src="//www.polymer-project.org/webcomponents.js"></script>
    <link rel="import" href="//www.polymer-project.org/0.5/components/core-media-query/core-media-query.html">

    <template is="auto-binding">
      <core-media-query query="max-width: 640px" queryMatches="{{phoneScreen}}"></core-media-query>
      <div layout vertical?="{{phoneScreen}}" horizontal?="{{!phoneScreen}}">
        <div>Alpha</div>
        <div>Beta</div>
        <div>Gamma</div>
      </div>
    </template>
  </body>
</html>

I don't think the {{phoneScreen ? vertical : horizontal}} you're trying to use will work in general for including/omitting boolean attributes.

My example pretty closely matches what's in the docs, and I'd imagine if you couldn't get it working originally, it might have been because it wasn't part of a Polymer element and wasn't wrapped in a <template is="auto-binding">?

Upvotes: 4

Related Questions