I am using two ngx-bootstrap datepickers side by side in an Angular 8 project. In mobile view, both the datepickers are going out of the viewport as shown below. What do I do to position both the datepickers in the centre of the mobile screen?I am getting this output
But I need this output for both the datepickers. I can achieve this output if I put left: 23% as already position: absolute is assigned for the datepicker. But It changes the position of both the datepickers. I want both the datepickers to be placed in the centre of the screen. These are the styles that are already present in the datepicker by default: display: block; position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(-42px, 149px, 0px); z-index: 1080;
In styles.css, put these styles...
bs-datepicker-container{ transform: scale(1,1) !important; top: 118px !important; left: 0 !important; right: 0 !important; width: fit-content !important; margin-left: auto !important; margin-right: auto !important; }
In place of the top: 118px !important, put your position accordingly.
