iam trying to set the dropdown menu width dynamically to the exact same size like the whole dropdown, when it changes. How do i get the width oft the dropdown itself?
I also tried to align the dropdown menu to the "end" what caused it to be right aligned. In this case filling the remaining space to the left side is the problem.
I tried different approaches and failed with them. Has somebody an idea ho to get this done?
What am i doing wrong?
import React from 'react';
import {Col, Container, Dropdown, Row} from 'react-bootstrap';
class SelectComp extends React.Component {
constructor(props) {
super(props);
this.state = {
id: 1,
};
}
render() {
return (
<div>
<Dropdown align="end">
<Dropdown.Toggle variant="outline-success" id="dropdown-basic">
Exposure Type: {
{
'1': 'Eins worked',
'2': 'Zwei worked',
'3': 'Drei worked',
}[this.state.id]
}
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item onClick={() => {
this.setState({id: 1});
}}>1</Dropdown.Item>
<Dropdown.Item onClick={() => {
this.setState({id: 2});
}}>2</Dropdown.Item>
<Dropdown.Item onClick={() => {
this.setState({id: 3});
}}>3</Dropdown.Item>
<Dropdown.Item onClick={() => {
this.setState({id: 4});
}}>4</Dropdown.Item>
<Dropdown.Item onClick={() => {
this.setState({id: 5});
}}>5</Dropdown.Item>
<Dropdown.Item onClick={() => {
this.setState({id: 6});
}}>6</Dropdown.Item>
<Dropdown.Item onClick={() => {
this.setState({id: 7});
}}>7</Dropdown.Item>
<Dropdown.Item onClick={() => {
this.setState({id: 8});
}}>8</Dropdown.Item>
<Dropdown.Item onClick={() => {
this.setState({id: 9});
}}>9</Dropdown.Item>
<Dropdown.Item onClick={() => {
this.setState({id: 10});
}}>10</Dropdown.Item>
<Dropdown.Item onClick={() => {
this.setState({id: 11});
}}>11</Dropdown.Item>
<Dropdown.Item onClick={() => {
this.setState({id: 12});
}}>12</Dropdown.Item>
<Dropdown.Item onClick={() => {
this.setState({id: 13});
}}>13</Dropdown.Item>
<Dropdown.Item onClick={() => {
this.setState({id: 14});
}}>14</Dropdown.Item>
<Dropdown.Item onClick={() => {
this.setState({id: 15});
}}>15</Dropdown.Item>
<Dropdown.Item onClick={() => {
this.setState({id: 16});
}}>16</Dropdown.Item>
<Dropdown.Item onClick={() => {
this.setState({id: 17});
}}>17</Dropdown.Item>
<Dropdown.Item onClick={() => {
this.setState({id: 18});
}}>18</Dropdown.Item>
<Dropdown.Item onClick={() => {
this.setState({id: 19});
}}>19</Dropdown.Item>
<Dropdown.Item onClick={() => {
this.setState({id: 20});
}}>20</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
)
}
}
export default SelectComp;
Make your outer container inline-block and give the dropdown menu 100% width. for example:
<Dropdown className="d-inline-block">
...
<Dropdown.Menu className="w-100">