Skip to content Skip to sidebar Skip to footer
Home / Css / Flexbox / Html / Html Table / Polymer

How Do I Use Flexbox Together With Polymer To Make Tables

Post a Comment
I would like to use flexbox in Polymer to create tables out of divs. But the main problem is that by 'cells' squish because of the content inside it when I change the size of the

Solution 1:

Adding this to your border class should solve the issue.

word-break: break-word;


<!doctype html>
<html>

<head>
  <base href="https://polygit.org/components/">
  <script src='webcomponentsjs/webcomponents-lite.js'></script>
  <link rel='import' href='polymer/polymer.html'>
  <link rel='import' href='iron-flex-layout/iron-flex-layout-classes.html'>
</head>

<body unresolved>
  <dom-module id='base-page'>
    <style include='iron-flex iron-flex-alignment'>
      .border {
        border: 1px solid red;
        word-break: break-word;
      }
    </style>
    <template>
      <div class='vertical layout' style='width:50%'>
        <div class='horizontal layout'>
          <div class='flex border'>Short</div>
          <div class='flex border'>This is a muuuuuuuuuuuuuuuuuch longer text</div>
          <div class='flex border'>And this ie medium</div>
        </div>
        <div class='horizontal layout'>
          <div class='flex border'>e</div>
          <div class='flex border'>e</div>
          <div class='flex border'>e</div>
        </div>
      </div>
    </template>
  </dom-module>
  <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: 'base-page'
      });
    });
  </script>
  <base-page></base-page>
</body>

Post a Comment for "How Do I Use Flexbox Together With Polymer To Make Tables"