UI Selector Ideas?
I am making these plus & minus selectors for a client, the image is from the Figma. I'm a bit stuck with how to best go about making them, specifically with the text/select options. For the Quantity, I can use a number input and have the buttons add or subtract vrom the value. But for the Grind Size and Bag Size I'd appreciate any ideas.
- Vanilla JS
- As a11y friendly as possible
Also, is there a UI term for this kind of component? I hit a dead end on google....
Container query makes absolutely positioned elements not appear correctly
Hello there.
I am working on my university thesis project, which is a React Spotify clone. I've come to a part where the user can 'play' songs and set queues. This means that i have a container for the queue list. This container is positioned on the right side of the main container, similarly to spotify's layout. If the queue wrapper is open, the playlist table is too big, so that's why i want to hide certain columns based on the container's width. After searching on possible solutions to how to do this, i've come across the container-queries. This works fine and all, but caused the problem: some absolutely positioned elements now does not appear correctly. I think this is because the previously mentioned container-queries.
The popup should overlay the full screen, but because of the container-type: inline-size it appears like on the picture.
Is there a better way to hide columns based on container width?...
Add a mask image
I want reproduce this effect in html and css
https://www.youtube.com/watch?v=momF_D4odCM the problem is when I had he mask-image I should get this...
https://www.youtube.com/watch?v=momF_D4odCM the problem is when I had he mask-image I should get this...
why conic gradients cause aliasing when the value is an integer %?
compare both images.
if i add 0.5, it looks smooth, if i don't then it looks jagged and ugly.
why would it do this?
...
Next.js + Tailwind - HamburgerMenu is either scrolled past or cut off
Repo: https://github.com/waikoo/thrifty
Live: https://thrifty-seven.vercel.app
If you navigate to the live page on a mobile device, press the hamburger icon from the bottom NavBar, you'll notice you can't scroll downwards. If you take a look at the gif, it works for me as I'd expect this to work on the dev server when the viewport is as small vertically to cut off the whole height of the hamburger menu.
...
CSS issue
When I reduce the size of width to check for mobile screens, spaces between the words are increasing
Help trying to understand Canvas API
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/stroke#re-stroking_paths
I just can't seem to understand this part from the MDN Docs for the life of me.. I feel like it's worded confusingly....
