Bootstrap inline calendar css

Questions
1

Hi,

I’m struggling with the css for the Bootstrap inline calendar. The calendar is for a touchscreen and I have changed the font size to 48px which works fine. What I am struggling with is changing the size of the rows, they overlap each other. Any help greatly appreciated.

CleanShot 2025-10-28 at 16.01.33@2x
CleanShot 2025-10-28 at 16.01.33@2x1920×1482 184 KB

TIA

Richard

2

Hi Richard,

You should be able to write a custom CSS class for this and set the height of the tr tags.

Below is a simple class I wrote to increase the row height.

.my-calendar-class {
	tr {
		height: 100px;
	}
}

Hope this helps! :slight_smile:

Alex.

3

Hi Alex,

Have added that to the less file for the form, set the styleClass to my-calendar-class, but the row height doesn’t change.

I’m beginning to think that there is something stopping the calendar from increasing in height. You can happily increase the width on the form, but the height reaches a point and won’t increase past that point.

Richard

4

Hi Richard,

Seems like some other class maybe overriding it or the class isn’t applying. Can you see anything inspecting the elements from browser developer tools? If you set the height directly on the tr element via browser tools, does it apply?

Cheers,

Alex.

5

Hi Alex,

I think the problem is that the control gets to a point where it doesn’t resize automatically. Changing the width of the browser the datepicker resizes, changing the height it doesn’t resize at all. If I don’t go above a font size of 26px the rows don’t overlap. Will try on a touchscreen tomorrow to see if 26px is bog enough.

Richard

6

It feels like it should be solvable through CSS and Media Queries.

Feel free to share a video if you’d like, I’d be interested to see the exact behaviour you’re experiencing.