How Do I Use Flexbox Together With Polymer To Make Tables
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><basehref="https://polygit.org/components/"><scriptsrc='webcomponentsjs/webcomponents-lite.js'></script><linkrel='import'href='polymer/polymer.html'><linkrel='import'href='iron-flex-layout/iron-flex-layout-classes.html'></head><bodyunresolved><dom-moduleid='base-page'><styleinclude='iron-flex iron-flex-alignment'>.border {
border: 1px solid red;
word-break: break-word;
}
</style><template><divclass='vertical layout'style='width:50%'><divclass='horizontal layout'><divclass='flex border'>Short</div><divclass='flex border'>This is a muuuuuuuuuuuuuuuuuch longer text</div><divclass='flex border'>And this ie medium</div></div><divclass='horizontal layout'><divclass='flex border'>e</div><divclass='flex border'>e</div><divclass='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"