Implementing a Non-Wrapping, Count-Based Multi-Select Dropdown with MUI Chips
I am using the MUI library for a project that involves a multi-select dropdown with chips representing the selected data. The functionality is working well, but I'm encountering an issue with responsiveness: the chips are wrapping onto multiple lines. What I would like to achieve is a design where, instead of wrapping, it displays a text like "+2 more" or "+3 more" at the end when there are more items than can fit in a single line. I'm not sure how to implement this feature in MUI. Could anyone provide assistance or guidance on how to achieve this in MUI?
Code Sandbox Link: https://codesandbox.io/p/sandbox/mui-multiselect-sp4sg3?file=%2Fsrc%2FApp.js%3A10%2C13
I have attached my output and my required output images....
Website content disturbed on Iphone
I have made a website using html, CSS bootstrap and JavaScript. It is working good on different screen sizes and different mobile but is not working good on iPhone 7. The whole content of the website is distrub check the attach img it is not showing correctly why
How to upload website to Netlify from src
Hello, I just finished frontend mentor challenge and I have problems with deploying a site on netlify. It's my first time using tailwind, npm scripts and tooling. I also had some problems with git branches, but I think it's good now. I don't really have the build command (I was thinking maybe the
EDIT. I managed to upload a website from GithubPages, but I am still curious how to do it via Netlify github: https://github.com/Jakub-Gryczka/age-calculator github pages: https://jakub-gryczka.github.io/age-calculator/...
npm run start is the build command but it also wasn't working). The netlify is showing the "page is not exisiting". On the GitKraken it looks like on the screen. Also the .gitignore file isn't working properly, it ignores for example node_modules/ but not dist/EDIT. I managed to upload a website from GithubPages, but I am still curious how to do it via Netlify github: https://github.com/Jakub-Gryczka/age-calculator github pages: https://jakub-gryczka.github.io/age-calculator/...
Jest error with conditions on props.
I am trying to test if layout.js if it calles a fetch service, this works. But in layout.js, page.js is rendered and my fetched data is added as a prop. I mock the service an data and I return []. But in page.js I only show the data when it is not empty but I keep getting an error when using this condition. I've already tried with returning just random types and random conditions like strings but it doesn't help. I am using jest for the testing in Next.js.
Navbar
hi people, recently I was proposed to create this type of bottom navbar, I would like to hear a few opinions before starting what would be the best way to approach this design
Absolute/Relative positioning overflow
How do you make it so that the overflow scroll of this container(horizontally), appears while the vertical overflow is visible as well? On top of that, I would also want the absolutely positioned tooltip/popup to have its overflow to show horizontally.
tldr I need to:
show overflow scroll horizontally
show overflow of the popup anywhere(right now it only appears below or above, but not on the left side or right side of the screen)...
Navbar sitcky
hi people, recently I was proposed to create this type of bottom navbar, I would like to hear a few opinions before starting what would be the best way to approach this design
Table of contents wrapper though sticky and top hiding
Hey, so I got a problem with a container being sticky and having set top: 32px and it's hiding behind a header so basically another container at some point of scroll somehow and I don't know how to avoid this? Can someone help me with that, because I couldn't figure it out with multiple approaches already...
How do I do the layout for this?
So i have this design and I'm trying to implement it in vanilla CSS. i realised in mobile view i would make it a but on the main screen i realise that the image is on the right and the text is on the left . How would it be done? I've attached an image of the design. I'd prefer pseudocode so i try coding it myself.
