Align two Flex box dynamically using Angular

TechoTek Source

In my web-app I implemented flexbox using Angular framework. The funtionaly of this flex box is at first the first one will show on the window. When user will click one specific item from that flexbox, another flex box will appear. The first flex box will appear the entire window of the app. When another will appear the first one will automatically strech to 50% of the entire window. But I am very new in Angular. At this moment I set width of company-list to 50% and company-detail to auto. The first flexbox is streched but when resizing the window the two flex box are not in equal size. I would lie to show the company-list with the entire window at first. and also like to strech it when another flex (company detail) will be apperaed. But how can I achieve this.

My Code is

CSS

.flex-row {
  display: flex;
  justify-content: center;
  align-items: stretch;
}


.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

HTML code

<div fxLayout="column" fxLayoutAlign="center center" fx-offset=15>
<h2 class="dtable-h2">{{ 'A926Companies' | translate }}</h2>
</div>
<div fxLayout="row" fxLayoutAlign="start stretch">
    <div class="company-list" style="margin-top:10px;">

        <!-- create company button -->

    </div>

    <div class="company-detail" style="margin-top:10px;">

    </div>

csshtml5angularcss3flexbox

Answers

answered 6 days ago trichetriche #1

This isn't really related to Angular but anyway.

Here is how.

function addBox() {
  const container = document.querySelector('.container');
  const box = document.createElement('div');
  container.appendChild(box);
}
.container {
  background: lightgray;
  padding: 12px;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.container div {
  background: teal;
  flex: 1 1 50%;
  margin: 0 6px;
  padding: 12px;
}

button {
  padding: 12px 24px;
  background: orange;
  color: black;
  border-radius: 5px;
  border: 0;
  font-weight: 700;
}
<div class="container">
  <div>
    <button onclick="addBox()">Add box</button>
  </div>
</div>

EDIT

In the case of using Flex Layout :

<div fxLayout="row" fxLayoutAlign="start stretch">
  <div class="company-list" style="margin-top:10px;" fxFlex> </div>
  <div class="company-detail" style="margin-top:10px;" fxFlex="50%"> </div>
</div>

comments powered by Disqus