My jquery datepicker is set up to display color dots above certain days to represent information for that day.
I'm running into some CSS issues.
I'm trying to center the dots with the corresponding numbers, but when I do that, the days with dots don't align horizontally with the other days. I've included a photo to illustrate the problem. The days 22, 23, 24, 28, 29, 16, 17 with dots are not aligning with the rest of the days.
Any suggestions on how to properly align the days with dots?
https://i.sstatic.net/00fB8.jpg
<td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2020"><a class="ui-state-default" href="#">27</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2020"><a class="ui-state-default" href="#">28</a>
<div class="dot-container">
<div class="dot orange"></div>
<div class="dot black"></div>
<div class="dot red"></div>
<div class="dot blue"></div>
</div>
</td>
<td class=" " data-handler="selectDay" data-event="click" data-month="3" data-year="2020"><a class="ui-state-default" href="#">29</a>
<div class="dot-container">
<div class="dot black"></div>
<div class="dot orange"></div>
<div class="dot yellow"></div>
<div class="dot red"></div>
</div>
</td>
.ui-state-default{
text-align:center !important;
}
.dot-container {
text-align: center;
}
.dot{
width: 7px !important;
height: 7px !important;
border-radius: 50%;
display: inline-block;
margin-right: 2px;
}
@media (max-width: 450px) {
.dot{
width: 5px !important;
height: 5px !important;
border-radius: 50%;
display: inline-block;
margin-right: 2px;
}
}
.red{
background-color: red !important;
}
.blue{
background-color: blue !important;
}
.yellow{
background-color: yellow !important;
}
.green{
background-color: green !important;
}
.black{background-color: black !important;}
.orange{background-color: orange !important;}
.ui-datepicker .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: none !important;
background-color: #fff !important;
padding: 10px 0 !important;
max-width: 40px;
max-height: 40px;
margin: 10px 0 !important;
margin-top: 10px !important;
margin-left: 0px !important;
margin-right: 0px !important;
margin-bottom: 2px !important;
}
I attempted to add the attribute position: absolute to the dot-container class, but this caused all the day numbers to align differently.