Change subapp style to keep its header fixed on the screen.
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
8b57732722
commit
aef455c989
2 changed files with 29 additions and 0 deletions
|
@ -500,6 +500,28 @@ export function DemoApp()
|
||||||
<button onClick={easySubapp}>
|
<button onClick={easySubapp}>
|
||||||
Easy with callable subapp
|
Easy with callable subapp
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
<button onClick={() => {
|
||||||
|
subapps.open(
|
||||||
|
<Subapp title={"Very long subapp"}>
|
||||||
|
<Card><p>A test content.</p></Card>
|
||||||
|
<Card><p>A test content.</p></Card>
|
||||||
|
<Card><p>A test content.</p></Card>
|
||||||
|
<Card><p>A test content.</p></Card>
|
||||||
|
<Card><p>A test content.</p></Card>
|
||||||
|
<Card><p>A test content.</p></Card>
|
||||||
|
<Card><p>A test content.</p></Card>
|
||||||
|
<Card><p>A test content.</p></Card>
|
||||||
|
<Card><p>A test content.</p></Card>
|
||||||
|
<Card><p>A test content.</p></Card>
|
||||||
|
<Card><p>A test content.</p></Card>
|
||||||
|
<Card><p>A test content.</p></Card>
|
||||||
|
<Card><p>A test content.</p></Card>
|
||||||
|
<Card><p>A test content.</p></Card>
|
||||||
|
</Subapp>
|
||||||
|
)
|
||||||
|
}}>A long subapp
|
||||||
|
</button>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<h3>Modals</h3>
|
<h3>Modals</h3>
|
||||||
|
|
|
@ -7,6 +7,9 @@
|
||||||
top: @subapp-margin;
|
top: @subapp-margin;
|
||||||
left: @subapp-margin;
|
left: @subapp-margin;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
width: calc(100% - (2 * @subapp-margin));
|
width: calc(100% - (2 * @subapp-margin));
|
||||||
height: calc(100% - (2 * @subapp-margin));
|
height: calc(100% - (2 * @subapp-margin));
|
||||||
border-radius: 0.25em;
|
border-radius: 0.25em;
|
||||||
|
@ -64,6 +67,10 @@
|
||||||
|
|
||||||
> main
|
> main
|
||||||
{
|
{
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
|
|
||||||
|
overflow: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue