I am using a Bootstrap datepicker and I changed its size as it was far too small. I used the following css:
.ui-datepicker.ui-widget.ui-widget-content{
font-size: 45px !important;
max-height: fit-content !important;
}
However, now the arrows to change the month are far too small compared to everything else of the widget.
My problem is that I do not manage to change the size. I tried changing the width
and height
of ui-icon
as follows.
.ui-icon{
width: 32px //double than before
height: 32px //double than before
}
but it just shows more icons:
Surprisingly, I was not able to find any similar topic.
Any help?
This widget seems to use all icons as a css sprite (link here: https://code.jquery.com/ui/1.12.1/themes/base/images/ui-icons_444444_256x240.png ) - so all icons are placed in one large image grid and icon is determined by background-position
property, which only shows a clipped icon that is required. Changing font-size
, background-size
won't help. You'd need to use little math and with each width
/ height
change recalculate the scaled coordinates of the sprited icon (correct background-size
and background-position
to fit the icon precisely. That's imho a waste of time and I'd use some different icon, either an image, or background image or a font icon
I think here 'font-size' problem. Check the arrows font size from inspect mode and Increse the font size.
If the arrow is an image then you can set the width of the image higher.
.ui-datepicker.ui-widget.ui-widget-content img{
width: suitable width;
}
Hope that helps you answer your query
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.