I am following a tutorial and have the following code in a TypeScript/React app to create an input with a submit button.
I can't figure out why the submit button is on a different line and refuses to go inside the input box.
This is what I see on my browser:
Here is my app.tsx:
import React from 'react';
import './App.css';
import InputField from './components/InputField';
const App: React.FC = () => {
return (
<div className = "App">
<span className = "heading">Taskify</span>
<InputField />
</div>
);
}
export default App;
Here is the input field tsx:
import React from 'react';
import './styles.css';
const InputField = () => {
return (
<form className = 'Input'>
<input type='input' placeholder='Enter a task' className="input__box" />
<button className="input_submit" type='submit'>Go</button>
</form>
)
};
export default InputField;
Here is the CSS for the app and the component respectively:
@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');
.App {
width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
background-color: #2f74c0;
font-family: "Neucha", cursive;
}
.heading {
text-transform: uppercase;
font-size: 40px;
margin: 30px 0;
color: white;
z-index: 1;
text-align: center;
}
@media (max-width: 800px) {
.heading {
margin: 15px 0;
font-size: 35px;
}
}
.input {
display: flex;
width: 100%;
position: relative;
align-items: center;
}
.input__box {
width: 100%;
border-radius: 50px;
padding: 20px 30px;
font-size: 25px;
border: none;
transition: 0.2s;
box-shadow: inset 0 0 5px black;
}
.input__box:focus {
box-shadow: 0 0 10px 1000px rgba(0, 0, 0, 0.5);
outline: none;
}
.input_submit {
position: absolute;
width: 50px;
height: 50px;
margin: 12px;
border-radius: 50px;
border: none;
font-size: 15px;
background-color: #2f74c0;
color: white;
transition: 0.2s all;
box-shadow: 0 0 10px black;
}
.input_submit:hover {
background-color: #388ae2;
}
.input_submit:active {
transform: scale(0.8);
box-shadow: 0 0 5px black;
}
Can someone help me get that submit button into the input box?
I also can't even get it to be on the same line horizontally, which it seems like it should be.
My understanding was that by specifying display: flex
on the parent, all the children should appear on the same line, I tried displaying the input as an inline-block
and anything else I could think of.