I am working on a custom toggle dropdown feature in my React application:
import React from 'react';
import 'react-datepicker/dist/react-datepicker.css';
const DateRange = props => (
<div className="dropdown artesianDropdownContanier">
<div className="btn-group width100">
<button type="button" className="btn dropdown-width">{props.selected}</button>
<button type="button" className="btn dropdown-toggle dropdown-toggle-split artesianDropdownToggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span className="sr-only">Toggle Dropdown</span>
</button>
<div className="dropdown-menu artesianDropdown">
{props.dropDownValues.map(val => (
<span
key={val}
value={val}
className={`dropdown-item ${props.dropdownItemClass}`}
onClick={() => props.onClick(val)}
aria-hidden="true"
>
{val}
</span>
))
}
</div>
</div>
</div>
);
export default DateRange;
This is how it appears on the page:
https://i.stack.imgur.com/gFnb7.png
However, when I try to resize the webpage, the arrow part of the component overflows its bootstrap container:
https://i.stack.imgur.com/gFVgr.png
If I set the display property of the arrow to "none", the dropdown button with the text resizes perfectly. The issue seems to be with the dropdown arrow portion.
https://i.stack.imgur.com/w3X38.png
Does anyone have any suggestions on how to keep this within its parent container? Thank you!