How to make React-Day-Picker months side by side horizontally instead of vertically aligned

Question

I am using the react-day-picker component and I have been able to make 2 months show up but they are presented on the screen one month on top of the other. How can I change this to be aligned horizontally?I have tried changing the CSS and using inline, but it does not work.

Here is how it looks now

     import React from 'react';
     import DayPicker from 'react-day-picker';
     import 'react-day-picker/lib/style.css';

export default function Example() {
  return <DayPicker numberOfMonths={2} />;
}

Please better post your work so we could search for the problem and see what you tried so far — Ali Elkhateeb, Nov 08 '19 at 01:16

score 0 · Accepted Answer · answered Nov 08 '19 at 04:06

0

What you can try is adding this to you styles:

.DayPicker-Months {
  flex-direction: row;
  flex-wrap: nowrap;
}

You can see the actual example here: https://codesandbox.io/s/react-day-picker-base-yledo

answered Nov 08 '19 at 04:06

Edrian

608
4
14

How to make React-Day-Picker months side by side horizontally instead of vertically aligned

1 Answers1