Tips for expanding an input to fit the width of a div without altering the dimensions of a preceding span element

Let me explain, I have a form that includes a span and an input:

<form onSubmit={e => handleSubmit(e)}>
                    <Box className='form_box'>
                        <span>
                            <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="23445646505763544641504a57460d-2334c4e">[email protected]</a>:: {'~ >>'}
                        </span>

                        <input value={user_input} onChange={e => handleChange(e.target.value)} />
                    </Box>
                </form>

.form_box{
    background-color: beige;
    color: white;
    display: flex;
    align-items: center;

    input{
        border: none;
        outline: none;
        color: black;
        background-color: white;
    }

}

I am trying to make the input element expand to the full width of its parent 'form_box' div. However, when I set width: 100%, the text in the span element in front of the input field spans across two lines, making it seem like the text is too long for the container.

To illustrate:

guest@website: ____ <- how it originally looks

guest@ __________________ <- what happens if I set the width to 100%

website

Any suggestions on a CSS solution would be greatly appreciated!

htmlcssreactjsmaterial-ui

Answer №1

To ensure the last item in the box expands to occupy the remaining space, consider using a flexbox:

    <form onSubmit={(e) => handleSubmit(e)}>
      <Box
        className="form_box"
        sx={{
          display: "flex",
          flexDirection: "row",
          // allowing the last item to fill the available space
          "& > :last-child": { flexGrow: 1 },
        }}
      >
        <span><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bddac8d8cec9fdcad8dfced4c9d893ded2d0">[email protected]</a>:: {"~ >>"}</span>

        <input
          value={user_input}
          onChange={(e) => handleChange(e.target.value)}
        />
      </Box>
    </form>

If you prefer keeping your styles in a separate file, you could do so:

.form_box {
  background-color: beige;
  color: white;
  display: flex;
  flex-direction: "row";
}

.form_box > :last-child {
  flex-grow: 1;
}

input {
  border: none;
  outline: none;
  color: black;
  background-color: white;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  width: 1000;
}

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

Facing a multitude of errors while transitioning from Material-ui version 0.10.1 to 0.17

We've encountered quite significant changes between these versions, requiring us to upgrade 40 libraries in order to update React.js. The biggest challenges seem to stem from material-ui. Unfortunately, we can't find any documentation on how to ...

reactjswebpackmaterial-ui

How to mute a particular warning in development mode with Next.js

Currently in the process of transitioning a CRA app to Next.js in order to enhance SEO. During development, I encountered the following warning: Warning: 'NaN' is an invalid value for the 'left' css style property. I am aware of the s ...

javascriptreactjsnext.js

Dependency in NextJs project - An appropriate loader may be required in order to handle this type of file, as there are currently no configured loaders to process it

I am in the process of exporting some Next.js components to a shared "commons" project that will be utilized by multiple Next.js applications. To achieve this, I updated my package.json as follows: "commons-project": "../commons-project&quo ...

webpacknext.jsmaterial-ui

Ways to Toggle div Visibility for Elements with Identical Class Names on an Individual Basis

After searching for solutions on stackoverflow, I attempted to implement some answers provided by other users, but I'm still not achieving the desired outcome. In my website's about section, there are four different items. When a specific item&a ...

javascriptjqueryhtmlcss

Prevent the display of hyperlinks in the status bar when hovering over a hyperlink or button

The application I'm working on has a default status bar at the bottom of each screen that displays URLs linked to buttons and icons. For example: https://i.stack.imgur.com/ZFTsp.jpg I am trying to prevent the display of URLs associated with hyperlin ...

javascriptjqueryhtmlhyperlinkstatusbar

Challenges related to maintaining a webpage's content using AJAX

I have a form that I want to use to send and insert the values into my database. After the values are inserted, I would like to clear the input fields of the form and display a success message. Here's an example of how I would like it to look: Clear ...

phphtmlajax

Having trouble accessing the `style` property of undefined in React Material UI?

I am attempting to create a collapsible row within another row. Essentially, I display multiple rows containing pharmaceutical drugs and want users to click on a specific row to reveal the description of that drug. Although it seemed simple at first, my c ...

reactjsmaterial-uireact-functional-component

From AJAX response to React state attribute, store the JSON data

I have a component where I need to fetch freight values via ajax and store them in the state property of this class. import React, { Component } from 'react'; import Freight from './Freight'; import CreateFreightEntryModal from '. ...

javascriptjsonajaxreactjs

Submitting forms using Jquery Mobile

Hi there! I need some assistance with a form that I have created for use with phonegap. I was initially using JavaScript to process it, but now I'm considering switching to jQuery for better functionality. My main goal is to display the "total" in a n ...

jqueryhtmlformscordova

React JS integrated with Stripe

I am in need of generating a token with Stripe.js within a React JS environment, however, I have been unable to find a straightforward solution. In a node.js setting, the process would typically look something like this: stripeClient.tokens.create({ ...

reactjsnpmstripe-paymentschild-process

Tips on utilizing the useState hook for storing numerous key objects?

Currently, I am working with a candlestick chart for a cryptocurrency that displays data over different timeframes such as 1 minute and 30 minutes. Below is the code snippet that sets the initial state to show a 1-hour chart when a user first visits: const ...

javascriptreactjsnext.js

Discover the secret to halting a CSS animation precisely on the final nth-child in CSS3

I have encountered some difficulty in stopping a crossfade animation on the last nth-child element. Although I am aware of using animation-fill-mode: forwards, implementing it in different places such as in the initial .crossfade declaration did not yield ...

htmlcssanimation

"Utilizing the 8-column layout feature in Twitter Bootstrap

Is it possible to set up 8 equal columns using the latest version of Twitter bootstrap? I know how to create 4 equal columns but I am struggling with figuring out how to achieve 8: <div class="col-sm-12"> <div class="row"> ...

htmlcsstwitter-bootstrap

Add a new row to the table when a dropdown option is selected, and remove the row when deleted. Ensure that the row is only added

Here is my specific requirement: I need a table with a default row containing a dropdown menu in the first column. When an option is selected from the dropdown, a new table row should be added with the same content as the main row and a delete button for ...

javascriptjqueryhtmlcss

Having issues with unchecking checkboxes in ReactJS

I created a task management app and I thought of improving it by displaying all completed tasks when the "Show completed tasks" box is checked. https://i.stack.imgur.com/RkXsw.png The issue I'm facing is that while checking "Show completed tasks ...

javascriptreactjscheckboxfilterfrontend

Eliminate excess space between row elements of a specific height using React JS in conjunction with Material-UI

I've been working on developing a dynamic grid system that renders components based on values in a dictionary. Only components with the value set to true are rendered, as demonstrated by the code snippet below: const sideBarCategories = [ { id: " ...

reactjsmaterial-ui

Tips for validating an email address using ReactJS

I'm currently working on customizing the email verification process for a signup form in ReactJS. My goal is to replace the default email verification with my own validation criteria. Initially, I want to ensure that the entered email address contains ...

javascriptreactjs

Center text with font awesome symbols

I'm looking for a way to vertically align text next to my FontAwesome icons without using manual padding. Is there a better method for achieving this? https://i.stack.imgur.com/PWwSJ.jpg <div class="row"> <div id="tb-testimonial" class="tes ...

htmlcssfont-awesome

Exploring Techniques for Adjusting Website to User's Screen Resolution

My website is currently designed for a screen resolution of 1024x768. However, I am aware that when viewed on computers with smaller or larger screen resolutions, the layout starts to distort. Is there a way to make the website adaptable to any user&apos ...

javascriptcsshtmlresolution

"Trouble with making jQuery AJAX calls on Internet Explorer versions 8 and 9

I've been searching for the answer to this problem without any luck. I have a page with jquery ajax calls to an API service. It works well in Chrome, Safari, Firefox, and IE 10, but fails in IE 9 and 8. Here is the code: $.ajax({ ...

javascriptjqueryhtmlajaxinternet-explorer