- I need help aligning my dropdown menu horizontally instead of vertically. I tried using the flexbox example from w3 schools, but it didn't work when I included the classes inside my select tag.
- Even after debugging, I realized that the issue is with the flexgrow property assigned to the root class.
- Can someone guide me on how to fix this so that I can troubleshoot similar issues in the future?
- Below is a link to my relevant code snippet and sandbox:
- All the code can be found in AutoCompleteComponent.js
https://codesandbox.io/s/4x9lw9qrmx
queryBuilderContainer: {
display: "flex",
flexWrap: "wrap",
backgroundColor: "DodgerBlue ",
border: "1px solid red "
// width: 100,
// display: flex;
// flex-wrap: wrap;
// background-color: DodgerBlue;
},
queryBuilderContainerItem: {
border: "1px solid black ",
backgroundColor: "red ",
width: 100,
margin: 10,
textAlign: "center",
//lineHeight: 75,
fontSize: 30
},
root: {
flexGrow: 1,
height: 250
},
input: {
display: "flex",
padding: 0
},
valueContainer: {
display: "flex",
flexWrap: "wrap",
flex: 1,
alignItems: "center",
overflow: "hidden"
},
nossr0901
<NoSsr className={classes.queryBuilderContainer}>
<Select
className={classes.queryBuilderContainerItem}
classes={classes}
styles={selectStyles}
options={this.state.suggestions}
components={components}
value={this.state.single}
onChange={this.handleChange("network")}
placeholder="Search a to do"
/>
<Select
className={classes.queryBuilderContainerItem}
classes={classes}
styles={selectStyles}
options={this.state.nameSuggestions}
components={components}
value={this.state.names}
onChange={this.handleChange("location")}
placeholder="Search name"
/>
<div className={classes.divider} />
<Select
className={classes.queryBuilderContainerItem}
classes={classes}
styles={selectStyles}
options={this.state.operatorSuggestions}
components={components}
value={this.state.operator}
onChange={this.handleChange("operator")}
placeholder="Search name"
/>
<div className={classes.divider} />
<button onClick={e => this.props.removeSeleted(this.props.index)}>
Remove
</button>
</NoSsr>