CODEWITHSUNDEEP
cssdrop-down-menufluent-uifluentui-react
SoftTimur
SoftTimur

Reputation: 5510

Adjust the width of the dropdown button

I'm using the preview Dropdown of Fluent UI.

I would like to reduce the width of the button. I tried to modify maxWidth: "500px", it did not work. I tried to add root={{ minWidth: "100px"}} in the <Dropdown, it did not work either.

Could anyone help?

CodeSandbox: https://codesandbox.io/s/distracted-gianmarco-51guru?file=/example.tsx

import { makeStyles, shorthands, useId } from "@fluentui/react-components";
import {
  Dropdown,
  Option,
  OptionGroup,
  DropdownProps
} from "@fluentui/react-components/unstable";
import * as React from "react";
const useStyles = makeStyles({
  root: {
    // Stack the label above the field with a gap
    display: "grid",
    gridTemplateRows: "repeat(1fr)",
    justifyItems: "start",
    ...shorthands.gap("2px"),
    maxWidth: "500px"
  }
});
export const Grouped = (props: Partial<DropdownProps>) => {
  const dropdownId = useId("dropdown-grouped");
  const land = ["Cat", "Dog", "Ferret", "Hamster"];
  const water = ["Fish", "Jellyfish", "Octopus", "Seal"];
  const styles = useStyles();
  return (
    <div className={styles.root}>
      <label id={dropdownId}>Best pet</label>
      <Dropdown
        aria-labelledby={dropdownId}
        placeholder="Select an animal"
        {...props}
      >
        <OptionGroup label="Land">
          {land.map((option) => (
            <Option key={option} disabled={option === "Ferret"}>
              {option}
            </Option>
          ))}
        </OptionGroup>
        <OptionGroup label="Sea">
          {water.map((option) => (
            <Option key={option}>{option}</Option>
          ))}
        </OptionGroup>
      </Dropdown>
    </div>
  );
};
Grouped.parameters = {
  docs: {
    description: {
      story:
        "Dropdown options can be semantically grouped with the `OptionGroup` element, with an optional group label."
    }
  }
};

Upvotes: 1

Views: 864

Answers (1)

Terek Janczik
Terek Janczik

Reputation: 176

Your issue it the "min-width:250px" value assigned to the button, I don't work with React but I did manage to do it this way, not sure if it is the best way but it does work :)

style={{minWidth:"auto"}}

Image showing minWidth fix

Result:

Image showing result

Upvotes: 1

Related Questions