2

El modal lo hago con mdbootstrap.

Mi Html:

<!-- crear -->
<button class="btn btn-primary waves-light" (click)="crearAbrir2()" mdbWavesEffect>
  <span class="fa fa-plus d-inline-block"></span> 
  <span class="d-none d-md-inline-block d-lg-inline-block d-xl-inline-block">&nbsp;Registrar</span>
</button>

<div mdbModal #crearAbrir1="mdbModal"
class="modal fade
            col-12
offset-sm-3 col-sm-6
offset-md-3 col-md-6
offset-lg-4 col-lg-4
offset-xl-4 col-xl-4
" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true" (onShown)="crearOnShown($event)">
  <div class="modal-dialog modal-notify modal-info" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title w-100" id="myBasicModalLabel">
              <span class="d-inline-block">&nbsp;Registrar</span>
            </h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="crearAbrir1.hide()">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <form [formGroup]="crearForm" (ngSubmit)="crearSubmit()">
            <div class="modal-body">
              <div class="md-form">
                <input mdbInputDirective type="text" formControlName="nombre" class="form-control" [ngClass]="{ 'is-invalid': crearSubmitted && crearF.nombre.errors }" [mdbValidate]="false"/>
                <label for="nombre">Nombre</label>
                <div *ngIf="crearSubmitted && crearF.nombre.errors" class="invalid-feedback">
                  <div *ngIf="crearF.nombre.errors.required">Requerido</div>
                  <div *ngIf="crearF.nombre.errors.minlength">Mínimo 4 caracteres</div>
                </div>
              </div>
              <div class="md-form">
                <input mdbInputDirective type="number" formControlName="precio" class="form-control" [ngClass]="{ 'is-invalid': crearSubmitted && crearF.precio.errors }" [mdbValidate]="false"/>
                <label for="precio">Precio</label>
                <div *ngIf="crearSubmitted && crearF.precio.errors" class="invalid-feedback">
                  <div *ngIf="crearF.precio.errors.required">Requerido</div>
                  <div *ngIf="crearF.precio.errors.min">Mínimo 1</div>
                  <div *ngIf="crearF.precio.errors.max">Máximo 1000</div>
                </div>
              </div>
              <div class="form-group text-center">
                <label for="medidas">Medidas</label>
              </div>
              <!-- Grid row -->
              <div class="row">
                  <!-- Grid column -->
                  <div class="col">
                      <!-- Material input -->
                      <div class="md-form">
                          <input mdbInputDirective type="number" formControlName="alto" class="form-control" [ngClass]="{ 'is-invalid': crearSubmitted && crearF.alto.errors }" [mdbValidate]="false"/>
                          <label for="alto">Alto</label>
                          <div *ngIf="crearSubmitted && crearF.alto.errors" class="invalid-feedback">
                            <div *ngIf="crearF.alto.errors.required">Requerido</div>
                            <div *ngIf="crearF.alto.errors.min">Mínimo 1</div>
                            <div *ngIf="crearF.alto.errors.max">Máximo 1000</div>
                          </div>
                      </div>
                  </div>
                  <!-- Grid column -->

                  <!-- Grid column -->
                  <div class="col">
                      <!-- Material input -->
                      <div class="md-form">
                          <input mdbInputDirective type="number" formControlName="ancho" class="form-control" [ngClass]="{ 'is-invalid': crearSubmitted && crearF.ancho.errors }" [mdbValidate]="false"/>
                          <label for="ancho">Ancho</label>
                          <div *ngIf="crearSubmitted && crearF.ancho.errors" class="invalid-feedback">
                            <div *ngIf="crearF.ancho.errors.required">Requerido</div>
                            <div *ngIf="crearF.ancho.errors.min">Mínimo 1</div>
                            <div *ngIf="crearF.ancho.errors.max">Máximo 1000</div>
                          </div>
                      </div>
                  </div>
                  <!-- Grid column -->
              </div>
              <!-- Grid row -->
              <div class="md-form">
                <textarea mdbInputDirective type="text" formControlName="descrip" class="md-textarea form-control" [ngClass]="{ 'is-invalid': crearSubmitted && crearF.descrip.errors }" [mdbValidate]="false"></textarea>
                <label for="descrip">Descripción</label>
                <div *ngIf="crearSubmitted && crearF.descrip.errors" class="invalid-feedback">
                  <div *ngIf="crearF.descrip.errors.required">Requerido</div>
                  <div *ngIf="crearF.descrip.errors.maxlength">Máximo 255 caracteres</div>
                </div>
              </div>
            </div> 
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary btn-sm waves-light" data-dismiss="modal" (click)="crearAbrir1.hide()" mdbWavesEffect>
                <span class="fa fa-times d-inline-block"></span> 
                <span class="d-none d-md-inline-block d-lg-inline-block d-xl-inline-block">&nbsp;Cerrar</span>
              </button>
              <button type="button" [disabled]="loading" class="btn btn-primary btn-sm waves-light" (click)="crearSubmit()" mdbWavesEffect>
                <span class="fa fa-save d-inline-block"></span> 
                <span class="d-none d-md-inline-block d-lg-inline-block d-xl-inline-block">&nbsp;Guardar</span>
              </button>
            </div>
          </form>
        </div>
    </div>
</div>

Y lo llamo desde Angular:

@ViewChild('crearAbrir1') crearAbrir1: ModalDirective;
crearAbrir2() {
  this.crearAbrir1.show();
}

El Modal es mas grande que la resolución pero el scroll se mantiene al fondo. introducir la descripción de la imagen aquí

1 respuesta 1

2

Ojeando la documentación de la librería que estas utilizando me he percatado de que la propia librería ya ofrece una solución para el problema que estás planteando.

Para conseguirlo debes añadir style="overflow-y: auto" al div con la directiva mdbModal.

Échale un vistazo a al ejemplo que ofrece en su documentación > #scrolling-long-content

Alternativas más visuales

Puedes aplicar la propiedad css overflow overflow:auto a cualquier elemento de tu ventana modal.

Esto sería un ejemplo aplicado al cuerpo de la ventana modal las siguientes propiedades.

max-height: 300px;
overflow-y: auto;

Ilustración de ejemplo

También comparto contigo un ejemplo CSS sobre "cómo ocultar el segundo scrollbar" manteniendo su funcionalidad.

fiddle

3
  • Ya había conseguido esa opción, pero no se porque razón me aparece el scroll al lado del modal, creí que no era la manera correcta de hacerlo. Demostración.
    – bypabloc_
    Commented el 6 oct. 2018 a las 17:35
  • Si deseas algo más visual, debes personalizarlo tu mismo, actualizo la respuesta con un par de ejemplo que podrías aplicar =) Commented el 6 oct. 2018 a las 18:14
  • Gracias hermano
    – bypabloc_
    Commented el 6 oct. 2018 a las 18:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.