Date Range Picker Position WRONG

Question

I am trying to call mat date-range-picker calendar inside a component , that means supposedly i have one component menu, calling component leave from menu component,and in menu component i have mat date range picker calendar. now the position of calendar,when i call leave component must be after the menu component, as that is how i written in my HTML code. but calendar is showing on top left. please do help. I tried adding this to css file. But didnt work for me.

@import '../../../../../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css';

         <div class ="calendar">
         <mat-date-range-input [rangePicker]="picker" 
         style="display:none">
         <input matStartDate matInput placeholder="Start date"/>
         <input matEndDate matInput placeholder="End date"/>
          </mat-date-range-input>
           <mat-date-range-picker  #picker  [opened]="true" 
           (closed)="openCalendar(picker)">
             </mat-date-range-picker>
           </div>

Please @Shruti Jain, can you place a piece of code. It's difficult to give some help if you don't share your code... — Roberto C. Rodriguez-Hidalgo, Apr 06 '21 at 04:02
HI, I have added the code which i used in leave component , which is inside the menu component . So basically the hierarchy c app->menu->leave — Shruti Jain, Apr 06 '21 at 04:21

score 0 · Accepted Answer · answered Apr 06 '21 at 04:53

0

Try dropping the style="display:none" from mat-date-range-input element. It's the only strange thing I see in your code. If it doesn't work you could try to clean your css file and building it again. It could be inheriting the position from another higher level css.

answered Apr 06 '21 at 04:53

Roberto C. Rodriguez-Hidalgo

607
9
18

Thanks , Roberto yes,it solved half of the problem, now my calendar is not scrolling with the page, but it is not at correct position yet. – Shruti Jain Apr 06 '21 at 05:03
Try to drop out the line you added to your css. I mean this one: `@import '../../../../../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css';` – Roberto C. Rodriguez-Hidalgo Apr 06 '21 at 05:08
https://angular-ivy-qfsvyu.stackblitz.io , Please do check @Roberto – Shruti Jain Apr 08 '21 at 05:12
What i want to do is to always open picker but once i click again on leave button, closes the picker. but picker stays open at that time also – Shruti Jain Apr 08 '21 at 05:14

Date Range Picker Position WRONG

1 Answers1