Menu
I'm writing a chat. When I wrote all DOM-modules in one HTML, it worked correctly in the Chrome, but DOM-modules didn't work in Edge. But then I moved all DOM-modules to another HTML file. Now it works in the Edge. But now Flexbox doesn't work in all browsers.
I've written a few samples:
All DOM-modules in one HTML: http://plnkr.co/edit/m9oKpnV2CWJvVu9Ry3PQ?p=preview
DOM-module in another HTML: http://plnkr.co/edit/n2rV8kDravia4CTNOSL5?p=preview
I don't know why, but in the Chrome the second sample works correctly, although in the the full project it has problem with Flexbox. But the second sample has the same problem in Edge. See the second image.
The first sample in Edge (the DOM-module isn't loaded):
The second sample in Edge ("flex-basis: 0" and "flex-grow: 1" don't work):
The correct result in Chrome:
index.html:
<!DOCTYPE html>
<html>
<head>
<script src="http://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="http://polygit.org/components/polymer/polymer.html" rel="import">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='main-block'>
<div class='title'>
<span>Title</span>
</div>
<my-module></my-module>
</div>
</body>
</html>
<dom-module id="my-module">
<template>
<div class='messages'>
<div class='message'></div>
<div class='message'></div>
<div class='message'></div>
<div class='message'></div>
<div class='message'></div>
<div class='message'></div>
<div class='message'></div>
<div class='message'></div>
<div class='message'></div>
<div class='message'></div>
<div class='message'></div>
<div class='message'></div>
</div>
<div class='title'>
<span>Bottom</span>
</div>
</template>
<script>
Polymer({
is: "my-module"
});
</script>
</dom-module>
style.css:
.main-block
{
display: flex;
flex-direction: column;
border: solid 1px red;
width: 300px;
height: 400px;
margin: 0 auto;
}
.title
{
background-color: red;
min-height: 50px;
height: 50px;
margin: 10px;
text-align: center;
}
my-module
{
display: flex;
flex-direction: column;
flex-basis: 0;
flex-grow: 1;
border: solid 1px green;
margin: 10px;
}
.messages
{
flex-grow: 1;
border: solid 1px blue;
margin: 10px;
overflow-x: hidden;
overflow-y: auto;
}
.message
{
background-color: pink;
min-height: 50px;
height: 50px;
margin: 10px;
}
273
The file polymer.htmlis loaded asynchronously by <link rel="import">.
That's why the function call Polymer(...) will fail in Edge. The function is not yet defined because the script is not loaded.
In Chrome it will work because the Custom Elements are handled natively (and differently) by the browser.
You should wait for the event HTMLImportsLoaded or WebComponentsReady to be sure the imported HTML files are loaded before relying on their content.
<script>
window.addEventListener( "WebComponentsReady", function()
{
Polymer( {
is: "my-module"
} )
} )
</script>
ADDENDUM
For le flexbox part, I don't have Edge so I cannot test but I got the same issue with Firefox and the solution was to add overflow: hidden in the CCS rule for my-module.
Maybe this would work for Microsoft Edge:
my-module > div:first-child {
overflow: auto ;
flex-basis:0 ;
}
The trick is to identify the element that needs the overflow directive.
81
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
