What is a promise in Javascript?

Question

Caruso

Asked: 2022-07-02 02:30:47 +0800 CST 2022-07-02 02:30:47 +0800 CST 2022-07-02 02:30:47 +0800 CST

Why do my components narrow in Angular Material

772

I have the following code in my .html file of my sale component:

<div>
<mat-card class="mat-elevation-z0">
    <div style="text-align:center;">
        <mat-card-title>Nueva Venta</mat-card-title>
    </div>
    <mat-card-content>
      <mat-label class="title"> Fecha/Hora:        {{ jstoday }}</mat-label>
      <br>
      <form [formGroup]="ventaForm">
        <div class="container" fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="20px" >
          <ng-template matStepLabel>Condicion de Venta</ng-template>
          <mat-form-field appearance="fill" fxFlex="25">
          <mat-label>Condicion.:</mat-label>
          <mat-select #condVenta placeholder="Condicion de Venta"  formControlName="condicionVenta" (selectionChange)="selectCV($event.value)" cdkFocusInitial>
            <mat-option value=undefined>Seleccione</mat-option>
            <mat-option value=1>Contado</mat-option>
            <mat-option value=2>Cuenta Corriente</mat-option>
          </mat-select>
          </mat-form-field>
            <span class="fill-space"></span>
          <mat-form-field appearance="fill" class="example-full-width" fxFlex="75" >
          <mat-label>Cliente</mat-label>
          <input matInput #icliente
                 aria-label="Cliente"
                 [matAutocomplete]="auto"
                 [formControl]="clienteCtrl"
                 formControlName="nombre_cliente">
          <mat-autocomplete #auto="matAutocomplete"  >
                <ng-container *ngFor="let c of filteredClientes | async" >
                <mat-option id="c.idcliente" *ngIf="c.nombre_cliente=='CONSUMIDOR FINAL'" [value]="c.nombre_cliente" (onSelectionChange)="selectC(c)">

                  <span>{{c.nombre_cliente}}</span> 
                
                </mat-option>
                <mat-option *ngIf="c.nombre_cliente!=='CONSUMIDOR FINAL'" [value]="c.nombre_cliente + '  CUIT: '+  c.CUIT" (onSelectionChange)="selectC(c)">

                  <span>{{c.nombre_cliente}}</span> |
                  <small>CUIT.: {{c.CUIT}}</small>

                </mat-option>
              </ng-container>
              </mat-autocomplete>
            </mat-form-field>
          <br>
     
            
          <table mat-table tabindex="4" #table [dataSource]="carritoDataSource$" class="mat-el" class="mat-elevation-z1" matSort class="mat-elevation-z8" matSortActive="nombreProducto" matSortDirection="asc" matSortDisableClear>
              
                  <caption style="font-size: 20px;height: 4vh;border: 10px; color: rgb(54, 11, 211);"> DETALLE </caption>
              
                  <ng-container matColumnDef="nombreProducto">
              
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Descripcion</th>
                    <td mat-cell *matCellDef="let element">{{element.NombreProducto}}</td>
              
                  </ng-container>
              
                  <ng-container matColumnDef="precio">
              
                    <th mat-header-cell *matHeaderCellDef>Precio</th>
                    <td mat-cell *matCellDef="let element">{{element.precio | currency:'$'}}</td>
              
                  </ng-container>
                  <ng-container matColumnDef="categoria">
              
                    <th mat-header-cell *matHeaderCellDef>Categoria</th>
                    <td mat-cell *matCellDef="let element">{{element.nombre_categoria}}</td>
              
                  </ng-container>
                  <ng-container matColumnDef="subcategoria">
              
                    <th mat-header-cell *matHeaderCellDef>Subcategoria</th>
                    <td mat-cell *matCellDef="let element">{{element.nombre_subcategoria}}</td>
              
                  </ng-container>
                  <ng-container matColumnDef="marca">
              
                    <th mat-header-cell *matHeaderCellDef>Marca</th>
                    <td mat-cell *matCellDef="let element">{{element.nombre_marca}}</td>
              
                  </ng-container>
                  <ng-container matColumnDef="stock">
              
                    <th mat-header-cell *matHeaderCellDef>Stock</th>
                    <td mat-cell *matCellDef="let element">{{element.stock}}</td>
              
                  </ng-container>
                  <ng-container matColumnDef="actions">
              
                    <th mat-header-cell *matHeaderCellDef>Acciones</th>
                    <td mat-cell *matCellDef="let element">
              
                      <button mat-raised-button color="basic">Editar</button> |
                      <!-- <button (click)="delete(element)" mat-raised-button color="warn">Eliminar</button>-->
                    </td>
              
              
                  </ng-container>
                  <tr mat-header-row *matHeaderRowDef="columnas"></tr>
                  <tr mat-row *matRowDef="let row; columns:columnas"></tr>
              
                </table>
                <mat-paginator #productsPaginator [pageSizeOptions]="[50, 100,200]" showFirstLastButtons aria-label="Seleccionar pagina">
                </mat-paginator>
          
            </div>
          </form>
     
      </mat-card-content>
 </mat-card>

</div>

But I don't understand why it appears as in the image:

The idea is that the sale condition select occupies 25% of the line or row and the rest of the space (75%) is occupied by the Customer name input, for example.

1 Answers

Voted

nestdan · Answer 1 · 2022-07-02T06:38:13+08:00

There is a problem with the fxLayoutGap directive, which is the one that defines the space between the flex items inside the container since it adds margin-right or margin-bottom and could conflict with Default value nowrap. In order to control that the flex items remain in a same line or flow in several we must use warp and calc if not! we want to force with a css configuration that produces unexpected effects by not properly taking into account the effect of fxLayoutGap For this: You have to calculate the size of the flexible elements to be able to use row warp!! considering the size fxLayoutGap so that the items are displayed as we want warp allows the elements to flow in several lines Also, if we leave the table outside the container, it happens that: As I told you, the view shows a select of sale condition occupying 25% of the line or row and the rest of the space (75%) is occupied by the Customer name input if the table does not belong to the container and the result is shown in the browser in the photo. The code that I copied as an answer can also be seen on github which contains fxLayout="column " fxLayout.gt-xs="row warp" fxLayoutGap="20px" and the way to calculate with calc since it shows how to have control over the flex elements path card github code

The code shows that you have to use fxLayout.gt-xs="row warp " for a fxLayoutGap="20px" when adding a title and two cards inside the container without affecting the select and the input which occupy the required dimension calculated with calc

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
export interface Cliente {
  name: string;
  precio: number;
  
}
const Client_DATA: Cliente[] = [
  { name: 'Berta', precio: 1.0079},
  { name: 'Omar',precio: 4.0026}
  
];


@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css']
})

export class CardComponent implements OnInit {
  displayedColumns: string[] = [ 'name', 'precio'];
  dataSource = Client_DATA;
  myControl = new FormControl();
  myTable = new FormControl();
  options: string[] = ['Berta', 'Omar', 'Ulises'];
  constructor() { }

  ngOnInit(): void {
  }

}

      .container{
        width: 100%;
      }

<mat-card class="mat-elevation-z0"> 
<div style="text-align:center;">
  <mat-card-title>Con Nueva Venta Tabla fuera de Container usando row warp y calc</mat-card-title>
</div>
<mat-card-content> 
<form>
<div class="container" fxLayout="column  " fxLayout.gt-xs="row warp " fxLayoutGap="20px"  >
    <ng-template matStepLabel>Condicion de Venta</ng-template>

    <mat-form-field appearance="fill" fxFlex="calc(25%-20px)">
      <mat-label>Condicion.:</mat-label>
      <mat-select placeholder="Condicion de Venta"  cdkFocusInitial>
        <mat-option value=undefined>Seleccione</mat-option>
        <mat-option value=1>Contado</mat-option>
        <mat-option value=2>Cuenta Corriente</mat-option>
      </mat-select>

    </mat-form-field>
 

    <mat-form-field appearance="fill" fxFlex="calc(75%-20px)" >
      <input type="text"
           placeholder="Pick one"
           aria-label="Number"
           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>
  <div fxFlex="calc(100%-20px)">Utilizando row warp y calc se agregan dos Card </div>
  <mat-card class="child-1" fxFlex="calc(25%-20px)">1. One</mat-card> 
  <mat-card class="child-2" fxFlex="calc(75%-20px)">1. Two</mat-card> 
</div>

<br>



<table mat-table [dataSource]="dataSource" class="mat-elevation-z1" >
  <caption style="font-size: 20px;height: 4vh;border: 10px; color: rgb(54, 11, 211);"> DETALLE </caption>
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>
  <ng-container matColumnDef="precio">
    <th mat-header-cell *matHeaderCellDef> Precio. </th>
    <td mat-cell *matCellDef="let element"> {{element.precio}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>


</form>
</mat-card-content> 

</mat-card>

So we add elements to the container since we must consider the size of fxLayoutGap

so that the elements line up according to how we want with calc while warp allows the elements to flow in multiple lines*

Finally table inside the container:

<mat-card class="mat-elevation-z0"> 
<div style="text-align:center;">
  <mat-card-title>Con Nueva Venta Tabla Dentro del Container usando row warp y calc</mat-card-title>
</div>
<mat-card-content> 
<form>
<div class="container" fxLayout="column  " fxLayout.gt-xs="row warp " fxLayoutGap="20px"  >
    <ng-template matStepLabel>Condicion de Venta</ng-template>

    <mat-form-field appearance="fill" fxFlex="calc(25%-20px)">
      <mat-label>Condicion.:</mat-label>
      <mat-select placeholder="Condicion de Venta"  cdkFocusInitial>
        <mat-option value=undefined>Seleccione</mat-option>
        <mat-option value=1>Contado</mat-option>
        <mat-option value=2>Cuenta Corriente</mat-option>
      </mat-select>

    </mat-form-field>
 

    <mat-form-field appearance="fill" fxFlex="calc(75%-20px)" >
      <input type="text"
           placeholder="Pick one"
           aria-label="Number"
           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>
  <div fxFlex="calc(100%-20px)">Utilizando row warp y calc se agregan dos Card </div>
  <mat-card class="child-1" fxFlex="calc(25%-20px)">1. One</mat-card> 
  <mat-card class="child-2" fxFlex="calc(75%-20px)">1. Two</mat-card> 


<div fxFlex="calc(50%-20px)">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z1" >
  <caption style="font-size: 20px;height: 4vh;border: 10px; color: rgb(54, 11, 211);"> DETALLE </caption>
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>
  <ng-container matColumnDef="precio">
    <th mat-header-cell *matHeaderCellDef> Precio. </th>
    <td mat-cell *matCellDef="let element"> {{element.precio}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>


</div>


</form>
</mat-card-content> 

</mat-card>

will show in the browser -->

Why do my components narrow in Angular Material

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?