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

Question

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:

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

@MenaiAlaEddine-Aladdin I just tried it, but it didn't change anything — Lord Elrond, Sep 14 '20 at 22:03
Would you reproduce your code via [Sandbox](https://codesandbox.io/). — Menai Ala Eddine - Aladdin, Sep 14 '20 at 22:04
You can't add CSS to a Fragment... what element would that apply to in html? — Dominik, Sep 14 '20 at 22:04
@MenaiAlaEddine-Aladdin I updated the question with a sandbox link — Lord Elrond, Sep 14 '20 at 22:15
@Dominik, by HOC that wrapped the component. I did not mean inline css. — Menai Ala Eddine - Aladdin, Sep 14 '20 at 22:19

Menai Ala Eddine - Aladdin · Accepted Answer · 2020-09-14T22:39:07.877

2

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

edited Sep 14 '20 at 22:39

answered Sep 14 '20 at 22:29

Menai Ala Eddine - Aladdin

2,364
4
22
46

Dominik · Answer 2 · 2020-09-14T22:29:43.937

0

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.

edited Sep 14 '20 at 22:29

answered Sep 14 '20 at 22:03

Dominik

6,078
8
37
61

Why you wrapped `DatePicker` with `div` ? – Menai Ala Eddine - Aladdin Sep 14 '20 at 22:14
Because otherwise the Datepicker will break out of the container and be multiple elements. This will contain it. I don't like div-soup as much as the next person but I see no way around it – Dominik Sep 14 '20 at 22:15
this doesn't work on my machine, or in the [sandbox](https://codesandbox.io/s/keen-fast-b8no1?file=/src/App.js) – Lord Elrond Sep 14 '20 at 22:17
Mate... you can only put two elements into the div... you added three and didn't wrap the Datepicker... – Dominik Sep 14 '20 at 22:18
@Dominik I did when I was testing your code. Here is a [fork](https://codesandbox.io/s/beautiful-shaw-vvs9s?file=/src/App.js) with your code – Lord Elrond Sep 14 '20 at 22:23
Just FYI I used [emotion](https://emotion.sh) like I mentioned in my answer... I ported what emotion would do to pure css for ya ;) – Dominik Sep 14 '20 at 22:25
@Dominik can you provide a link? I don't know how to view forks xD – Lord Elrond Sep 14 '20 at 22:28
The link is in the answer... here for you again: https://codesandbox.io/s/eloquent-mirzakhani-ivnpy – Dominik Sep 14 '20 at 22:28

score 0 · Answer 3 · answered Jan 29 '23 at 10:29

0

Another solution is just to disable tab loop

export default function App() {
  return (
    <div>
      <h1>loaded</h1>
      <DatePicker enableTabLoop={false}/>
      <DatePicker enableTabLoop={false}/>
    </div>
  );
}

answered Jan 29 '23 at 10:29

hgb123

13,869
3
20
38

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

Before:

After:

MRE:

3 Answers3