CODEWITHSUNDEEP
htmlcssflexbox
MadBoy
MadBoy

Reputation: 11104

Flex keeps on resizing itself in Firefox

I'm using Vis.js to create diagrams. Relevant code:

.defaultSection {
  border: 1px solid #bbbbbb;
  padding-bottom: 0px;
  margin: 5px;
  width: calc(100% - 10px);
}

.overflowHidden {
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
}

.flexParent {
  display: flex;
  justify-content: space-between;
  padding: 2px;
}

.flexParentInvisible {
  display: flex;
  justify-content: space-between;
}

.flexElement {
  flex-basis: 100%;
}

.flexPanel {
  flex-basis: 100%;
}

.roundedCorners {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 5px;
  margin: 5px;
}
<div data-panes="true">
  <div id="Tab-ta6f7ijb-Content" class="active">
    <div class="defaultSection roundedCorners overflowHidden">
      <div class="defaultHeader" style="text-align:center;background-color:#00bfff"><a name="Test" style="color: #ffffff;">Test </a><a id="show_505656775" href="javascript:void(0)" onclick="show('505656775');" style="color: #ffffff; display:none;">(Show)</a><a id="hide_505656775" href="javascript:void(0)" onclick="hide('505656775');"
          style="color: #ffffff; display:none;">(Hide)</a></div>
      <div id="505656775" class="flexParent flexElement overflowHidden">
        <div id="505656775" class="flexParent flexElement overflowHidden collapsable">
          <div id="Diagram-hvardq4p" class="diagram"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Full code: https://codepen.io/MadBoyEvo/pen/XWmbZra

It works fine in Chrome, Edge, IE and even Firefox with one problem. In firefox, the section where diagram is located keeps on resizing itself over and over. I'm sure this is my mistake with CSS but whatever I try to fix it doesn't work.

enter image description here

Upvotes: 2

Views: 56

Answers (2)

MadBoy
MadBoy

Reputation: 11104

Author of Vis.js provided me with a tip: https://github.com/visjs/vis-network/issues/628

<div Class="diagram" Style="position:relative">
     <div style="position:absolute" id="Diagram-w5gcskfb" class="diagram"></div>
</div>

This solves it for me.

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 371629

The diagram is contained in a <canvas> element. That element has two height values assigned, both as inline styles:

  • height: 100%, and
  • height="484" (or whatever value it happens to have at the moment).

Once you remove the height: 100% the rolling expansion stops.

enter image description here

Upvotes: 1

Related Questions