React Datepicker won't shrink to parent container

Question

I'm having a difficult time getting react-datepicker to shrink to its parent container within my code. I have found suggestions on giving it a new stylesheet here, but I'm not sure what is the recommended way for styling a pre-made react component. Here is my code block:

<Card style={{height: '96%'}}>
                            <CardHeader>
                                Refine By:
                            </CardHeader>
                            <CardBody>
                                <h6>Release Date Range:</h6>
                                <Row>
                                    <Col>
                                        <div style={{paddingBottom: 10,width:'100%',display:'block',backgroundColor:'red'}}>
                                            <DatesForm dateFilter={this.state.dateFilter} logDates={this.logDates}
                                                       type={'start'} updateTable={this.filterData} style={{width:'100%'}}/>
                                        </div>
                                    </Col>
                                    <Col>
                                        <div style={{paddingBottom: 20}}>
                                            <DatesForm dateFilter={this.state.dateFilter} logDates={this.logDates}
                                                       type={'end'} updateTable={this.filterData}
                                                       style={{width:'100%'}}/>
                                        </div>
                                    </Col>
                                </Row>
                            </CardBody>
                        </Card>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

score 0 · Answer 1 · answered Feb 12 '19 at 20:12

So after messing with the datepicker's css for a bit and making no progress I looked into the code for creating the component. The component creates an input element as a 'portal' for people to click on. The input completely ignores any css from it's parent because it's given none on creation. To fix this problem I went into node modules->react-datepicker->es->index.js

Then I edited this line (at the time of writing this comment):

var customInput = _this.props.customInput || React.createElement("input", { type: "text" });

and changed it to give the input element that is created it's own width style, which I set to 100% so it will fill the parent container.

var customInput = _this.props.customInput || React.createElement("input", { type: "text" ,style: {width: "100%"}});

React Datepicker won't shrink to parent container

1 Answers1