grommet-designer
grommet-designer copied to clipboard
Looks great in designer - not in CodePen...
Expected Behavior
edit: here's the published design: https://designer.grommet.io/deny?id=Demo-1-allen-joslin-gmail-com
I expect the display to be the same in my usage as it worked in the Designer tool -- screenshot of the Designer Tool included in this issue
Actual Behavior
The items pinned to the bottom in the Designer did not pin in my usage or the codesandbox (which I can't figure out how to share, so I am pasting the code copied from the codesandbox here below
URL, screen shot, or Codepen exhibiting the issue
import React, { Component } from "react";
import { render } from "react-dom";
import { grommet, Box, Heading, Grommet, Text, TextInput } from "grommet";
class App extends Component {
render() {
return (
<Grommet theme={grommet}>
<Box
fill="vertical"
overflow="auto"
align="center"
flex="grow"
direction="column"
justify="between"
>
<Box align="center" justify="center" gap="medium">
<Box align="center" justify="start">
<Box align="center" justify="center">
<Heading>My Demo</Heading>
</Box>
<Box align="center" justify="center">
<Text>Share this demo code with</Text>
<Text>someone else to begin</Text>
</Box>
</Box>
<Box align="center" justify="start" gap="large">
<Box align="center" justify="center" gap="small">
<Text weight="bold">Your Demo Code: 232323</Text>
<Text>Or Enter Their Demo Code:</Text>
<TextInput placeholder="their demo code" />
</Box>
<Box align="center" justify="center">
<Text weight="bold">Or To Join via QR Code:</Text>
<Box align="center" justify="center" />
</Box>
</Box>
</Box>
<Box align="center" justify="end" gap="small">
<Text
textAlign="center"
size="small"
margin={{ left: "medium", right: "medium" }}
>
This demo will walk two people through a \ session in which the
Business requests the status of a Customer.
</Text>
<Text
textAlign="center"
size="small"
margin={{ left: "medium", right: "medium" }}
>
When two people are connected to this demo it will proceed to role
selection.
</Text>
</Box>
</Box>
</Grommet>
);
}
}
render(<App />, document.getElementById("root"));