0
237
ViewsHow to make two dropdowns in one line in react?
I don't know what wrong I am doing but these two dropdowns are not rendering in one line, please someone help me to render them in one line
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Select from 'react-select';
function NavForRest() {
const langOptions = [
{ value: 'EN', label: 'EN' },
{ value: 'HINDI', label: 'HINDI' },
{ value: 'SANSKRIT', label: 'SANSKRIT' }
]
const currencyOptions = [
{ value: 'INR', label: 'INR' },
{ value: 'INR', label: 'INR' },
{ value: 'AUD', label: 'AUD' }
]
return (
<div className="d-flex flex-row justify-content-between w-80 mt-0 mb-0" style={{"width":"80%", "margin":"auto"}}>
<div style={{"display":"inline"}}>
<span>
<Select options={langOptions} />
</span>
<span>
<Select options={currencyOptions} />
</span>
</div>
</div>
)
}
export default NavForRest;Here is the output
·
Juan Pablo Isaza
2 answers
Answer question0
1) You can just use flexbox here and style in a single line as
This works because by default flex-direction is row so you just have add display: flex and It will arrange in single line
Live Demo
<div style={{ display: "flex" }}>
EXTRA INFORMATION: You can also use gap property to add some space in between flex-items
<div style={{ display: "flex", gap: "1rem" }}>
2) Since you are also using bootstrap here then you just have to add d-flex class and this alone will do work.
·
Juan Pablo Isaza
Report
0
use display flex
<div style={{"display":"flex"}}>
<span>
<Select options={langOptions} />
</span>
<span>
<Select options={currencyOptions} />
</span>
</div>
·
Juan Pablo Isaza
Report
Answer question