How to set :host {} based on media query in Polymer? -
i have set height on :root
element, or else not viewport size want scrollbar. however, want set height: calc(100% - 130px);
when viewport less 900px.
how can since can not use @media
query? tried no success:
<template> <style include="iron-flex iron-flex-alignment"> :host[show] { background-color: var(--pink-color); width: 100%; overflow-x: hidden; overflow-y: auto; outline: none; display: flex; } :host[smallscreen] { height: calc(100% - 130px); } <div hidden$="{{!show}}"> <iron-media-query query="(max-width: 899px)" query-matches="{{smallscreen}}"></iron-media-query> ... <script> polymer({ is: 'video-selection', properties: { show: { type: boolean, value: true, reflecttoattribute: true }, smallscreen: { type: boolean, value: false, reflecttoattribute: true } },
Comments
Post a Comment