Tengo un problema en el que mi selector de fecha ng- datepicker tiene un estilo incorrecto. Por favor vea la siguiente imagen:
Parece que se está aplicando un gran margen al lado derecho de cada una de las class="ngb-dp-day" donde el tamaño resultante no es correcto y, por lo tanto, cada columna de días se apila verticalmente una encima de la otra.
Revisé el árbol de elementos y parece que no puedo encontrar ninguna clase que pueda recibir estilos con fugas de otros elementos.
Cualquiera de los tres métodos ViewEncapsulation ( None , Native o Emulated ) también marca la diferencia. Mismo apilamiento vertical.
Estoy representando el selector de fecha dentro de un cuerpo modal ng-bootstrap . html a continuación:
<ng-template #content let-c="close" let-d="dismiss"> <div class="modal-header"> ... </div> <div class="modal-body"> <ngb-datepicker #dp [(ngModel)]="model.dateStruct" (navigate)="date = $event.next"></ngb-datepicker> </div> <div class="modal-footer"> ... </div> </ng-template>¿Alguna información más que pueda proporcionar?
Es un poco difícil aislar el problema solo con eso, diría que envolver cada día en un elemento div que está configurado para display: block , es lo que está causando el apilamiento vertical.
Podrías probar cualquiera de los enfoques:
.ngb-dp-day para display: flex; & flex-flow: row wrap;O
div.ngb-dp-day para display: inline-block; o float: left;