CODEWITHSUNDEEP
cssreactjstailwind-cssradix-ui
chomprrr
chomprrr

Reputation: 429

How to restrict the width of Dropdown to not exceed Input?

I am trying to trigger a dropdown whenever the users enters something into an input field. The functionality seems to be working but I am confused about how I can set the width of my Dropdown to not exceed the width of Input. These are both Radix primitives. Right now, it looks like this. I am also using Tailwind. What I'd like is to have the width of the Dropdown be equal to the width of the Input.

image

export const AddressInput = ({}) => {
  const [userInput, setUserInput] = useState('');
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const { placePredictions, getPlacePredictions, isPlacePredictionsLoading } =
    usePlacesAutocomplete();

  return (
    <Fragment>
      <Input
        value={userInput}
        label="Address"
        onChange={(evt) => {
          const addressTyped = evt.target.value;
          getPlacePredictions({ input: addressTyped });
          setUserInput(evt.target.value);
          if (addressTyped !== '') setDropdownOpen(true);
        }}
      />
      {!isPlacePredictionsLoading && (
        <Dropdown open={dropdownOpen} onOpenChange={setDropdownOpen}>
          <DropdownTrigger />
          <DropdownContent align="start">
            {placePredictions.map((p, i) => (
              <DropdownItem
                key={'p' + i}
                onClick={() => setUserInput(p.description)}
              >
                {p.description}
              </DropdownItem>
            ))}
            <DropdownItem>
              <span className="text-primary">Edit address manually</span>
            </DropdownItem>
          </DropdownContent>
        </Dropdown>
      )}
    </Fragment>
  );
};

Upvotes: 0

Views: 1348

Answers (1)

user22015587
user22015587

Reputation:

Apply max-width to the fragment element and it'll affect everything within.

<fragment style = "max-width: *value* ">

more info about css arguments: https://www.w3schools.com/cssref/pr_dim_max-width.php

setting the max-width too small will cause side scrolling which may not be appreciated by users.

If you don't apply any css to your html everything will assume defaults.

Upvotes: 0

Related Questions