Ion-content adjust the screen resolution Ionic 4

@dedemiza wrote:

I would like my ion-content adjusted to the size of the screen. In this case, fill in and do not leave that void at the bottom.

njSkZ.png287×532 14.4 KB

Example with a large resolution:

Hence if the height of the screen is smaller, it causes to do scroll, getting that part white, because the bottom does not fill when it does screen scroll

<ion-content >
<ion-grid class="teste">

<ion-item class="a">  
  <ion-label class="flNome" position="floating">NOME</ion-label>
  <ion-input name="title" [(ngModel)]="title" class="nome" type="text" ></ion-input>
</ion-item>



<ion-item class="c">
    <ion-label class="flNome" position="floating">LOCAL DO EVENTO</ion-label>
    <ion-input size="30px" name="evento" [(ngModel)]="evento" class="evento" type="text" ></ion-input>
  </ion-item>


   <ion-item class="d"> 
      <ion-label class="flNome" position="floating">QUAL A SUA FESTA?</ion-label>
    <ion-select name="select" [(ngModel)]="select" okText="Okay" cancelText="Dismiss">
      <ion-select-option value="casamento">CASAMENTO</ion-select-option>
      <ion-select-option value="fifiteenAnos">15 ANOS</ion-select-option>
      <ion-select-option value="formatura">FORMATURA</ion-select-option>
      <ion-select-option value="empresarial">EMPRESARIAL</ion-select-option>
    </ion-select>
  </ion-item>
  <ion-item class="e">
      <ion-label class="flNome" position="floating">CONVIDADOS</ion-label>
      <ion-input  name="conv" [(ngModel)]="conv" class="convidados" type="text" ></ion-input>
    </ion-item>

    <ion-item class="f">
        <ion-label class="flNome" >DATA</ion-label>
        <ion-input  name="date" [(ngModel)]="date" class="data" type="date" ></ion-input>
      </ion-item>

      <ion-item class="g">
          <ion-label class="flNome" position="floating">TELEFONE</ion-label>
          <ion-input  name="tel" [(ngModel)]="tel" class="telefone" type="tel" ></ion-input>
        </ion-item>

        <ion-item class="h">
            <ion-label class="flNome" position="floating">CELULAR</ion-label>
            <ion-input  name="cel" [(ngModel)]="cel" class="celular" type="cel" ></ion-input>
          </ion-item>

          <ion-item class="i"> 
            <ion-textarea  name="desc" [(ngModel)]="desc" class="desc" maxLength="500" placeholder="ESCREVA MAIS DETALHES (TEMA DA FESTA, CORES)"></ion-textarea>
         </ion-item>

         <ion-button fill="solid" expand="block" class="btn"  (click)="sendEmail()">ENVIAR</ion-button>

    </ion-grid>
</ion-content>

.title{ 

  margin-right:10%; 
  }

 .header {
    --background : rgba(248, 248, 248, 0.5);
}

.teste{
  // --background: url('/assets/images/fundo.png') no-repeat center ;
position:absolute;
    top:0;
    left:0;
    z-index:11;
    background-color: goldenrod;
    width:100%;
    height:100%;
}
   .nome,.evento,.select,.convidados,.data,.telefone,.celular
,.desc{
    font-size: 20px;
    color: rgb(32, 79, 207);
    font-weight: bold;
}   
.a,.b,.c,.d,.e,.f,.g,.h,.i{
    opacity: 0.5;
    border: 2px solid #ffffff;

}

Posts: 1

Participants: 1

Read full topic