javascriptreactjsreact-datepicker

how to prevent react-datepicker from pushing inline elements to new line on toggle?

When using react-datepicker with 2 adjacent elements, the second element gets pushed to the next row during the first element's click event.

Before:

Before

After:

After

MRE:

import DatePicker from 'react-datepicker';

const DateRangeInput = () => (
    <>
        <DatePicker />
        <DatePicker />
    </>
);

I've tried for hours with various css properties, but can't find something that works. How can I prevent this?

Here is a sandbox link and the mre.

Make sure to wait for "loaded" to appear on the screen (it takes a few seconds to compile).

Solution

  • May using flex with maxWidth will be also helpful.

     export default function App() {
      return (
        <div>
          <h1>loaded</h1>
          <div style={{ display: "flex", maxWidth: "200px" }}>
            <DatePicker />
            <DatePicker />
          </div>
        </div>
      );
    }

    Sandbox : Code