Autosize css dropdown to fit it's largest element - css

Question

I would like to make a dropdown for choosing from a list of items that always have a width of it's widest element. The selected item is the item that's always shown and other options are shown on hover.
It's a simple CSS dropdown, and ideally, I would like to see pure CSS solution. Since I'm using React and this dropdown is a component, a js solution would be acceptable (without using jQuery or other libraries if possible).
const Dropdown = (props) => (
<div className="dropdown">
<div className="dropdown-item">{props.active}</div>
<div className="dropdown-body">
{props.items
.filter(x => x !== props.active)
.map(x => <div className="dropdown-item">{x}</div>)}
</div>
</div>
)
var items = [
"abc", "abcdcdssd", "a"
]
ReactDOM.render(
<div>Hello <Dropdown items={items} active={"abc"} /> world.</div>,
document.querySelector("#app")
)
.dropdown {
display: inline-block;
background-color: blue;
text-align: center;
}
.dropdown .dropdown-item {
background-color: red;
width: auto;
padding: 0 6px;
}
.dropdown .dropdown-body {
display: none;
position: absolute;
z-index: 1000;
}
.dropdown:hover .dropdown-body {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
In the example above, I would like for the "abc" element to have a width of the largest element "abcdcdssd".

Answer 1

Pure CSS Solution
A pure css solution would be to give your container a width: auto and use the visibility style instead of display on your items to hide them:
const Dropdown = (props) => (
<div className="dropdown">
<div className="dropdown-item">{props.active}</div>
<div className="dropdown-body">
{props.items
.filter(x => x !== props.active)
.map(x => <div className="dropdown-item">{x}</div>)}
</div>
</div>
)
var items = [
"abc", "abcdcdssd", "a"
]
ReactDOM.render(
<div>Hello <Dropdown items={items} active={"abc"} /> world.</div>,
document.querySelector("#app")
)
var items = [
"abc", "abcdcdssd", "a"
]
ReactDOM.render(
<div>Hello <Dropdown items={items} active={"abc"} /> world.</div>,
document.querySelector("#app")
)
.dropdown {
display: inline-block;
text-align: center;
vertical-align: top;
width: auto;
}
.dropdown .dropdown-item {
background-color: red;
padding: 0 6px;
}
.dropdown .dropdown-body {
visibility: hidden;
z-index: 1000;
}
.dropdown:hover .dropdown-body {
visibility: visible;
}
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div id="app"></div>
The caveat is that because the items are only hidden if you select the text your hidden items will be selected too.
JS Solution
You can measure the width of the dropdown body after the initial render and apply it to the active dropdown item. To make this work you initially need to use visibility: hidden instead of display: none because only the width of hidden elements can be measured. You could hide them as soon as they have been measured initially.
The example below uses react hooks which requires a version >16.8 but it can also be achieved with a class based component using componentDidMount.
const {useRef, useState, useLayoutEffect} = React;
const Dropdown = props => {
const bodyRef = useRef();
const [bodyWidth, setWidth] = useState(null);
const [itemsHidden, setItemsHidden] = useState(false);
useLayoutEffect(() => {
setWidth(bodyRef.current.clientWidth);
setItemsHidden(true);
}, []);
return (
<div style={{width: bodyWidth || 'auto'}} className="dropdown">
<div className="dropdown-item">{props.active}</div>
<div ref={bodyRef} className={`dropdown-body${itemsHidden ? ' hidden' : ''}`}>
{props.items
.filter(x => x !== props.active)
.map((x, idx) => (
<div key={idx} className="dropdown-item">{x}</div>
))}
</div>
</div>
);
};
var items = [
"abc", "abcdcdssd", "a"
]
ReactDOM.render(
<div>Hello <Dropdown items={items} active={"abc"} /> world.</div>,
document.querySelector("#app")
)
.dropdown {
display: inline-block;
background-color: blue;
text-align: center;
}
.dropdown .dropdown-item {
background-color: red;
width: auto;
padding: 0 6px;
}
.dropdown .dropdown-body {
position: absolute;
z-index: 1000;
}
.dropdown .dropdown-body.hidden {
display: none;
position: absolute;
z-index: 1000;
}
.dropdown:hover .dropdown-body {
display: block;
}
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div id="app"></div>