Push elements down to fill up remaining vertical space

by

quick rundown of code before I ask question (Im using Material UI in react)

this is a container that should just hold chat messages

const ChatContainer = ({ chatMessages }) => {
  const classes = useStyles();

  return (
    <Paper className={classes.chatContainer}>
      {chatMessages.map((msg) => (
        <ChatMessage key={msg.id} author={msg.author} content={msg.content} />
      ))}
    </Paper>
  );
};

export default ChatContainer;

this is a component to send things in this case a chat message

const SendInput = ({ label, onSubmit }) => {
  const [inputValue, setInputValue] = useState("");
  const classes = useStyles();

  const handleChange = (e) => setInputValue(e.target.value);

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(inputValue);
    setInputValue("");
  };

  return (
    <form onSubmit={(e) => handleSubmit(e)}>
      <TextField
        label={label}
        placeholder={label}
        variant="outlined"
        value={inputValue}
        onChange={handleChange}
        fullWidth
        InputProps={{
          endAdornment: (
            <>
              <Divider orientation="vertical" className={classes.divider} />
              <IconButton type="submit">
                <SendIcon color="primary" />
              </IconButton>
            </>
          ),
        }}
      />
    </form>
  );
};

export default SendInput;

this is how im rendering them together

    <Box>
      <ChatContainer chatMessages={chatMsgs} />
      <SendInput label="Send message" onSubmit={handleSubmit} />
    </Box

here is what the screen looks like https://gyazo.com/d96744d356ceef81aa06345f0f0c2304

what I want is the ChatContainer to fill up the whitespace and push the input to the bottom of the screen. any help would be appreciated thx

19 thoughts on “Push elements down to fill up remaining vertical space”

  9. 817182 583452An fascinating discussion is worth comment. I think which you should write far more on this topic, it may possibly not be a taboo topic but generally folks are not enough to speak on such topics. Towards the next. Cheers 228868

    Reply

  19. 119200 739828Hey There. I discovered your blog using msn. That can be a extremely smartly written write-up. I will make positive to bookmark it and come back to read much more of your valuable details. Thanks for the post. I will undoubtedly return. 899476

    Reply

Leave a Comment