0

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:

screenshot of current result

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.

Tim R
  • 2,622
  • 1
  • 3
  • 19
Evan Jones
  • 17
  • 2
  • This is a typo issue, `Input` should be `input`. The submit button CSS could also benefit from `right: 0;` to shift it over – Harrison Aug 11 '23 at 18:47
  • Not a fix but note that the [](https://html.spec.whatwg.org/dev/embedded-content.html#the-input-element) tag does not use and does not need a closing slash and never has in any HTML specification. – Rob Aug 12 '23 at 13:17

1 Answers1

1

In the Input field.tsx the form className should be "input" instead of "Input" (all lowercase).

CSS Classes are case-sensitive.

The file will look like this:

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;
JustKahdri
  • 29
  • 3