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

user_10746224 0
Viewed 897

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).

react-datepicker reactjs javascript
2 Answers

This works in my tests:

import DatePicker from 'react-datepicker';

const DateRangeInput = () => (
    <div css={{
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
    }}>
        <div><DatePicker /></div>
        <div><DatePicker /></div>
    </>
);

Add your style in whatever way you like... I used emotion but you get the point.

Here is the codesandbox that implements the above in your codesandbox link. I converted the emotion styles to vanilla css so it fits with what you got there.

user_10432310

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

user_75519630
Related