in angular 13 all day buttons are in a line
OmidMsl opened this issue · 1 comments
OmidMsl commented
in angular 13 days are not in the table form and user can only select days from first week of month.
all day numbers are putted in a line beyond the page.
i tried version 4.0.1, 4.0.0 and 3.0.2. same problem in all of them.
this is the generated html that i get from browser:
<div _ngcontent-vgw-c154="" class="days-container horizontal-padding">
<div _ngcontent-vgw-c154="" class="content-container week-days">
<div _ngcontent-vgw-c154="" class="day-col"><span _ngcontent-vgw-c154="">ش</span></div>
<div _ngcontent-vgw-c154="" class="day-col"><span _ngcontent-vgw-c154="">ی</span></div>
<div _ngcontent-vgw-c154="" class="day-col"><span _ngcontent-vgw-c154="">د</span></div>
<div _ngcontent-vgw-c154="" class="day-col"><span _ngcontent-vgw-c154="">س</span></div>
<div _ngcontent-vgw-c154="" class="day-col"><span _ngcontent-vgw-c154="">چ</span></div>
<div _ngcontent-vgw-c154="" class="day-col"><span _ngcontent-vgw-c154="">پ</span></div>
<div _ngcontent-vgw-c154="" class="day-col"><span _ngcontent-vgw-c154="">ج</span></div>
<!--bindings={
"ng-reflect-ng-for-of": "ش,ی,د,س,چ,پ,ج"
}-->
</div>
<div _ngcontent-vgw-c154="" class="content-container month-days">
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn other-month"><span _ngcontent-vgw-c154="">28</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn other-month"><span _ngcontent-vgw-c154="">29</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">1</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">2</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">3</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">4</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">5</span></div>
</div>
<!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
<!--ng-container-->
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">6</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">7</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">8</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">9</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">10</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">11</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">12</span></div>
</div>
<!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
<!--ng-container-->
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn today selected"><span _ngcontent-vgw-c154="">13</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">14</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">15</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">16</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">17</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">18</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">19</span></div>
</div>
<!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
<!--ng-container-->
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">20</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">21</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">22</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">23</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">24</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">25</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">26</span></div>
</div>
<!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
<!--ng-container-->
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">27</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">28</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">29</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">30</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn"><span _ngcontent-vgw-c154="">31</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn other-month"><span _ngcontent-vgw-c154="">1</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn other-month"><span _ngcontent-vgw-c154="">2</span></div>
</div>
<!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
<!--ng-container-->
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn other-month"><span _ngcontent-vgw-c154="">3</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn other-month"><span _ngcontent-vgw-c154="">4</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn other-month"><span _ngcontent-vgw-c154="">5</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn other-month"><span _ngcontent-vgw-c154="">6</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn other-month"><span _ngcontent-vgw-c154="">7</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn other-month"><span _ngcontent-vgw-c154="">8</span></div>
</div>
<div _ngcontent-vgw-c154="" class="day-col">
<div _ngcontent-vgw-c154="" class="dp-btn other-month"><span _ngcontent-vgw-c154="">9</span></div>
</div>
<!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
<!--ng-container-->
<!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
</div>
</div>
i tested chrome, firefox and firefox android. same issue
SaeedDev94 commented
You should check the global styles that causing this issue
OR if you think this is package issue reproduce it with https://stackblitz.com/