A common challenge in React is aligning the button and input line on the same level

I'm currently working on a React page where I have an input field and a button. My goal is to align the bottom edge of the button with the bottom line of the input. Here's the code snippet I have:

`<form className='button-container'>
            <input
              variant="outlined"
              className="bankTransSearch"
            />
            <button variant="outlined" className="bankTransSearchButton">Search</button>
            </form>`

 `.button-container {
    display: flex;
    flex-direction: row;
    }
  .bankTransSearch {
      width: 1%;
      height: 10px;
 
    }
   ` .bankTransSearchButton {
    background-color: #3f51b5 !important; 
    color: white !important;
    width: 40%;
  `
}`

Currently, the button appears larger than expected and its bottom edge is not aligned with the input. Can someone please assist me in fixing this issue? Thank you!

I've tried modifying the search bar and form styles, but haven't had much success.

javascriptcssreactjs

Answer №1

Modify CSS styles:

In React component file:

<form className='search-container'>
  <input
    variant="outlined"
    className="transactionSearch"
    placeholder="Search Transactions"
  />
  <button className="searchButton">Search</button>
</form>

In the css file linked to the above React code:

.search-container {
  display: flex;
  align-items: center;
}

.transactionSearch {
  flex: 1;
  margin-right: 5px;
}

.searchButton {
  background-color: #3f51b5;
  color: white;
  border: none;
  padding: 10px 20px; /* adjust padding as needed */
}

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

Creating TypeScript domain objects from JSON data received from a server within an Angular app

I am facing a common challenge in Angular / Typescript / JavaScript. I have created a simple class with fields and methods: class Rectangle { width: number; height: number; area(): number { return this.width * this.height; } } Next, I have a ...

javascriptangulartypescript

Ways to align a button in the center using Material-UI

I'm struggling to find a way to center buttons in Material-UI. Here is the code snippet I currently have: function BigCard(props) { const { classes } = props; return ( <div> <Card className={classes.card}> <C ...

cssreactjsbuttonmaterial-uialignment

What is the best way to cache node_modules when package.json remains unchanged during yarn or npm install within a Docker build process?

A Dockerfile for a node application is structured as follows: FROM node:8.3 ENV TERM=xterm-color NPM_CONFIG_LOGLEVEL=warn PATH="$PATH:/usr/src/app/node_modules/.bin/" WORKDIR /usr/src/app ADD . /usr/src/app RUN yarn install --frozen-lockfile --ignore-plat ...

javascriptnode.jsnpmdockerfileyarnpkg

Animating elements within Firefox can sometimes cause adjacent elements to shift positions

Currently, I am working on a single-page website that utilizes keyboard-controlled scrolling. To achieve the desired scroll effect, I have developed a JavaScript function that animates divs. Here is the JavaScript code: var current_page = "#first"; func ...

javascriptjquerycss

Is it necessary to mark all checkboxes in the initial column of the gridview?

I have encountered an issue with my code that checks all checkboxes in the first column of a gridview. It seems to work only for Internet Explorer versions 5.0 to 8.0, but gives a Javascript error when running on IE 9 and above stating "Function Expected ...

javascriptjqueryhtmlasp.netgridview

Exploring Angular 2 Tabs: Navigating Through Child Components

Recently, I've been experimenting with trying to access the HTML elements within tabs components using an example from the Angular 2 docs. You can view the example here. Here is a snippet of my implementation: import {Component, ElementRef, Inj ...

javascripthtmltypescriptangularangular2-template

A more efficient way to have Vue import files from the assets folder rather than manually inserting script tags into the index.html file

I have a simple structure and would like to utilize assets from cdnjs.com in my project. The issue arises when I try to import these assets from src/assets/lib instead of directly from the CDN. For example, importing jQuery like this: Main.js: import &a ...

javascriptvue.jsimportcdnvue-cli

How to retrieve the input value in React Autosuggest

I recently began my journey into learning JavaScript and React. Currently, I am working on creating a simple table with material design. The goal is to be able to add rows to the table through a form popup and delete rows using an icon within each row. On ...

javascriptreactjsmaterial-ui

Encountering an undefined response in API call using Fetch with Express Nuxt

I've hit a roadblock with a task involving Express, API, and Fetch. I'm utilizing Nuxt along with Shopify API endpoints to retrieve data such as orders. Below is my express API Endpoint which should return an array of objects (orders). const bod ...

javascriptapiexpressnuxt.js

Troubleshooting problem with Z-Index conflict in Flash animation

I am facing an issue with two HTML divs - one containing a flash movie and the other simple text. I want to place the textual div on top of the flash movie div, but no matter how I set their positions in CSS or adjust their Z-Index values, the text keeps ...

javascripthtmlcssflashxhtml

Encountering an issue while trying to add a search feature. The error message reads: "Failed to cast value 'search' to ObjectId (type string) at path '_id' for model 'Post'."

Hello everyone! I am quite new to web development and have been following a MERN project tutorial on YouTube. I am currently working on implementing a search functionality for posts. These posts are stored in MongoDB. However, when I try to insert a title ...

node.jsreactjsmongodbmongooseaxios

Is it required to double click checkboxes to uncheck them?

My checkboxes require 2 clicks to be unchecked, even though one click is enough to check them. This issue occurs in all 7 checkboxes and there is no onchange() function or similar in TS. import { Component, OnInit, Inject } from '@angular/core&apos ...

htmlcssangular

Interactive Div that Adapts

Hello everyone, I'm new to this forum and seeking some assistance. I have a requirement where multiple div contents need to fade in and out dynamically. I found this jsfiddle example that works for 2 divs, but I want it to work for more, say 5 differ ...

javascriptjqueryhtml

Challenges encountered when assigning values in a form with Material UI, Formik, and Typescript

When attempting to set the 'role' and 'active' values on a form, I encountered a couple of issues. The first problem arises from the fact that the selectors' original values are not being properly set. These values are fetched in ...

reactjstypescriptmaterial-uiformikyup

The information within the ajax request remains static

I made changes to my ajax data, saved it and even double-checked the file location. However, the old version is still appearing as if it's cached. Here is the original code: function setMessages(roomId, username, message){ $.ajax({ type: ...

javascriptjqueryajax

Utilizing jQuery to incorporate a radio input function in a POST request

When the Index.php page button is pressed, data is sent to the Resultx.php script page, which then responds with an asynchronous call back on the same Index.php page. index.php <script> $(document).ready(function() { $("#input_form").subm ...

javascriptphphtmljqueryjquery-events

Having trouble accessing variable values within the nth-child selector in JavaScript

I am attempting to utilize the value of a variable within the element selector p:nth-child(0). Instead of hardcoding the number as 0, I want to dynamically assign the value of a variable. In this case, the variable is represented by i in a for loop. Howev ...

javascriptnode.jscheerio

Sending blank AJAX data to a PHP function

I am facing a challenge where I need to utilize AJAX to send the ID of an element and a specific value (1,2,3) to a PHP document for validation. Despite successfully logging both values in the console, the PHP file always returns that the data is empty. ...

javascriptphpjqueryajax

The SrollToTop function is ineffective when used with a component in Ionic 6/Angular

Recently, I implemented a fabbutton feature that allows users to scroll to the top of a page with just one click. Initially, I tested this functionality without using it as a component, and everything worked perfectly. However, now I want to turn this fabb ...

javascripthtmlangulartypescriptionic-framework

Managing JSON data retrieval and manipulation techniques

My code is set up to display the image, title, and summary for all entries in a JSON file. However, I only want to display the image, title, and summary for the first entry, and only show the title for the rest of the entries. Please advise. <html> ...

javascriptjqueryhtmlajaxjson