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

What could be causing the .hover function to malfunction and how can I make it so that the .hover function only applies within the corner radius area?

I am attempting to make circles react to my jquery .hover function. Below is the JavaScript code I am using: jQuery.fn.center = function () { this.css("position","absolute"); this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) + ...

javascriptjquerycssjquery-hover

A step-by-step guide to building a sequential notification system using React and the latest version of Material UI with Javascript

I'm working on creating a reusable component for Material UI v5 SnackbarAlert logic. I came across a recently answered similar question, but my project is using JavaScript. I've tried adapting the code to JavaScript, but I'm facing issues w ...

reactjsmaterial-uialertsnackbar

Using a HTML value as an argument in a React component

Can someone help me figure out how to pass an HTML value as a parameter for my function? Here is the code snippet I have: <input type ="text" placeholder="Smart Contract Bytecode" name="name" id ="scbytecode" className="nice-textbox"/> <button i ...

htmlreactjsparameters

Challenges faced when using an array of objects interface in Typescript

I have initialized an array named state in my component's componentDidMount lifecycle hook as shown below: state{ array:[{a:0,b:0},{a:1,b:1},{a:2,b:2}] } However, whenever I try to access it, I encounter the following error message: Prop ...

reactjstypescript

Guide to developing a React package incorporating customized environment variables

I am currently in the process of developing an NPM package with React. This package is designed to make API queries and display the responses on a web page. Since I anticipate that multiple applications will be utilizing this package, each requiring a dif ...

reactjsnpmpackageenvironment-variables

React Table Pagination Bug with Material UI Library

I am currently using Material UI and referencing the table sample provided at https://material-ui.com/demos/tables/. However, when attempting to implement the Custom Table Pagination Action according to the sample, I encountered an error. The error "inher ...

javascriptreactjspaginationmaterial-ui

Do I have to cram all the content onto a single page just to use a scroll effect?

I'm currently facing a dilemma as I work on building my portfolio. My goal is to primarily use html5 and css3, along with a bit of js, jquery, and other tools if necessary. Although I am not an expert in web development, I wanted to push myself to cre ...

javascripthtmlcssscroll

Leveraging the Recyclability Aspect of a ReactJS Modal

Looking for a way to make a modal dynamic without duplicating too much code. Any suggestions on how to achieve this? I've managed to separate the state from the layout using render props. interface State { open: boolean; } interface InjectedMod ...

javascriptreactjstypescriptreusability

How come the max-width property is not functioning properly on tables in Internet Explorer 7?

Is there a reason why the "max-width" property does not seem to have any effect on tables in Internet Explorer 7? While it works fine on other elements, when applied to a table, the max-width rule is completely ignored. <!DOCTYPE html PUBLIC "-//W3C//D ...

htmlcsshtml-table

The MaterialTable is unable to display any data

After calling the fetch function in the useEffect, my getUsers function does not populate the data variable. I am unable to see rows of data in the MaterialTable as the data structure is in columns. I need help figuring out what I'm doing wrong. func ...

javascriptreactjsmaterial-uimaterial-table

Retrieve the data stored in an array of objects

code props.thumbnails.forEach(value=>{ console.log(value.photo.thumbnail_url); }) error TypeError: Cannot read property 'thumbnail_url' of undefined Trying to loop through props.thumbnails array and access the thumbnail_url pro ...

javascriptreactjsforeachjsx

Choosing the correct key and handling parsing errors

As I work on converting a class component to TypeScript, I encountered an error while trying to implement one of my onChange methods. The error message stated: "Argument of type '{ [x: number]: any; }' is not assignable to parameter of type &ap ...

reactjstypescripttsx

CSS styling failing to meet desired expectations

Two different elements from different panels are using the same CSS styles, but one displays the desired text while the other does not. The CSS file in question is named grid.css. To see the issue firsthand on my live website, please visit: I am uncertai ...

javascripthtmlcss

Eliminating the bottom border of all buttons, except for the last three buttons in the list, solely using pure JavaScript, unless alternative methods are available

I have 3 sets of buttons, with each set containing 9 buttons stacked in 3 columns inside an ordered list (ol) within list items (li). I have removed the bottom border of the buttons to avoid double borders since they are stacked on top of each other withou ...

javascripthtmlcss

Modifying Margin and Spacing for Selections in Radio Buttons

I have successfully implemented the code for a radio button, and everything is working as expected div > label { margin-right: 80px !important; box-shadow: .3rem .3rem .6rem #c8d0e7, -.2rem -.2rem .5rem #FFFFFF; position: relative; ...

htmlcss

The horizontal scrollbar in Chrome is unexpectedly activated, despite elements being set to occupy the full screen width (100vw) using Tailwind and NextJS 13.4+

It took some time to identify the root cause of this issue within a larger project. Hopefully, this Question and Answer will be beneficial to someone else. Here is the scenario -- in a NextJS/Tailwind project, there is only one large vertical element on t ...

cssnext.jstailwind-css

What can be done to prevent divs from overlapping? They display properly on a computer browser, but not on mobile devices like phones or tablets

Recently, I took on the task of creating an eBay template for someone. With some assistance and a bit of trial and error, I managed to get it working, albeit with what I like to call "not-so-great" code. However, there is one issue that arises when viewing ...

androidjquerycsshtml

Error: Unable to access the 'version' property of null

Having trouble installing any software on my computer, I've attempted various solutions suggested here but none have been successful. $ npm install axios npm ERR! Cannot read property '**version**' of null npm ERR! A complete log of this ru ...

javascripthtmlnode.jsreactjsnpm

I am having trouble running my project locally using npm start

Recently, I began working with ReactJS. However, I encountered an issue when trying to start the server using npm start. It seems that the start script is missing from package.json. I added the start script to the scripts section and attempted npm start, b ...

node.jsreactjsnpm

Encountering an ERR! message of missing script when trying to run the <npm start> command

Each time I attempt to run npm start, the frustrating "npm ERR! missing script: start" error appears. I have exhaustively attempted to modify the "start" line in the package.json file following all available suggestions on Google dating back a year. In a ...

reactjsnpmnpm-scripts