Vertically align a button and a dropdown - css

Question

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>
);
};

Answer 1

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