3

As the title states, the margins on my react-datepicker's time div look wonky. I'm using the react-datepicker npm package on version 1.2.2 (which should be the latest version of it). I've included the css for it like so in my root component where my app initializes: import "react-datepicker/dist/react-datepicker-cssmodules.css";

My react-datepicker component is wrapped in the semantic-ui-react Form.Field component, however the css on the time picker is still wonky even if I remove this Form.Field from wrapping it.

Here's what my code looks like:

                <Grid.Column>
                  <Form.Field error={!!fieldErrors.date}>
                    <label>
                      Label
                    </label>
                    <DatePicker
                      name="date"
                      selected={fields.date}
                      onChange={onDateChange}
                      showTimeSelect
                      timeIntervals={15}
                    />
                    <InlineError error={fieldErrors.date} />
                  </Form.Field>
                </Grid.Column>

And here's what the UI looks like:

enter image description here

Thank you for your time.

Edit:

Styles

MEnf
  • 1,482
  • 1
  • 12
  • 18
  • It seems like 2 different CSS are colluding. Which classes / properties are applied to it? – Victor Baron Mar 23 '18 at 13:51
  • `.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list` I'll make an edit to the main post to show the styles being applied to it. – MEnf Mar 23 '18 at 14:09
  • a/ It seems like there is an `!important` somewhere overriding this css (as the un-applied `padding: 5px 10px;` shows). But what ? b/ I'd say it is the main component "fault". A wrong global width may-be ? – Victor Baron Mar 23 '18 at 14:20

1 Answers1

2

Adding this style worked for me:

.react-datepicker__time-container   .react-datepicker__time  
.react-datepicker__time-box   ul.react-datepicker__time-list {  
     padding: 0; 
}
Ani Alaverdyan
  • 1,527
  • 3
  • 14
  • 20