0

I'm using the plugin react-datepicker in a project together with Bootstrap 3.

The datepicker is smaller on my site than on the demos provided with the plugin. It just seems to be shrunken. The width/height is computed on runtime according as far as I can tell. The small computed size happens because of Bootstrap. When I remove the BS .css file, the size is OK.

  • Why is this?
  • How can I fix it?
  • Recommendation for a more customizable datepicker plugin?
olefrank
  • 6,452
  • 14
  • 65
  • 90

2 Answers2

0

I saw that plugin.

The easiest approach I see to solve this is to give the height and width inline to it.

None of its classes matches to bootstrap so its because of the size of the div its included within that it happens to be shrunken.

So simply give add style="height:200px; width:150px; to it and it will work.

(Tested)

Tirthraj Barot
  • 2,671
  • 2
  • 17
  • 33
  • That's really not a very flexible solution to hard code size. I don't understand why it is shrinked. – olefrank Apr 17 '17 at 09:52
  • It shrunk because of the size of the container it is placed in would have shrunk. So you may try keeping your datepicker in some col-md-4 or something and it wont shrink @olefrank – Tirthraj Barot Apr 17 '17 at 10:28
  • or maybe you can put the height and width in `vh` or `vw` which will keep it responsive. @olefrank – Tirthraj Barot Apr 17 '17 at 10:31
0

I seems the plugin uses rem to compute size. That means that it uses root font size which is "normally" 16px, but with BS3 it's only 10px. So the line html { font-size: 16px !important; } fixes the problem for me.

Read more here: https://github.com/Hacker0x01/react-datepicker/issues/624

olefrank
  • 6,452
  • 14
  • 65
  • 90