How can I ensure that the container is at least as wide as the longest text?
I have a navigation dropdown menu within a container. The HTML and CSS code provided is meant to display a language dropdown menu. However, I'm experiencing issues where the container's width doesn't adjust according to the length of the longest text inside it. I want to ensure that the container is always at least as wide as the longest text and that the entire text is visible. How can I achieve this with the given code?
Here is the code: https://jsfiddle.net/rn8z6swk/1/
Here is the code: https://jsfiddle.net/rn8z6swk/1/
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
6 Replies
The position absolute on the .dropdown has taken it out of the flow so there’s no content inside (from the browsers POV) to take up any space. It’s only as wide as it is bc of the padding and the default option.
There are some bigger problems:
- use REM instead of px for font size
- I see a lot of display block and display inline-block , in some cases trying to overwrite each other
- the nested uls aren’t making sense to me
-this should be a select element w options
- in your reset where you’re nuking padding and margins, don’t forget
Scrap everything you have an start over. Define your container and then put a select element inside. I’m not understanding what you were going for with all the ul > li > ul nesting but if you’re just trying to make a drop-down they’re unnecessary.
There are only so many ways you can style a Select. That's why it's gone.
If you are training html, css
You can take a look at this
https://codepen.io/Q-C_Q-C/pen/gONgJEW
Or try using a UI framework to do it
https://ui.shadcn.com/docs/components/dropdown-menu
Dropdown Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
You just have to start from scratch like all custom inputs. It's a pain but only a couple more lines of code than making your own. Or use radio groups and style that. Make sure it's accessible and interactive elements with the proper a11y.
Is this a demo or a project for school or... what's the intention behind it ?
Its for my portfolio website.
Okay so it needs to be accessible and airtight. So start over. W the semantic elements, apply
appearance :none. It'll end up being less lines of code bc you womt need to add in all the javascript to make it right.