CODEWITHSUNDEEP
javascripthtmlcssreactjsdropdown
yogesh kumar
yogesh kumar

Reputation: 103

How 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

output image

Upvotes: 3

Views: 2922

Answers (2)

Junaid Shaikh
Junaid Shaikh

Reputation: 1143

use display flex

<div style={{"display":"flex"}}>
            <span>
                 <Select options={langOptions} />
            </span>
            <span>
                <Select options={currencyOptions} />
            </span>
        </div>

Upvotes: 0

DecPK
DecPK

Reputation: 25408

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

Codesandbox 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.

Upvotes: 5

Related Questions