align Div item with flex-layout (fxlayout) not working

Question

I'm trying to adjust my div and it doesn't work correctly.

Here' the code. (I want my 2 side by side for 75% / 25% Also I want my choice (mat-radio) in the top of the first DIV and both selecting choice (dropdown) side by side. Like in the picture that I include.

Here's the code:

<form [formGroup]="concessionFrmGroup">
<div class="mat-typography app-frame">
<div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="center center">
  <div class="padding" flex="50">
    <label id="radio-group-label">Affrontement entre :</label>
    <mat-radio-group aria-labelledby="radio-group-label" class="radio-group">
      <mat-radio-button class="radio-button" value="1" checked="true">Concession</mat-radio-button>
      <mat-radio-button class="radio-button" value="2">Équipe</mat-radio-button>
    </mat-radio-group>
    <div class="padding">
      Concession:
      <mat-dialog-content class="alternate-theme mat-app-background">
        <mat-form-field>
          <mat-label>Choisir une concession</mat-label>
          <mat-select [(ngModel)]="selectedConcession" formControlName="concessionFrmGroup" >
          </mat-select>
        </mat-form-field>
      </mat-dialog-content>
      <img class="imgInfo" [attr.src]="getImgUrl()" hidden={{this.logo1hidden}} />
      <div class="logo" fxFlexAlign="center">
        {{this.name1}}
      </div>
      <img class="imgInfo" [attr.src]="getImgUrl()" hidden="true" />
    </div>
    <div fxLayoutAlign="flex-start">
      Contre
    </div>
    <div class="padding">
      Concession:
      <mat-dialog-content class="alternate-theme mat-app-background">
        <mat-form-field>
          <mat-select placeholder="Choisir une concession" [(ngModel)]="selectedConcession2"
            formControlName="concessionFrmGroup" >

          </mat-select>
        </mat-form-field>
      </mat-dialog-content>
      <img class="imgInfo" [attr.src]="getImgUrl()" hidden="true" />
      <div class="logo" fxFlexAlign="center">
        {{this.name2}}
      </div>
      <img class="imgInfo" [attr.src]="getImgUrl()" hidden="true" />
    </div>
  </div>
  <div class="padding">
    <label id="radio-group-label">Type :</label>
    <mat-radio-group aria-labelledby="radio-group-label2" class="radio-group">
      <mat-radio-button class="radio-button" value="s" checked="true">Saison</mat-radio-button>
      <mat-radio-button class="radio-button" value="p">Série</mat-radio-button>
    </mat-radio-group>

  </div>
</div>

<mat-tab-group class="mat-tab">
  <!-- <div class="bgborder bold left"> -->
  <mat-tab label="Test 0:">
    <!-- </div> -->
    <div fxLayout="column" fxLayoutGap="32px" fxLayoutAlign="space-around none" class="bg2">

    </div>
  </mat-tab>

  <mat-tab label="Test 1:">
    <div class="alternate-theme mat-app-background div-bg center" color="primary">
     Test 1
    </div>
    <div fxLayout="row " fxLayoutGap="32px" fxLayoutAlign="space-evenly none" class="bg1">

    </div>
  </mat-tab>

  <mat-tab label="Test 2:">
    <div class="alternate-theme mat-app-background div-bg center" color="primary">
     Test 2
    </div>
    <div fxLayout="row " fxLayoutGap="32px" fxLayoutAlign="space-evenly none" class="bg1">

    </div>
  </mat-tab>

  <mat-tab label="Test 3:">
    <div class="alternate-theme mat-app-background div-bg center" color="primary">
      Test 3
    </div>
    <div fxLayout="row " fxLayoutGap="32px" fxLayoutAlign="space-evenly none" class="bg1">

    </div>
  </mat-tab>

</mat-tab-group>

Here's the link for stackblitz: https://angular-testtable.stackblitz.io/ https://stackblitz.com/edit/angular-testtable?file=src%2Fapp%2Fconcession.component.html

Here's a "sample" of what I want my page looks like :

(I try many thing with flex, and I was not able to get the result show in the image)

Thanks for your help.

A newbie in flex layout.

Tomasz Vizaint Tomasz Vizaint · Accepted Answer · 2020-11-10T15:19:21

i´m testing You problem because is interesting for me, and result is like below.

the code is:

<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px" fxLayoutAlign="center stretch" style="margin-top: 34px;">
  <div fxFlex="75" style="background-color: aquamarine; padding: 24px;">

    <div fxLayout="row">
      <div fxFlex="100" fxLayoutAlign="center" style="background-color: rgb(42, 165, 48); padding: 24px;">
        <h2>Radio button</h2>
      </div>
    </div>

    <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px">
      <div fxFlex="50" style="background-color: rgb(236, 203, 203); padding: 24px;">
        <h2>Option 1</h2>
      </div>
      <div fxFlex="50" style="background-color: rgb(149, 155, 236); padding: 24px;">
        <h2>Option 2</h2>
      </div>
    </div>
  </div>

  <div fxFlex="25" style="background-color: rgb(164, 226, 206); padding: 24px;">
    <h2>Right Column</h2>
  </div>
</div>

and mobile view:

Is this what You looking for?

For only radio Try this:

<div fxLayout="row">
      <div fxFlex="100" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px"
        style="padding: 16px;">
        <label id="radio-group-label" fxLayoutAlign="center" style="background-color: coral;">Affrontement entre
          :</label>
        <mat-radio-group aria-labelledby="radio-group-label2" fxLayoutAlign="center">
          <mat-radio-button class="radio-button" value="s" checked="true" style="margin-right: 16px;">
            Concession à marquer
          </mat-radio-button>
          <mat-radio-button class="radio-button" value="p">Équipe à marquer</mat-radio-button>
        </mat-radio-group>
      </div>
    </div>

And this is result: Screen and mobile:

align Div item with flex-layout (fxlayout) not working

1 Answers