Having trouble aligning two divs on the same line and adjusting the controls to expand their width when there is extra space

I am currently creating an application using React and Material UI, incorporating the autocomplete control feature. Take a look at the code sandbox I have set up.

Here are some concerns:

  1. I am aiming to have two autocomplete controls displayed on the same line. Despite trying to apply inline styling with display: "inline" to the div, it seems to be overridden by the default style. How can I ensure both controls appear side by side?
  2. Once the controls are positioned on the same line, I would like them to each take up 20% of the width, totaling 40% together. As more items are added to these controls, I want them to expand horizontally until they reach 100% width collectively. Then, the controls should increase in height to accommodate additional items.
cssreactjsmaterial-ui

Answer №1

Based on what you've described, it looks like you should adjust the following:

item: {
    minWidth: "20%",

And for the main container:

 root: {
    maxWidth:'100%',
    display: "flex !important"

Answer №2

There are a few issues that need to be addressed in this code snippet:

  1. The lack of utilizing flex on both the root and items elements.
  2. The decision to use a fixed width for items instead of using maxWidth.

Take a look at this updated version which should achieve the desired outcome. I made adjustments by removing the margin rule, adding flex-grow: 1 to the items, and setting the root width to 100% rather than a specific pixel value.

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

Securing your ReactJS App API key using AWS Amplify: A step-by-step guide

Utilizing AWS Amplify for my ReactJS application has been a seamless experience in terms of backend functionality. However, I have encountered a challenge when trying to conceal certain aspects of my backend code from users. Specifically, I am looking to ...

reactjsamazon-web-servicesapibackendaws-amplify

Creating consistent row spacing between Bootstrap 5 rows that matches the spacing in Bootstrap 4

Is it possible to adjust the site.css file in order to achieve a similar row spacing effect as Bootstrap 5 when working with existing HTML code? ...

cssbootstrap-4rowsbootstrap-5

Having trouble installing the @mui/x-data-grid package in a React project

npm install @mui/x-data-grid encounters a problem that throws an error message: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" dat ...

javascriptreactjsnpmjsx

An improved method for fetching data from the server at regular intervals of x minutes

Is setInterval the best way to periodically check for updates in a database and update the UI accordingly, or are there better approaches that I should consider? I've read conflicting opinions on using setInterval for this purpose, with some sources ...

javascriptnode.jsreactjsmongodbexpress

Having trouble retrieving the component state within AgGrid's cellRenderer

When working on my React app using functional components, I encountered an issue with accessing a local state (myObj) within a cellRenderer in AgGrid. The local state is populated via a context object from the parent component based on an API response. Un ...

javascriptreactjsag-gridag-grid-reactcellrenderer

Issue with Jests export failure in Next.js/Firebase integration

I'm facing an issue while trying to run some Jest tests within my Next.js and Firebase project. Please bear with me if these tests are not up to par, as I am primarily using them for practice purposes. The issue: When running the test below, I encou ...

reactjsunit-testingnext.jsjestjsfirebase-authentication

Adjust the value of a cell in the MUI Data Grid in real-time

In the Data Grid, there are 9 columns including "Rate" and "Transfer". There is also a column labeled "Total" which should display the multiplication result of "Rate" and "Transfer", adjusting with any changes made to the "Transfer" cell value. The "Transf ...

reactjsmaterial-uimui-datatable

A guide on activating Effect in Div using just css

I have tried all the questions and answers related to this topic. Additionally, I attempted to solve related questions but was not successful. Please read my question thoroughly. What I Want: When I click on the click me Div, the second hiddendiv Div i ...

htmlcsstoggle

Automatically populating email and password fields on page reload in JSX

When I'm working on the autocomplete feature for the email and password fields on the login page, it seems to automatically populate the fields every time the page reloads. Currently, I have only finished the JSX part of the login page and haven&apos ...

htmlreactjsmaterial-uijsx

React's componentDidMount fails to trigger for jQuery AJAX request

Here is my code snippet: import React from 'react'; import {render} from 'react-dom'; class App extends React.Component { constructor(props) { super(props); this.state = { data: '' }; ...

ajaxreactjs

Is it possible to establish a CSS minimum width that is relative to a different element?

Is it possible to set the min-width of a submenu in CSS to be equal to that of the corresponding link in a navigation menu? I am using LESS for my styling. <ul> <li> <a href="">Item FooBarBaz</a> <ul class="submenu"&g ...

javascriptjqueryhtmlcss

add the closing </div> tag using jquery only

Having a slight issue here, it seems that jQuery is being overly clever. Within my HTML code, I am attempting to insert this string into a div container: </div><div class="something"> You'll notice that the closing tag comes first, foll ...

javascriptjqueryhtmlcss

Material-ui's stylish card component design

When the Card component is clicked, I want to change the color of the box-shadow. However, I am unable to achieve this using styles without a click event. The Card Component renders a Paper element with predefined styles: function getStyles(props, contex ...

material-ui

Tips for creating a clickable title that directs to a URL

I am currently using the "Import All" WordPress plugin to bring in an Excel file containing numerous hyperlinks that point to specific Custom Post Types and a designated field. These hyperlinks are separated by commas from the corresponding title. For exam ...

phphtmljquerycsswordpress

When inserting a page break after a section, it seamlessly flows to the next page during printing

When should the CSS properties page-break-after: always or before be used? I have tried various methods, such as creating different div elements for page-break, adjusting float and clear:both, but have not had any success. There are currently four section ...

htmlcssgoogle-chrome

Performing asynchronous operations in React with axios using loops

On the backend, I have a socket set up to handle continuous requests from the server. Now, my goal is to send requests to the backend API continuously until a stop button is clicked. Using a loop for this task is considered bad practice as it never checks ...

javascriptreactjsaxiosnext.jsresponse

It is not possible for Algolia SearchBox to set its value based on Hits results or customize the value

Currently, I am utilizing react-instantsearch along with SearchBox to conduct search operations. As I type in some letters within the SearchBox, the results are displayed by the Hits component. However, an issue arises when attempting to manually alter the ...

reactjsalgoliasearch-boxtypesense

The background image within Bootstrap theme layouts appears to be missing from both the styles and divs

Encountering a peculiar dilemma here. Attempted to apply a background image to a custom style in order to override/extend a bootstrap column style. Additionally, tried embedding a style directly in the div attribute. Strangely, neither method seems to be e ...

htmlcssbootstrap-4

Using React.js in combination with JWT, Socket.io for user authentication

I've been working on implementing Socket.io in React with an Express Backend that uses JWT (Passport JWT) for authentication. While my regular routes work fine with authorization handled correctly, I'm struggling to include the Bearer Token when ...

reactjsexpresssocket.iojwtpassport.js

Using React to create multiple modals and dynamically passing props

Each item in my list (ProjectActivityList) has an Edit button which, when clicked, should open a modal for editing that specific item. The modal requires an ID to identify the item being edited. var ProjectActivities = React.createClass({ onEditItem: ...

javascriptreactjssemantic-ui