CODEWITHSUNDEEP
csspolymerflexboxcustom-elementhtml-imports
Denis535
Denis535

Reputation: 3590

Why doesn't Flexbox work correctly in not chrome browsers?

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):

Everything in one place

The second sample in Edge ("flex-basis: 0" and "flex-grow: 1" don't work):

DOM-module in its own HTML file

The correct result in Chrome:

The correct result

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;
}

Upvotes: 3

Views: 611

Answers (2)

Denis535
Denis535

Reputation: 3590

To get it to work one should to add line "flex-basis: 0;" into .messages class.

Polymer.js is nothing to do with. This is due to the different Flexbox behavior in different browsers.

Upvotes: 1

Supersharp
Supersharp

Reputation: 31171

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.

Upvotes: 2

Related Questions