I've tried everything I can think of, and it just won't work. Still a beginner, so please bear with me on this. It's a chat website, and I'm trying to align the input to the bottom of the chatbox. I've tried "float: bottom;", which is invalid. I've tried to vertically align it to the bottom like some posts I read suggested, but that wouldn't work either. I'm stumped, so help would be appriciated.
chat.view.tsx:
import { Message } from "./services/history.service";
export const ChatMessage = ({ username, text }: Message) => (
<div>
<b>{username}: </b>
<span>{text}</span>
</div>
);
export const ChatControlls = () => (
<div float="bottom" className="message-box">
<input placeholder="User" id="user-input" />
<input placeholder="Message" id="message-input" />
</div>
);
interface ChatProps {
messages: Message[];
}
export const Chat = ({ messages }: ChatProps) => (
<div className="chat">
<div className="container">
{messages.map((message, i) => (
<ChatMessage key={i} {...message} />
))}
</div>
<ChatControlls />
</div>
);
index.CSS:
max-height: 1080px;
min-height: 640px;
max-width: 1920px;
background-color: #daf4ff;
border-radius: 1rem;
border: 5px solid #444444;
vertical-align: bottom;
}
.chat .container {
overflow: overlay;
vertical-align: bottom;
}
input {
margin: 0;
max-width: 1920px;
flex: 1 0 auto;
outline: 0;
text-align: left;
line-height: 1.21428571em;
font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
padding: 0.67857143em 1em;
background: #fff;
border: 1px solid rgba(34, 36, 38, 0.15);
color: rgba(0, 0, 0, 0.87);
border-radius: 0.28571429rem;
vertical-align: bottom;
}
/* Message Box Crap */
.message-box {
display: grid;
grid-template-columns: 125px 2fr 70px;
vertical-align: bottom;
}
.message-box input:first-child {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-color: transparent;
border-top-left-radius: 0 !important;
border-top-color: rgba(34, 36, 38, 0.15);
}
/* button styling */
.btn {
padding: 1em 2.1em 1.1em;
border-radius: 3px;
margin: 8px 8px 8px 8px;
color: #fbdedb;
background-color: #fbdedb;
display: inline-block;
background: #e74c3c;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
font-family: sans-serif;
font-weight: 800;
font-size: 0.85em;
text-transform: uppercase;
text-align: center;
text-decoration: none;
-webkit-box-shadow: 0em -0.3rem 0em rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0em -0.3rem 0em rgba(0, 0, 0, 0.1) inset;
box-shadow: 0em -0.3rem 0em rgba(0, 0, 0, 0.1) inset;
position: relative;
}
.btn:hover,
.btn:focus {
opacity: 0.8;
}
.btn:active {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
.btn.block {
display: block !important;
}
.btn.circular {
border-radius: 50em !important;
}
/* Colours */
.red {
background-color: #d55050;
}
.teal {
background-color: #50d5a1;
}
.sky {
background-color: #6698cb;
}
.black {
background-color: #5c6166;
}
.gray {
color: black;
background-color: #d2d2d2;
}
.orange {
background-color: #e96633;
}
.pink {
background-color: #cb99c5;
}
.green {
background-color: #5bbd72;
}
.blue {
background-color: #7abedf;
}
.yellow {
background-color: #ecc92b;
}
.purple {
background-color: #564f8a;
}
/* body style*/
body {
background-color: #444444;
}
Thanks!
