在滚动Material-UI弹出框中修复标题

时间:2019-05-31 19:14:17

标签: reactjs material-ui popover

material-ui可以在Dialog中具有固定的页眉和页脚,并具有长而滚动的内容。

我希望在popover中达到相同的效果。

以示例为例:

<Popover>
  <Header>Fixed header</Header>
  <Content>long long long text</Content>
  <Footer>Submit button</Footer>
</Popover>

我希望滚动条显示在Content中,而HeaderFooter在其弹出框中保持固定。

我可以通过在style={{ height: 250 }}上设置一个简单的Content来获得所需的结果,但是我会失去弹出框的动态大小,弹出框的大小会根据其子级根据所需的大小进行调整但要在屏幕范围内。

使用库本身是否有可能?如果不是,是否有人知道任何解决方法?

1 个答案:

答案 0 :(得分:0)

您可以通过动态设置内容的max-height来实现此目的,您必须使用max-height: calc( 100vh - {headerHeigh - footerHeight})来手动{headerHeigh - footerHeight},然后您的内容现在应该如何使用overflow: auto;处理溢出,一个有效的示例:

body {
  font-family: sans-serif;
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.grid .popover {
  border: 1px solid black;
}

.grid .popover .content {
  max-height: calc(100vh - 70px);
  overflow: auto;
}

header {
  background: red;
  height: 40px;
}

footer {
  background: green;
  height: 30px;
}
<div class="grid">
		<div class="popover">
			<header>header</header>
			<div class="content">
				Lollipop pudding jelly bonbon caramels. Danish pastry chocolate cake. Macaroon oat cake marzipan powder bear claw
				sweet cake jujubes. Bear claw candy croissant oat cake cookie cotton candy fruitcake halvah. Carrot cake toffee
				powder topping. Cotton candy pudding chocolate bar croissant halvah danish jelly-o. Dessert cupcake marzipan
				pastry. Candy canes wafer donut. Dragée tart chocolate bar. Chupa chups oat cake candy sweet roll halvah biscuit
				brownie pastry lemon drops. Caramels danish soufflé fruitcake tootsie roll apple pie. Lemon drops soufflé tootsie
				roll cotton candy dessert liquorice.
			</div>
			<footer>footer</footer>
		</div>
		<div class="popover">
			<header>header</header>
			<div class="content">
				Lollipop pudding jelly bonbon caramels. Danish pastry chocolate cake. Macaroon oat cake marzipan powder bear claw
				sweet cake jujubes. Bear claw candy croissant oat cake cookie cotton candy fruitcake halvah. Carrot cake toffee
				powder topping. Cotton candy pudding chocolate bar croissant halvah danish jelly-o. Dessert cupcake marzipan
				pastry. Candy canes wafer donut. Dragée tart chocolate bar. Chupa chups oat cake candy sweet roll halvah biscuit
				brownie pastry lemon drops. Caramels danish soufflé fruitcake tootsie roll apple pie. Lemon drops soufflé tootsie
				roll cotton candy dessert liquorice.
				Lollipop pudding jelly bonbon caramels. Danish pastry chocolate cake. Macaroon oat cake marzipan powder bear claw
				sweet cake jujubes. Bear claw candy croissant oat cake cookie cotton candy fruitcake halvah. Carrot cake toffee
				powder topping. Cotton candy pudding chocolate bar croissant halvah danish jelly-o. Dessert cupcake marzipan
				pastry. Candy canes wafer donut. Dragée tart chocolate bar. Chupa chups oat cake candy sweet roll halvah biscuit
				brownie pastry lemon drops. Caramels danish soufflé fruitcake tootsie roll apple pie. Lemon drops soufflé tootsie
				roll cotton candy dessert liquorice.
				Lollipop pudding jelly bonbon caramels. Danish pastry chocolate cake. Macaroon oat cake marzipan powder bear claw
				sweet cake jujubes. Bear claw candy croissant oat cake cookie cotton candy fruitcake halvah. Carrot cake toffee
				powder topping. Cotton candy pudding chocolate bar croissant halvah danish jelly-o. Dessert cupcake marzipan
				pastry. Candy canes wafer donut. Dragée tart chocolate bar. Chupa chups oat cake candy sweet roll halvah biscuit
				brownie pastry lemon drops. Caramels danish soufflé fruitcake tootsie roll apple pie. Lemon drops soufflé tootsie
				roll cotton candy dessert liquorice.
				Lollipop pudding jelly bonbon caramels. Danish pastry chocolate cake. Macaroon oat cake marzipan powder bear claw
				sweet cake jujubes. Bear claw candy croissant oat cake cookie cotton candy fruitcake halvah. Carrot cake toffee
				powder topping. Cotton candy pudding chocolate bar croissant halvah danish jelly-o. Dessert cupcake marzipan
				pastry. Candy canes wafer donut. Dragée tart chocolate bar. Chupa chups oat cake candy sweet roll halvah biscuit
				brownie pastry lemon drops. Caramels danish soufflé fruitcake tootsie roll apple pie. Lemon drops soufflé tootsie
				roll cotton candy dessert liquorice.
				Lollipop pudding jelly bonbon caramels. Danish pastry chocolate cake. Macaroon oat cake marzipan powder bear claw
				sweet cake jujubes. Bear claw candy croissant oat cake cookie cotton candy fruitcake halvah. Carrot cake toffee
				powder topping. Cotton candy pudding chocolate bar croissant halvah danish jelly-o. Dessert cupcake marzipan
				pastry. Candy canes wafer donut. Dragée tart chocolate bar. Chupa chups oat cake candy sweet roll halvah biscuit
				brownie pastry lemon drops. Caramels danish soufflé fruitcake tootsie roll apple pie. Lemon drops soufflé tootsie
				roll cotton candy dessert liquorice.
				Lollipop pudding jelly bonbon caramels. Danish pastry chocolate cake. Macaroon oat cake marzipan powder bear claw
				sweet cake jujubes. Bear claw candy croissant oat cake cookie cotton candy fruitcake halvah. Carrot cake toffee
				powder topping. Cotton candy pudding chocolate bar croissant halvah danish jelly-o. Dessert cupcake marzipan
				pastry. Candy canes wafer donut. Dragée tart chocolate bar. Chupa chups oat cake candy sweet roll halvah biscuit
				brownie pastry lemon drops. Caramels danish soufflé fruitcake tootsie roll apple pie. Lemon drops soufflé tootsie
				roll cotton candy dessert liquorice.
			</div>
			<footer>footer</footer>
		</div>
	</div>