I have implemented the Reactstrap drop-down menu:
import React from "react";
import {
Dropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
} from "reactstrap";
export default class DropDownTest extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
dropdownOpen: false,
};
}
toggle() {
this.setState((prevState) => ({
dropdownOpen: !prevState.dropdownOpen,
}));
}
render() {
return (
<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle caret>test</DropdownToggle>
<DropdownMenu>
<DropdownItem>A</DropdownItem>
<DropdownItem>A</DropdownItem>
<DropdownItem>A</DropdownItem>
<DropdownItem>A</DropdownItem>
</DropdownMenu>
</Dropdown>
);
}
}
The issue I am facing is that the width of the DropdownItem is too large for what I want to display (the letter A):
https://i.sstatic.net/PX2TO.png
I aim to make the width of the DropdownItem equal to the required width by the inner element, in this case the letter A.
Upon inspecting the dropdown menu, I found the following structure:
<div
tabindex="-1"
role="menu"
aria-hidden="false"
class="dropdown-menu show"
style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(515px, 41px, 0px);"
x-placement="bottom-start"
>
<button
type="button"
tabindex="0"
role="menuitem"
class="dropdown-item"
>
A
</button>
<button
type="button"
tabindex="0"
role="menuitem"
class="dropdown-item"
>
A
</button>
<button
type="button"
tabindex="0"
role="menuitem"
class="dropdown-item"
>
A
</button>
<button
type="button"
tabindex="0"
role="menuitem"
class="dropdown-item"
>
A
</button>
</div>
These are the relevant CSS classes:
.dropdown-item {
display: block;
width: 100%;
padding: 0.25rem 1.5rem;
clear: both;
font-weight: 400;
color: #212529;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
}
Additionally, I believe the following class is defined in the template being used:
.dropdown-menu .dropdown-item {
color: #66615b;
font-size: 14px;
padding: 10px 45px 10px 15px;
clear: both;
white-space: nowrap;
width: 100%;
display: block;
}
https://i.sstatic.net/1ii1F.png
I attempted to remove the padding:
<DropdownItem className="p-0" >A</DropdownItem>
<DropdownItem className="p-0" >A</DropdownItem>
<DropdownItem className="p-0">A</DropdownItem>
<DropdownItem className="p-0">A</DropdownItem>
However, this did not achieve the desired result as expected.
Any suggestions on how I can accomplish my objective?