如何解决折叠手风琴时,div 高度不会调整
我有两个相互叠加的图表,它们一直延伸到屏幕底部。第一个可通过 Accordion
折叠。
但是,如果我按顺序做以下两件事:
然后在第二个图形下方会有不需要的空白。
<Flex direction="column" height="calc(100vh)" className="flex-wrapper">
<Box fontSize={["sm","md","lg","xl"]}>Font Size</Box>
<Flex className="flex-wrapper0">
<div>123456789010</div>
<Box className="accordion-Box-container">
<Accordion className="accordion-wrapper" allowToggle>
<AccordionItem>
<h2 className="accordion-title">
<AccordionButton
className="accordion-button"
borderRadius="md"
borderWidth="0px"
_focus={{ BoxShadow: "none" }}
>
<Box
textAlign="left"
h={3}
_focus={{ BoxShadow: "none" }}
></Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel p="0">
<Box height="30vh">
<ThreeDataPoint />
</Box>
</AccordionPanel>
</AccordionItem>
</Accordion>
<div className="graph-wrapper">
<ThreeDataPoint />
</div>
</Box>
</Flex>
</Flex>
这似乎是浏览器大小调整和 css 之间的一些交互问题?我想我需要在按下手风琴按钮时强制重新渲染 <ThreeDataPoint />
以便它可以选择它应该使用的新高度。我想知道如何强制重新渲染?
这是代码和框:
https://codesandbox.io/s/elegant-fermat-bugv1?file=/src/index.tsx
以及应用网址:
解决方法
正是因为这个 !important 标志在 css 文件中造成了问题:
.graph-wrapper div {
height: 100% !important;
}
将其注释掉后,它按预期工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。