CODEWITHSUNDEEP
cssmaterialize
shlomo minkowicz
shlomo minkowicz

Reputation: 109

select dropdown materialize css full width

I'm trying to add 2 select dropDown materialize css side by side, in my react app. But instead they are stacked one on top of each-other and taking up the full width. here is my code.

const SearchPillows = () => {


    return (
        <div className="container">
            <div className="input-field col s12">
                <select>
                    <option value="" disabled selected>Choose your option</option>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select>
                <div className="input-field col s12">
                    <select>
                        <option value="" disabled selected>Choose your option</option>
                        <option value="1" className="left">Option 1</option>
                        <option value="2" className="left">Option 2</option>
                        <option value="3" className="left">Option 3</option>
                    </select>
                </div>
            </div>
            <p>hello</p>
        </div>
    );
};

export default SearchPillows;

Please assist, thanks !!

Upvotes: 0

Views: 492

Answers (1)

Sean Doherty
Sean Doherty

Reputation: 2378

Several errors in your code:

1) No .row div. .col must live in rows to be responsive.

2) No class name to make the columns side by side, which is .s6, .m6 .l6 etc.

3) Missing closing div tag after the first select.

<div class="container">
    <div class="row"><!-- < This was missing -->
              <div class="input-field col s12 m6">
                <select>
                    <option value="" disabled selected>Choose your option</option>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select>
              </div><!-- < This was missing -->
                <div class="input-field col s12 m6">
                    <select>
                        <option value="" disabled selected>Choose your option</option>
                        <option value="1" className="left">Option 1</option>
                        <option value="2" className="left">Option 2</option>
                        <option value="3" className="left">Option 3</option>
                    </select>
                </div>
            </div>
            <p>hello</p>
     </div>
</div>

Codepen.

Upvotes: 1

Related Questions