需要响应对话框

Question

我有一个对话框，该对话框分为两个侧面（左侧和右侧）。我希望左侧是静态的，右侧是可滚动的。一切正常，但是当我在大屏幕上打开它时，我的右侧在左侧，而我看不到左侧。

有人可以告诉我如何解决此问题吗？

PS：我对CSS的理解很慢。

我正在从Raster组件打开我的对话框。下面是代码。

  openDialogbox(value) {
    const dialogRef = this.dialog.open(AddNewFlyerComponent, {
      width: '100em',
      height: '50em',
      disableClose: true,
      data: {..}
    });

dialogBox.html

<div class="row">
  <div class="column-left" *ngIf="!copy">
    <div fxLayout="row" fxLayout.xs="column">
      <div fxFlex="50%" fxLayout="row" fxLayoutWrap fxLayoutAlign="start space-between">
        <h2>Suche Werbedaten</h2>
      </div>
      <div fxFlex="50%" fxLayout="row" fxLayoutWrap fxLayoutAlign="end space-between">
        <span> {{ data.week }}/{{ data.year }} | Seite: {{ data.page }} | Position: {{ data.emptyPosition }} </span>
      </div>
    </div>
    <!-- <h2 mat-dialog-title>Suche Werbedaten</h2> -->
    <!-- <span>  </span> -->
    <div class="example-container">
      <form class="example-container">
        <div>
          <label>Filiale: </label>
          <mat-radio-group>
            <mat-radio-button value="H" #f2 name="filiale" (click)="logFiliale(f2)">Hamm</mat-radio-button>
            <mat-radio-button value="R" #f1 name="filiale" (click)="logFiliale(f1)">Rhynern</mat-radio-button>
          </mat-radio-group>
        </div>
      </form>
      <mat-form-field class="example-container">
        <input matInput placeholder="Artikelnummer" #artnr name="artnr" value="">
      </mat-form-field>
      <mat-form-field>
        <textarea matInput placeholder="Werbenummer" #werbenr name="werbenr" value=""></textarea>
      </mat-form-field>
      <mat-form-field>
        <textarea matInput placeholder="Produktname" #produktname name="produktname" value=""></textarea>
      </mat-form-field>
      <mat-form-field>
        <textarea matInput placeholder="Werbetext" #werbetext name="werbetext" value=""></textarea>
      </mat-form-field>
      <mat-dialog-actions align="end">
        <button mat-raised-button color="warn" mat-dialog-close>
          {{ 'Abbrechen' }}
          <mat-icon>cancel</mat-icon>
        </button>
        <button mat-raised-button id="search-button" color="primary"
          (click)="searchWerbedata(artnr.value, werbenr.value, produktname.value, werbetext.value )">
          {{ 'Suchen' }}
          <mat-icon>search</mat-icon>
        </button>
      </mat-dialog-actions>
    </div>
  </div>
  <div class="column-right">
    <mat-card *ngFor="let werbedata of werbedata">
      <mat-card-header>
        <mat-card-subtitle>Filiale: {{ werbedata.FILIALE }}</mat-card-subtitle>
        <mat-card-subtitle>Werbenr: {{ werbedata.WERBE_NR }}</mat-card-subtitle>
        <mat-card-subtitle>Artikel: {{ werbedata.ArtNr }}</mat-card-subtitle>
        <mat-card-subtitle>Produktbezeichnung: {{ werbedata.Produktbez }}</mat-card-subtitle>
      </mat-card-header>
      <img [src]="werbedata.Bild_L" onError="this.src='/assets/kein-bild.gif';">
      <mat-card-actions align="end">
        <button mat-raised-button color="primary"
          (click)="copyWerbedataForEdit(werbedata.FILIALE + werbedata.WERBE_NR)">
          <mat-icon>keyboard_backspace</mat-icon>
        </button>
      </mat-card-actions>
    </mat-card>
  </div>

  <div class="column-left" *ngIf="copy && newWerbedata">
    <div fxLayout="row" fxLayout.xs="column">
      <div fxFlex="50%" fxLayout="row" fxLayoutWrap fxLayoutAlign="start space-between">
        <h2 class="edit-werbedata">Werbedata bearbeiten</h2>
      </div>
      <div fxFlex="50%" fxLayout="row" fxLayoutWrap fxLayoutAlign="end space-between">
        <span> {{ data.week }}/{{ data.year }} | Seite: {{ data.page }} | Position: {{ data.emptyPosition }} </span>
      </div>
    </div>
    <!-- <h2 mat-dialog-title>Werbedata bearbeiten</h2> -->
    <mat-form-field class="example-container">
      <mat-label>Artikelnummer</mat-label>
      <input matInput placeholder="Artikelnummer" [(ngModel)]="newWerbedata.ArtNr" readonly>
    </mat-form-field>
    <mat-form-field class="example-container">
      <mat-label>Werbenummer</mat-label>
      <input matInput placeholder="Werbenummer" [(ngModel)]="newWerbedata.WERBE_NR" readonly>
    </mat-form-field>
    <mat-form-field class="example-container">
      <mat-label>Werbetext</mat-label>
      <input matInput placeholder="Werbetext" [(ngModel)]="newWerbedata.Werbetext" readonly>
    </mat-form-field>
    <mat-form-field class="example-container">
      <mat-label>Produktbezeichnung</mat-label>
      <input matInput placeholder="Produktbezeichnung" [(ngModel)]="newWerbedata.Produktbez" readonly>
    </mat-form-field>
    <mat-form-field class="example-container">
      <mat-label>M-GEHT</mat-label>
      <input matInput placeholder="M-Geht." [(ngModel)]="newWerbedata.MGEHT" readonly>
    </mat-form-field>

    <div fxLayout="row" fxLayout.xs="column">
      <mat-card class="history-card" fxLayout="column" fxFlex="80%;" fxFlex.xs="80%">
        <table>
          <tr>
            <th> Jahr </th>
            <th> KW </th>
            <th> Seite </th>
            <th> Euro VK </th>
            <th> Eur VK Einheit </th>
            <th> Übernehmen </th>
          </tr>
          <tr *ngFor="let hist of history; let i = index">
            <td> {{ hist.Historie.slice(0,4) }} </td>
            <td> {{ hist.Historie.slice(4) }} </td>
            <td> {{ hist.Seite }} </td>
            <td> {{ hist.EUR_VK }} </td>
            <td> {{ hist.VK_Einheit }} </td>
            <td>
              <button mat-icon-button color="primary" align="center"
                (click)="copyHistoryValues(i, hist.EUR_VK, hist.EUR_VK_Einheit, hist.VK_Einheit)">
                <mat-icon>arrow_forward</mat-icon>
              </button>
            </td>
          </tr>
        </table>
      </mat-card>
      <!-- <div fxFlex="40%;" fxFlex.xs="80%"> -->
      <mat-card class="price-card" fxFlex="30%;" fxFlex.xs="80%">
        <mat-form-field class="price-container" appearance="outline">
          <mat-label>Euro-Vk</mat-label>
          <input matInput placeholder="Euro-Vk" [(ngModel)]="a">
        </mat-form-field>
        <mat-form-field class="price-container" appearance="outline">
          <mat-label>Vk-Einheit</mat-label>
          <input matInput placeholder="Vk-Einheit" [(ngModel)]="c" matInput [formControl]="myControl"
            [matAutocomplete]="auto">
          <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let option of options" [value]="option">
              {{ option }}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
        <mat-form-field class="price-container" appearance="outline">
          <mat-label>Euro-Vk-Einheit</mat-label>
          <input matInput placeholder="Euro-Vk-Einheit" [(ngModel)]="b">
        </mat-form-field>
      </mat-card>
      <!-- </div> -->
    </div>
    <mat-card-actions align="end">
      <button mat-raised-button color="warn" (click)="searchWerbedataAgain()">
        {{ 'Abbrechen' }}
        <mat-icon>cancel</mat-icon>
      </button>
      <button mat-raised-button [color]="'success'"
        (click)="createHistory(newWerbedata, a, b, c, index); addThisWeredataToEmptyFlyer(newWerbedata, a, b, c)">
        {{ 'Speichern' }}
        <mat-icon>cancel</mat-icon>
      </button>
    </mat-card-actions>
  </div>
</div>

dialogBox.css

.column-left {
  float: left;
  width: 45%;
  position: fixed;
}
.column-right {
  float: right;
  width: 30%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

.example-container {
  display: flex;
  flex-direction: column;
}

.example-container > * {
  width: 100%;
}

.example-container form {
  margin-bottom: 0px;
}

.example-container form > * {
  margin: 10px 0;
}

.example-container .mat-radio-button {
  margin: 0 12px;
}

.price-container {
  display: flex;
  flex-direction: row;
}

.price-container > * {
  width: 100%;
}

.price-container form {
  margin-bottom: 20px;
}

.price-container form > * {
  margin: 5px 0;
}

img {
  height: 200px;
  width: 100px;
}

mat-card {
  margin-bottom: 5px;
}

.price-card {
  width: 100%;
  height: 300px;
  overflow: auto;
} 

.history-card {
  width: 300px;
  height: 300px;  
  overflow: auto;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

tr:hover {
  background-color: rgba(0, 0, 0, 0.04);
  cursor: pointer;
}

th {
  line-height: 2.0;
  padding: 8px;
  text-align: left;
  font-family: 'Arial';
}

td {
  text-align: left;
  padding: 8px;
  line-height: 2.0;
  border-top: 1px solid #ddd;
  font-family: 'Arial';
}

::-webkit-scrollbar {
  display: none;
}

.edit-werbedata {
  margin-bottom: 10px;
}