Vertically align a button and a dropdown-CodePudding

I would like to make a row, where there is a title on the left and several buttons and a dropdown on the right.

I use Flexbox to arrange their horizontal placement.

Now, the dropdown (e.g., Cat) is not vertically-aligned with the buttons. Notice that if we remove the icons (.e.g, iconProps={{ iconName: "Back" }}), they will be aligned.

I tried to put style={{ minWidth: "auto", marginTop: "-10px" }} or style={{ minWidth: "auto", paddingTop: "-10px" }} for the dropdown, but it did not work.

Could anyone help?

https://codesandbox.io/s/peaceful-mopsa-2qr5qu?file=/example.tsx

import { makeStyles, shorthands } from "@fluentui/react-components";
import {
  Dropdown,
  Option,
  OptionGroup,
  DropdownProps
} from "@fluentui/react-components/unstable";
import { CommandBarButton } from "@fluentui/react/lib/Button";
import * as React from "react";
import { initializeIcons } from "@fluentui/react/lib/Icons";

initializeIcons(/* optional base url */);
const useStyles = makeStyles({
  dropdown: {
    // removes default border around the dropdown
    ...shorthands.borderWidth(0),
    // removes the blue bottom border when the dropdown is open
    "::after": {
      borderBottomWidth: 0
    }
  }
});
export const Grouped = (props: Partial<DropdownProps>) => {
  const land = ["Cat", "Dog", "Ferret", "Hamster"];
  const styles = useStyles();
  return (
    <div style={{ display: "flex", justifyContent: "space-between" }}>
      <div style={{ flexBasis: "auto" }}>
        <span style={{ lineHeight: "2.7rem" }}>Title</span>
      </div>
      <div style={{ flexBasis: "auto" }}>
        <CommandBarButton
          styles={{ root: { height: 44 } }}
          iconProps={{ iconName: "Back" }}
          ariaLabel="Back"
          text="Button 1"
          disabled={false}
          checked={false}
        />
        <CommandBarButton
          styles={{ root: { height: 44 } }}
          iconProps={{ iconName: "Up" }}
          text="Button 2"
          disabled={false}
          checked={false}
        />

        <Dropdown
          className={styles.dropdown}
          style={{ minWidth: "auto" }}
          defaultSelectedOptions={["Cat"]}
          {...props}
        >
          <OptionGroup label="Land">
            {land.map((option) => (
              <Option key={option} disabled={option === "Ferret"}>
                {option}
              </Option>
            ))}
          </OptionGroup>
        </Dropdown>
      </div>
    </div>
  );
};

CodePudding user response：

There is a div wrapping the buttons and the dropdown. Applying flex to that div and then to the dropdown too will give you the output that you want.

// Flex here
<div style={{ display: "flex" }}>
  <CommandBarButton
    styles={{ root: { height: 44 } }}
    iconProps={{ iconName: "Back" }}
    ariaLabel="Back"
    text="Button 1"
    disabled={false}
    checked={false}
  />
  <CommandBarButton
    styles={{ root: { height: 44 } }}
    iconProps={{ iconName: "Up" }}
    text="Button 2"
    disabled={false}
    checked={false}
  />

  <Dropdown
    className={styles.dropdown}
    // Flex here
    style={{
      minWidth: "auto",
      display: "flex",
    }}
    defaultSelectedOptions={["Cat"]}
    {...props}
  >
    <OptionGroup label="Land">
      {land.map((option) => (
        <Option key={option} disabled={option === "Ferret"}>
          {option}
        </Option>
      ))}
    </OptionGroup>
  </Dropdown>
</div>;

CodeSandbox : https://codesandbox.io/s/elegant-yalow-4uheom?file=/example.tsx:1554-1570