I have a flexBox which has 2 children. 1 child is just an icon and it doesnt seem to take up the same height as the other child. Please advice me on a way to fix this.
Playground URL: URL
import React from "react";
import "./styles.scss";
import styled from "styled-components/macro";
import { Button, Card, Colors, Icon } from "@blueprintjs/core";
import { IconNames } from "@blueprintjs/icons";
import { Box, Flex } from "@rebass/grid";
import cx from "classnames";
const CustomIcon = styled(Button)`
transition: all 0.2s ease;
}
`;
function App() {
return (
<Flex>
<Box width={"90%"}>
<Card
interactive={true}
className={cx({ selected: true, muted: true })}
>
<Flex alignItems="center">
<Box mr={2} css={{ minWidth: 0 }}>
Sample
</Box>
<Box flex="auto" />
<Box flex="none">
<CustomIcon
className="utility-button"
icon={<Icon icon={IconNames.EDIT} />}
minimal={true}
title="Edit scenario"
/>
<CustomIcon
className="utility-button"
icon={<Icon icon={IconNames.DUPLICATE} />}
minimal={true}
title="Copy scenario"
/>
<CustomIcon
className="utility-button"
icon={<Icon icon={IconNames.DOCUMENT_SHARE} />}
minimal={true}
title={"Transfer"}
/>
<CustomIcon
className="utility-button"
icon={<Icon icon={IconNames.TRASH} color={Colors.RED1} />}
minimal={true}
title="Delete scenario"
/>
</Box>
</Flex>
</Card>
</Box>
<Box width={"10%"}>
<Card>
<Icon icon={IconNames.CHEVRON_RIGHT} />
</Card>
</Box>
</Flex>
);
}
export default styled(App)`
&.selected {
box-shadow: inset 0 1px 0 #137cbd, inset 0 -1px 0 #137cbd,
inset 1px 0 0 #137cbd;
}
&.muted {
opacity: 0.5;
.utility-button {
pointer-events: none;
}
}
&:not(:hover):not(.selected) {
.utility-button {
opacity: 0;
pointer-events: none;
}
}
`;
This is my result:
I want the second child to be as the same height as the first child. Please advice.
line-height
..utility-button{
flex: none;
width: 44px;
height: 44px;
line-height: 44px;
text-align: center;
}
.utility-button .icon {
font-size: 1em;
}
You should just be able to explicitly set the height of the elements in your CSS - ie. sampleDiv { height: 20px )
. Also the padding on the left element could be greater than the right, causing its display size to be larger.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.