Ensuring the input field and button are positioned in a horizontal line

Currently, I am developing a to-do list application using React and Chakra UI.

I am trying to align the input field and the button on the same line for a more organized layout.

This is the current layout: image

I aim to achieve a design similar to this: image

Below are snippets of my code:

App.js:

import "./App.css";
import { ChakraProvider } from "@chakra-ui/react";
import Todo from "./components/Todo";

function App() {
  return (
    <ChakraProvider>
      <div className="App">
        <Todo />
      </div>
    </ChakraProvider>
  );
}

export default App;

Todo.js:

import { Container, Box, Heading, Input, Button } from "@chakra-ui/react";
import { MdAdd } from "react-icons/md";

function Todo() {
  return (
    <Container
      maxW="4xl"
      minHeight="100vh"
      display="flex"
      alignItems="center"
      justifyContent="center"
    >
      <Box
        boxShadow="base"
        rounded="lg"
        padding={10}
        background="white"
        width="100%"
      >
        <Heading as="h1" size="md" textAlign="center">
          To-Do List Application
        </Heading>
        <Box display="flex" alignItems="center" justifyContent="space-between">
          <Input placeholder="Enter Task" marginTop={5} size="lg" />
          <Button colorScheme="blue" rightIcon={<MdAdd />} margin={0}>
            Add Task
          </Button>
        </Box>
      </Box>
    </Container>
  );
}

export default Todo;

Answer №1

To resolve the issue, try removing the top margin from the input:

                                    Here
                                     ||

 <Input placeholder="New Task" marginTop={5} size="lg" />

Answer №2

Consider adjusting the margin-top for the input; either remove it entirely or apply the same margin to both the input and button.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Javascript and Regular Expressions to separate and preserve the delimiter

I'm facing an issue with my regex that splits a string into arrays. Everything is working smoothly except for the fact that I want to retain part of the delimiter. This is the regex I am using: (&#?[a-zA-Z0-9]+;)[\s] In my JavaScript cod ...

Validation within nested Joi schemas

Need help validating a nested object conditionally based on a parent value. const schema = Joi.object({ a: Joi.string(), b: Joi.object({ c: Joi.when(Joi.ref('..a'), { is: 'foo', then: Joi.number().valid(1), otherwise: Jo ...

Filtering records in Sails.js through route parameters

As a newcomer to Sails.js, I'm delving into its capabilities and workings. My scenario involves three interconnected models through associations: Series.js -> Season.js -> and Episode.js. Series.js module.exports = { attributes: { /* ...

The importance of scope in ng-style

I am attempting to dynamically change the font color in an input field based on the value entered into that field. However, I have encountered an issue with using ng-style as it is not recognizing the value of the scope and therefore the color does not upd ...

Proper method for incorporating loading and error messages with the help of useContext and react hooks

Currently, I have a context.js file that makes an ajax call and stores the data in an array to be shared across components. While adding some 'loading ...' text during the loading process using axios, I feel there might be a better way to handle ...

React+vite application is unable to establish a WebSocket connection with a Spring Boot backend server

My React + Vite application is running on localhost:5173 port, while my Spring Boot is running on localhost:5729. Here is the code snippet from the App.jsx: import { useState } from 'react' import './App.css' function App() { const [ ...

Encountering a 'webpack compilation error' message upon starting npm

Recently, I set up node js and created a react app. However, when I attempted to start the project using npm start, I encountered an error stating 'webpack compiled with 1 error' in the terminal. Strangely, I didn't make any changes or modi ...

Learn how to utilize the getElementByClassName method in JavaScript to insert checkboxes into two lists that share the same class name

I have a situation where I have two lists sharing the same class name. I need to dynamically create checkboxes in both of these lists based on XML data. My current dilemma lies in how to properly utilize getElementByClassName in JavaScript to add checkbox ...

How can we use JavaScript to close a dropdown menu when the user clicks outside of it?

I am facing an issue with my code. I want to close the dropdown menu when clicking outside of it or on the items within the dropdown. How can I achieve this? I attempted to use addEventListener('click', myFunction) on `document` but it did not w ...

Do not exceed 3 elements in a row when using Bootstrap's col-auto class

col-auto is excellent. It effortlessly arranges items by size in a row, but I need it to strictly limit the number of items in each row to a maximum of 3. Each row should only contain between 1-3 items. <link rel="stylesheet" href="https://cdn.jsdeli ...

Implementing a sticky header for tables using Bootstrap

I'm experiencing a conflict because the header remains fixed only when I include the table-responsive class in my code. However, I also need the table to have overflow. Can anyone provide assistance with this issue? Using the table-responsive class ...

refers to the spacing between elements

I currently have 4 nested divs. My goal is to ensure that the margins between each div are equal, maintaining the same distance from the left edge of the parent div to the first nested div, between each pair of nested div, and from the last nested div to t ...

Managing errors in Node.js when inserting data into MongoDB

Hello everyone, I'm currently working on handling errors in the user signup module using Express. However, I'm facing an issue where the errors are not being handled correctly. Here is my code: handler.post(async (req, res) => { let otp = M ...

Collaborating and monitoring data between controllers

A unique challenge has arisen as we implement a tree-style navigation element that must communicate with other directives/controllers. The main objectives are: Keep track of the current selection, Detect when the row selection changes. The task at hand ...

Is there a way to set the background of the first sibling element to blue, but change it when another sibling element is hovered over?

I have a list of names: <div>Timothy Gruns</div> <div>Lawrence Fishly</div> <div>Jackson Crolya</div> What I want is for the background color to change to blue when any name is hovered over. However, if no names are be ...

Using Node.js to send instructions to an HTTP server in order to highlight or add color to specific elements within

I have set up a server that receives data from a gaze sensor, as well as an HTTP server that serves an HTML page. I am looking for a way to dynamically highlight elements in the HTML based on the incoming data. Any suggestions on what resources or techniqu ...

Can the performance of a system be impacted by node.js cron?

I am looking to incorporate a cron module (such as later or node-cron) into my node server for job scheduling. The jobs in question involve sending notifications (e.g., email) to remind users to update their profile picture if they haven't done so wit ...

React: Implement a feature to execute a function only after the user finishes typing

Currently, I am using react-select with an asynchronous create table and have integrated it into a Netsuite custom page. A issue I am facing is that I would like the getAsyncOptions function to only trigger when the user stops typing. The problem right now ...

Exploring nested components traversal in React

In my project, I have created a product component that displays the products' name, price, and description. const Product = (props) =>{ return( <div> <p>Price: {props.price} </p> <p>Name: ...

Guide on integrating Socket.io into Next.js App Router

Struggling with Implementing Nextjs 13 App Router and Socket.io I've replicated everything, but I'm facing an issue with the socketio.ts file Check out the code on codesandbox.io socketio.ts File: import { NextApiRequest } from "next" ...