Amazon style search bar

JavaScript
1

https://SearchBar.bl1xvan.repl.co

I’m trying to make an Amazon style search bar in React.js. There’s a select element to the left of the search bar which is meant to help filter the search material. When you choose an option, the select element is supposed to stretch to fit that word.

So far, this works for the smaller words, like “All”, “Food”, and “Baby”. But for the longer options, “This is a very long option” the select element stretches too much. There’s too much white space in the end.

I tried using all the different units of measurement for the width (so far, “em”, “rem” and “in”, are the only ones that don’t wipe the shorter words out completely). I also tried removing the white spaces in the filter options. But that didn’t work either

    function handleWidth(e){
      const oldtext = e.target.value
      const newtext = oldtext.replace(/ /g, " ")
      setSearchWidth(`${newtext.length}em`)
    }

Using “fit-content” or “max-content” won’t work either because then, the select element will stretch to fit the largest option “This is a long option”, by default. I want it to fit “All” by default.

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.