You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I think every time I've seen the <EmptyState /> component used outside of the nr1-community docs, it's always extended past the vertical bounds of it's container. I think this is because the height: 100% property isn't taking into account the 16px of margin-top and margin-bottom.
Steps to Reproduce
Go drop <EmptyState /> in a nerdlet and you'll see you either have to scroll to see the bottom of it or it just extends past it's containers height.
Expected Behaviour
I expect that it would sit inside of it's container without the need for scrolling to view it nor would it extend past it's container's height. NOTE: # ( Tell us what you expected to happen. )
Possible solution
Swap out the height: 100% rule for height: calc(100% - 32px). this removes the extra 32px of height that are coming from the margin top and bottom of .empty-state. TIP: # ( Include as many relevant details about your environment as possible. )
Additional Context
NR1 CLI version used: @datanerd/nr1/1.16.1 darwin-x64 node-v10.16.3
Browser name and version: Firefox 72.0.2
Operating System and version: MacOS Catalina 10.15.2 (19C57)
The text was updated successfully, but these errors were encountered:
Description
I think every time I've seen the
<EmptyState />
component used outside of the nr1-community docs, it's always extended past the vertical bounds of it's container. I think this is because theheight: 100%
property isn't taking into account the 16px ofmargin-top
andmargin-bottom
.Steps to Reproduce
Go drop
<EmptyState />
in a nerdlet and you'll see you either have to scroll to see the bottom of it or it just extends past it's containers height.Expected Behaviour
I expect that it would sit inside of it's container without the need for scrolling to view it nor would it extend past it's container's height.
NOTE: # ( Tell us what you expected to happen. )
Possible solution
Swap out the
height: 100%
rule forheight: calc(100% - 32px)
. this removes the extra 32px of height that are coming from the margin top and bottom of.empty-state
.TIP: # ( Include as many relevant details about your environment as possible. )
Additional Context
The text was updated successfully, but these errors were encountered: