Is there a way i can make this work? Since flex={1} doesn't do the job?
Or else are there better ways to achieve the same ?
<HStack w='full' spacing={2} bg='yellow.50' align='flex-start'>
<VStack align='flex-start' h='full'>
<Box w={20} h={20} bg='blue.200' class="fixed height element" />
<Box w='20' h='full' bg='green.200' flex={1} class="Fill the remaining height" />
</VStack>
<VStack w='full'>
<Box h={20} w='full' bg='red.100' />
<Box h={20} w='full' bg='red.300' />
<Box h={20} w='full' bg='red.500' />
</VStack>
</HStack>
Not quite sure If I get it right or wrong. The 1st VStack (green section) already fills the remaining space, so your problem is how the 2nd VStack fills the remaining space?
If yes, then the below code should work for you. Provide the height (h="full") to 2nd VStack and the last Box with h="full" will fill the remaining space.
<Grid minH="100vh" p={3}>
<HStack w="full" spacing={2} bg="yellow.50" align="flex-start">
<VStack align="flex-start" h="full">
<Box w={20} h={20} bg="blue.200" class="fixed height element" />
<Box w="20" h="full" bg="green.200" class="Fill the remaining height" />
</VStack>
<VStack w="full" h="full">
<Box h={20} w="full" bg="red.100" />
<Box h={20} w="full" bg="red.300" />
<Box h="full" w="full" bg="red.500" />
</VStack>
</HStack>
</Grid>
USING only flexbox, Box with flexGrow: 1 to occupy all the remaining space
<HStack w="full" minH="100vh" alignItems="stretch" spacing={2} bg="yellow.50" align="flex-start">
<VStack align="flex-start">
<Box w={20} h={20} bg="blue.200" class="fixed height element" />
<Box
w="20"
flexGrow="1"
bg="green.200"
class="Fill the remaining height"
/>
</VStack>
<VStack w="full" h="full">
<Box h={20} w="full" bg="red.100" />
<Box h={20} w="full" bg="red.300" />
<Box h={20} w="full" bg="red.500" />
</VStack>
</HStack>
Related
I want to fix the position of react slick carousel,and want to change the navigation dots style.I am trying in this way....
dots style I want,
Screenshot: https://i.stack.imgur.com/MhOQa.png
`<Show above='md'>
<Box w='50%'>
<Slider {...settings} className='customSlide'>
<Box>
<Image
src={avtar}
/>
</Box>
<Box>
<Image
src={avtar1}
/>
</Box>
<Box>
<Image
src={avtar2}
/>
</Box>
<Box>
<Image
src={avtar3}
/>
</Box>
</Slider>
</Box>
<Divider orientation='vertical' variant={'dashed'} borderColor={'grey'} height='100vh' />
</Show>
`
CSS:
.customSlide{ position: fixed!important; }
Thanks in advance..
I'm using chakra ui.
Hovering over the Sidebar expands the sidebar to the right.
The text is bent on the way to the right.
Is there any way to widen the　Sidebar without bending the letters?
If anyone can help me understand, I would appreciate your help.
code
<Flex
background="blue.50"
flexDirection="column"
height="100vh"
justifyContent="space-between"
onMouseEnter={() => setState((prevState) => !prevState)}
onMouseLeave={() => setState((prevState) => !prevState)}
position="fixed"
width={state ? "204px" : "44px"}
zIndex={10}
transition={"all .2s ease"}
>
<Box transition="all 0.3s">
<HStack p={3}>
<Flex alignItems="center">
<Image
display={state ? "none" : "inline-block"}
height="24px"
src={""}
transition="all 0.3s ease-in-out"
/>
<Image
display={state ? "inline-block" : "none"}
src={"chakra_logo.png"}
/>
</Flex>
<Text display={state ? "inline-block" : "none"} fontSize="xs">
logo
</Text>
</HStack>
<VStack mt={3} spacing={0}>
<Box _hover={{ backgroundColor: "gray.200" }} width="full">
<Link>
<a>
<HStack p={3}>
<BiSearchAlt />
<Text display={state ? "inline-block" : "none"}>
search Page
</Text>
</HStack>
</a>
</Link>
</Box>
</VStack>
</Box>
<VStack mb={2} spacing={0}>
<Box mb={2} px={3} width="full">
<Divider borderColor="gray.300" />
</Box>
<Box _hover={{ backgroundColor: "gray.200" }} p={3} width="full">
<HStack>
<Image src={""} width="24px" />
<Text display={state ? "inline-block" : "none"}>
My Page Setting
</Text>
</HStack>
</Box>
</VStack>
</Flex>
To prevent text from wrapping, you can add whiteSpace="nowrap" and overflow="hidden" props to the <Text /> elements.
I use chakra ui.
When I hover the sidebar, the sidebar extends to the right.
I am using transition, but the animation is not applied. It is a bit choppy.
I am using transition="all 0.3s" but no animation happens when hover is applied.
I don't know why.If anyone can help me understand, I would appreciate your help.
code
enter link description here
<Flex
background="blue.50"
flexDirection="column"
height="100vh"
justifyContent="space-between"
onMouseEnter={() => setState((prevState) => !prevState)}
onMouseLeave={() => setState((prevState) => !prevState)}
position="fixed"
width={state ? "204px" : "54px"}
zIndex={10}
>
<Box transition="all 0.3s">
<HStack p={3}>
<Flex alignItems="center">
<Image
display={state ? "none" : "inline-block"}
height="24px"
src={""}
transition="all 0.3s ease-in-out"
/>
<Image
display={state ? "inline-block" : "none"}
src={"chakra_logo.png"}
/>
</Flex>
<Text display={state ? "inline-block" : "none"} fontSize="xs">
logo
</Text>
</HStack>
<VStack mt={3} spacing={0}>
<Box _hover={{ backgroundColor: "gray.200" }} width="full">
<Link>
<a>
<HStack p={3}>
<BiSearchAlt />
<Text display={state ? "inline-block" : "none"} fontSize="sm">
search
</Text>
</HStack>
</a>
</Link>
</Box>
<Box _hover={{ backgroundColor: "gray.200" }} width="full">
<Link>
<a>
<HStack p={3}>
<AiOutlineSetting />
<Text display={state ? "inline-block" : "none"} fontSize="sm">
setting
</Text>
</HStack>
</a>
</Link>
</Box>
</VStack>
</Box>
<VStack mb={2} spacing={0}>
<Box mb={2} px={3} width="full">
<Divider borderColor="gray.300" />
</Box>
<Box _hover={{ backgroundColor: "gray.200" }} p={3} width="full">
<HStack>
<Image
alt="MyImage"
src={""}
width="24px"
/>
</HStack>
</Box>
</VStack>
</Flex>
You need to add CSS transition to main Flex also:
<Flex
background="blue.50"
flexDirection="column"
height="100vh"
justifyContent="space-between"
onMouseEnter={() => setState((prevState) => !prevState)}
onMouseLeave={() => setState((prevState) => !prevState)}
position="fixed"
width={state ? "204px" : "54px"}
zIndex={10}
transition={"all .2s ease"}
>...
I want to achieve the given style.
Currently, I have
<Box display="flex" flexDirection="row" alignItems="center" width={1}>
<Box flexGrow="1">
<Typography variant="h6">
{subscription.PlanName}
<Box
px={1}
py={0.5}
color={"primary.contrastText"}
className={classes.success}
display="flex"
alignItems="center"
justifyContent="space-between"
>
{subscription.Status}
</Box>
</Typography>
<Typography variant="caption" component="div">Purchased on: <b>{moment(subscription.StartDate).format("DD-MM-YYYY")}</b></Typography>
<Typography variant="caption" component="div">Expiring on: <b>{moment(subscription.EndDate).format("DD-MM-YYYY")}</b></Typography>
</Box>
<Box>
<Button
variant="outlined"
color="primary"
onClick={Actions.openBillingDrawer}>
UPDATE CREDITS
</Button>
</Box>
<Box>
<Button
variant="contained"
color="primary"
onClick={Actions.openBillingDrawer}>
UPGRADE PLAN
</Button>
</Box>
Also, the UPDATE CREDITS button is different from which I am currently using. Please provide the correct button for that too.
it is not exactly your goal, but its a good place to start. You've got the right separation of boxes, right size of the green box and a iconButton:
<Box
display="flex"
flexDirection="row"
alignItems="center"
width={1}
justifyContent="space-between"
>
<Box>
<Box display="flex" alignItems="flex-end" margin="5px 0">
<Typography variant="h4" style={{ lineHeight: "0.8" }}>
Basic Plan
</Typography>
<Box
color="primary.contrastText"
bgcolor="success.main"
fontSize="8px"
padding="2px 4px"
marginLeft="6px"
>
ACTIVE
</Box>
</Box>
<Typography variant="caption" component="div" color="textSecondary">
Purchased on: <b>01-01-2020</b>
</Typography>
<Typography variant="caption" component="div" color="textSecondary">
Expiring on: <b>02-02-2020</b>
</Typography>
</Box>
<Box>
<Button
variant="outlined"
color="primary"
endIcon={<ArrowDropDownIcon />}
>
UPDATE CREDITS
</Button>
<Button variant="contained" color="primary">
UPGRADE PLAN
</Button>
</Box>
</Box>
I am using highcharts inside Flex to make it responsive across all screen sizes but its not becoming responsive for mobile screens. Below is my code in reactJs and issue is replicated at
https://codesandbox.io/s/highcharts-react-demo-s31oo
<div>
<Box display="flex" flexWrap="wrap" flexDirection="row">
<Box m={0.5} style={{ flexBasis: "48%", minWidth: '0' }}>
<LineChart
chartData={ChartData}
/>
</Box>
<Box m={0.5} style={{ flexBasis: "48%", minWidth: '0' }}>
<LineChart
chartData={ChartData2}
/>
</Box>
</Box>
</div>
What's wrong in my design?
can you use flexGrow: 1
<div>
<Box display="flex" flexWrap="wrap" flexDirection="row">
<Box m={0.5} style={{ flexBasis: "48%", minWidth: "0", flexGrow: 1 }}>
<Chart chartData={options} />
</Box>
<Box m={0.5} style={{ flexBasis: "48%", minWidth: "0", flexGrow: 1 }}>
<Chart chartData={options} />
</Box>
</Box>
</div>