Applying CSS to Polymer custom element with iron-media-query

Asked By: Anonymous

I’m trying to achieve a simple ‘media-query’ behavior on my custom element using <iron-media-query> from the Polymer API.

Assume i have a container with some text on top the top, and below it is the main content..
My goal is to write media queries so that when the element is displayed on a big screen (just bigger than 768px for my testing), i can do some simple margin and padding modifications to the elements local DOM styles.

I just can’t make it work.
Is there something i completely missed here ?

<link rel="import" href="../../bower_components/polymer/polymer.html"/>
<link rel="import" href="../../bower_components/iron-media-query/iron-media-query.html" />

<iron-media-query query="(max-width:768px)" query-matches="{{isMobilePhone}}"></iron-media-query>

<template is="dom-if" if="{{isMobilePhone}}">

    <style>
        #title {
            color: #000000;
            font-size: 1.8em;
        }
    </style>


</template>


<template>
    <style>
        :host {
            background-color: gray;
            flex-direction: column;
            margin: auto;
            margin-top: 40px;
            display: flex;
            width: 90%;
            flex-grow: 1;
            max-width: 1300px;
        }

        #title {
            color: #7DB8C9;
            font-size: 1.3em;
        }

        .content-wrapper {
            height: 100%;
        }
    </style>


    <p id="title">
        [[title]]
    </p>

    <div class="content-wrapper">
        <content select=".content"></content>
    </div>

</template>




<script>
    Polymer({

        is: 'content-container',
        properties: {
            title: String,
            isMobilePhone: Boolean
        },
        listeners: {
            'tap': 'spit'
        },
        spit: function() {
            console.log("BOOL: " + this.isMobilePhone);
        }

    });
</script> </dom-module>

I also tried copying the whole template ( with styles and markup ) inside the ‘if’ template and just modify the styles i want, but it doesn’t work either.

(Everything is inside the same file, which is content-container.html)

Solution

Answered By: Anonymous

One of the easiest ways to achieve this (which is the one used in the iron-media-query demo) is to use Polymer’s annotated attribute bindings together with attribute selectors.

A simple example of an element’s template would look like this

<template>
<style>
  .content-wrapper ::content {
    color: blue;
  }

  .content-wrapper[mobile-layout] ::content {
    color: green;
  }
</style>

<iron-media-query query="(max-width:768px)" query-matches="{{isMobilePhone}}"></iron-media-query>
<div class="content-wrapper" mobile-layout$="[[isMobilePhone]]">
  <content></content>
</div>
</template>

Here’s a fiddle showing it in action