CODEWITHSUNDEEP
htmlcsspolymer
sinjins
sinjins

Reputation: 437

Dynamic height for DIV containing Polymer element (Shadow DOM)

I've just started playing with polymer elements, and please note that I definitely do not consider myself a web developer (so HTML/CSS/Javascript are not at all my strong suits). I'm having trouble making a dynamic height div container, when the content of the div is a polymer element (i.e. Shadow DOM). I can successfully change the height of the container in the CSS class using pixels (i.e. height: 250px), but changing the height property to; height: auto, or height: auto !important has the unexpected affect of essentially making the div dissapear (no height). I've also tried setting overflow-y of the container to both auto, visible and even the combination of height = 1% and overflow-y = hidden (which had been suggested somewhere). I suspect that this might have something to do with Shadow DOM, and the parent container not having knowledge of the Shadow DOM element's height? Has anyone out there been able to achieve a dynamic height DIV surrounding a polymer element? I will follow up with code samples if needed.

Upvotes: 2

Views: 3948

Answers (3)

valaxy
valaxy

Reputation: 79

It may not be a good solution, but it works

:host {
    position: relative;
}
root-in-shadow {
    position: absolute;
    top:      0;
    bottom:   0;
    left:     0;
    right:    0;
    margin:   auto;
}

Upvotes: 2

sinjins
sinjins

Reputation: 437

I eventually turned to polymer layout attributes and proper div structure to resolve this issue. Here is an example. Note that no height attributes are set at all within CSS. This allows for dynamic height and width divs (horizontally aligned) that are responsive and wrap vertically in smaller viewports.

<polymer-element name="my-element">
<template>
    <style>

        myContainer {
            padding-top: 10px;
            padding-right: 25px;
            padding-left: 25px;
            padding-bottom: 10px;
            margin-top: 0px;
            margin-right: 10px;
            margin-left: 10px;
            margin-bottom: 10px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.50);
            /* z-index: -1; */
        }

        myHeading {
            margin-top: 10px;
            margin-right: 10px;
            margin-left: 10px;
            margin-bottom: 0px;
            /*padding-bottom: 10px;
            padding-top: 10px;*/
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.50);
            text-align: center;
            background-color: lightgrey;
            color: black;
            font-weight: 700;
            /* z-index: -1; */
        }

    </style>


    <div id="myContainers" horizontal layout wrap>

        <div>
            <myHeading name="Container 1" horizontal layout center>
                <div flex>Container 1</div>
                <paper-menu-button icon="more-vert" halign="right">
                    <paper-item label="Edit" on-tap="{{ editItem }}"></paper-item>
                    <paper-item label="Copy"></paper-item>
                </paper-menu-button>
            </myHeading>
            <myContainer vertical layout>
                Container contents here
            </myContainer>
        </div>

Upvotes: 0

CletusW
CletusW

Reputation: 3980

Have you added display: block to your custom element? Custom elements default to display: inline, which might be causing this. From within Polymer, you can do this like so:

<polymer-element name="my-name>
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <!-- ... -->
  </template>
  <script>
    Polymer('my-name', {
      //...
    });
  </script>
</polymer-element>

Upvotes: 0

Related Questions