HotTable width issues when inside a paper-drawer-panel. Off screen

[jclx]

We are having an issue when our hot-table is inside a paper drawer panel. It looks like hot-table doesn't calculate the drawer width when sizing the table. To recreate take the hot-table/index.html and remove the width/height and add stretch-h="all" to hot-table. It will then size to browser width. Then put table inside a paper-drawer-panel main div and it will go off the screen by the width of the panel. Did all this in the hot-table/index.html.

Example:

        <template id="tpl" is="dom-bind">
            <p>
                Name of first person: <strong>{{ people.0.name.first }}</strong> | Highlighted row: <strong>{{
                highlightedRow }}</strong>
            </p>
            <paper-drawer-panel>
                <div drawer>drawer</div>
                <div main>
                    <hot-table stretch-h="all" datarows="{{ people }}" context-menu max-rows="{{ people.length }}"
                               highlighted-row="{{ highlightedRow }}" class="htLeft">
                        <hot-column width="30" read-only value="id" header="ID"></hot-column>
                        <hot-column value="name.first" header="First Name">
                            <template data-hot-role="renderer" is="dom-template"><span>{{ value }}</span>...</template>
                        </hot-column>
                        <hot-column width="100" value="name.last" header="Last Name"></hot-column>
                        <hot-column width="100" type="date" value="date" header="Birthday"></hot-column>
                        <hot-column value="gender" header="Gender" source="[[ genderSource ]]"
                                    type="dropdown"></hot-column>
                        <hot-column type="numeric" value="age" header="Age"></hot-column>
                        <hot-column type="checkbox" value="languages.english" header="English" checked-template="Yes"
                                    unchecked-template="No"></hot-column>
                        <hot-column type="checkbox" value="languages.spanish" header="Spanish" checked-template="Yes"
                                    unchecked-template="No"></hot-column>
                        <hot-column type="checkbox" value="languages.french" header="French" checked-template="Yes"
                                    unchecked-template="No"></hot-column>
                        <hot-column type="numeric" value="salary" header="Salary" format="$ 0,0.00"></hot-column>
                    </hot-table>
                </div>
            </paper-drawer-panel>
        </template>

[devmikko]

Also happens when putting the hot-table to a iron-flex-layout

<div class="vertical layout fit">
    <hot-table></hot-table>
</div>

[warpech]

:+1: