The window.innerWidth property gives the viewport width. If it is less than 500, the user is using a mobile phone. Using this information you can implement conditional styles that result in the page being responsive.
Solution 1 :
Solution 2 :
Just with CSS here. You only need to wrap these Selectcomponents with a div then styling it.
<div className="wrapper">
<Select list={[...this.state.Type]} />
<Select list={[...this.state.Type]} />
<Select list={[...this.state.Type]} />
</div>
In styles.css:
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
width: 100%;
}
or another way you want
Don’t forget to import the CSS file into the App component
import "./styles.css";
Solution 3 :
Bootstrap 4 has built-in classes that will produce your desired responsive behavior.
The HTML:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<body style="padding: 1rem">
<div class="container-fluid">
<div class="row">
<select class="custom-select col-md-4">
<option value="test 1">Test 1</option>
<option value="test 2">Test 2</option>
<option value="test 3">Test 3</option>
</select>
<select class="custom-select col-md-4">
<option value="test 1">Test 1</option>
<option value="test 2">Test 2</option>
<option value="test 3">Test 3</option>
</select>
<select class="custom-select col-md-4">
<option value="test 1">Test 1</option>
<option value="test 2">Test 2</option>
<option value="test 3">Test 3</option>
</select>
</div>
</div>
</body>The equivalent JSX would be:
<div className="container-fluid">
<div className="row">
<Select className={"custom-select col-md-4"} list={[...this.state.Type]} />
<Select className={"custom-select col-md-4"} list={[...this.state.Type]} />
<Select className={"custom-select col-md-4"} list={[...this.state.Type]} />
</div>
</div>
Note that you also need to link the bootstrap css, in your index.html file (if you have one).
Problem :
I have this code which is a React app :
import React, { Component } from 'react';
import Select from './components/Select/Select';
class App extends Component {
state = {
Type: [
{value: 'test 1', name: 'Test 1'},
{value: 'test 2', name: 'Test 2'},
{value: 'test 3', name: 'Test 3'},
],
};
render () {
return (
<>
<Select list={[...this.state.Type]}/>
<Select list={[...this.state.Type]}/>
<Select list={[...this.state.Type]}/>
</>
);
}
}
export default App;
Also I have the code for my component Select :
import React from "react";
const selectoption = ({ list }) => (
<select className="custom-select">{list.map(option => (<option key={option.value} value={option.value}>{option.name}</option>))}
</select>
);
export default selectoption;
I got this :
But I would like to have this :
I mean I want the 3 select wrap content.
Also,
I don’t know how to do this but when I reduce the size I got this :
whereas I would like to have this :
Do you know how can I do this easily ?
Thank you very much !!!
NB : my code is there :https://codesandbox.io/s/nameless-wood-83cg3?file=/src/App.js
Comments
Comment posted by react-bootstrap
Can you use
Comment posted by Peter
I looked at this library but I am not sure it works like what I want unfortuntely :/
Comment posted by flexbox
If react bootstrap isn’t a solution for you, try
Comment posted by Peter
Thank you it is almost that but I have still the last case (see my last pics)
Comment posted by codesandbox.io/s/nice-pond-00t8l
Something wrong with my solution? I also work as you last pic: