I seem to be having trouble properly sizing the width of my forms in Mui React

Having trouble with the sizing of my tabs in a project I'm working on. The first tab displays ingredients, while the second tab allows for adding new ingredients with various forms. However, when selecting different forms, the width of the form container seems to shift unpredictably - sometimes too small and off-center, other times covering the whole tab. I think setting it to a fixed size like 500px would solve this issue, but then it creates problems for mobile usage or smaller components where scrolling is necessary. Adjusting the CSS using media queries didn't quite work as expected. Any suggestions or insights would be greatly appreciated as I am not very familiar with CSS and feel lost in troubleshooting this problem. Thank you!

#formContainer {
    width: 500px;
    height:480px;
    margin-top: 20px;
}

@media only screen and (max-width: 800px) {
    #formContainer {
        max-width:fit-content;
        height:fit-content;
    }
  }

Any help or recommendations would be highly valued. Your expertise could really make a difference in solving this dilemma. Thanks again.

cssreactjsmaterial-uistyles

Answer №1

Attempting to achieve a specific layout can be a bit tricky at times. In one of my angular projects, I utilized a fixed position with a percentage value for the container.

#formContainer {
    position: fixed;
    width: 500px;
    height:480px;
    margin-top: 20px;
}

It might be beneficial to consider converting it into a class rather than an ID, especially if it will be used in multiple elements.

Additionally, maintaining your current values while incorporating max values could be helpful.

#formContainer {
    width: 500px;
    max-width: 50%;
    height: 480px;
    min-height: 50%;
    margin-top: 20px;
}

Interestingly, it appears that using min-height produces similar results as max-width. Though, I must admit that CSS is not my area of expertise, so seeking a more detailed explanation on the subject may yield better insights. I am simply navigating through the challenges of CSS like many others.

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

Having trouble aligning two divs horizontally on the same line in Bootstrap 4

I am facing an issue with my HTML code where I have two div elements that are supposed to be horizontally aligned, but the second div is appearing underneath the first one. To fix this, I tried using bootstrap classes for alignment. <div class="c ...

csstwitter-bootstrapbootstrap-4

Elevate - Adjust state based on actionable tasks

I am striving to establish a specific data flow for my project: Determine the record-id from react-router Assign this id as a state property Once this property is set, all relevant components with their own reducer and actions should retrieve data base ...

reactjsredux

Adjustable width for flexbox column

Is there a way to adjust the width of the first flex column so that it only takes up the space of its content? .flex { display: flex; } .inside { flex: 1; border: 1px solid #000; } <div class="flex"> <div class="inside inside-left"& ...

cssflexbox

How can we split the state between unique React forms that are interconnected?

My issue is that, based on the value of a prop in my form (specifically step), I need to display different forms. Everything works fine; the form loads the text programmatically as needed and fills in the form accordingly. However, when the value of step c ...

javascriptreactjsformsreduxreact-redux

Creating a dynamic CSS height for a div in Angular CLI V12 with variables

Exploring Angular development is a new venture for me, and I could use some guidance on how to achieve a variable CSS height in Angular CLI V12. Let me simplify my query by presenting it as follows: I have three boxes displayed below. Visual representatio ...

javascripthtmlcssangulartypescript

Customize the collapse direction of Mui Accordion

Currently, I have integrated the Mui Accordion component into my project. I am interested in exploring the possibility of customizing the opening direction of the Accordion. Is it feasible to have it open horizontally from the side instead of the default v ...

reactjsmaterial-uiaccordion

Adjusting the background color of a MuiList within a React Material-UI Select component

Looking to customize the background color of the MuiList in a react material-ui Select component without affecting other elements. Specifically targeting the Select element with the name 'first'. Despite setting className and trying different cl ...

javascriptreactjsmaterial-ui

Unable to implement CSS styling on the <Switch disable> element

Applying CSS styles to a <Switch disabled> element is my goal in order to achieve the following: Normal color appearance User interaction disabled I attempted to use CSS code for this purpose. Check out the demo sandbox here: https://codesandbox.i ...

reactjsmaterial-ui

Caution: React alert for utilizing the UNSAFE_componentWillReceiveProps in strict mode

As a newcomer to React, I encountered a warning that has me stuck. Despite researching extensively online, I still can't resolve it. The warning message is: https://i.stack.imgur.com/4yNsc.png Here are the relevant portions of the code in App.tsx: ...

javascriptreactjsfrontendsemantic-ui-react

A strategy for targeting the Material UI TextField with useRef hooks while a button is activated

I am encountering a similar issue as described in this Stack Overflow post, however, the solutions provided did not resolve my problem. The situation involves disabled textfields. When the edit profile button is clicked, the disabled state for the account ...

reactjsmaterial-uireact-hooks

Is there a way to deactivate the Edge mini menu while selecting text in a React application?

I have recently been working on a React web application and managed to create a specialized text selection menu. However, I am facing a challenge in programmatically disabling the default text selection mini menu in React. The image attached illustrates bo ...

javascriptreactjsmicrosoft-edge

Tips for assigning a default value when an error occurs

Currently diving into the world of React and experimenting with rendering 10 pieces of data from a specific API. After crafting a function to iterate through the fetched information, extracting the title and image has been quite the challenge: for (let ...

javascriptreactjs

Using jQuery to add or remove multiple classes at once

My navigation tabs use jQuery to add and remove classes for the active tab. However, I'm facing an issue where the active class is not removed when a new tab is clicked or when the user scrolls to a new section. Please refer to the following gist for ...

jqueryhtmlcss

Exploring Hover Effects in Reactjs and Material UI

I've been working with reactjs and material ui, but I'm having trouble changing the background color of selected items in various components, like in the SelectField. <SelectField floatingLabelText="Choose a sport" value={this.state.val ...

cssreactjsmaterial-ui

Modify anchor link color in a one-page website by using Jquery to detect scroll position changes when reaching different page sections

Each if statement contains specific numbers to change the text color of the visited/current/active anchor link. The height of the page is dependent on its width. How can this be resolved? Apologies if my explanation is confusing, English isn't my stro ...

jqueryhtmlcss

The feature to disable close on select in Material UI Autocomplete is malfunctioning

I am currently utilizing version "5.15.6" of "@mui/material". My requirement is to implement an autocomplete feature with checkboxes, allowing users to select multiple options from the dropdown menu. I have added the disableCloseOnSelect prop for this purp ...

reactjsmaterial-ui

Typescript is throwing an error stating that utilizing 'undefined' as an index type is invalid

When working with TypeScript and React, I pass xs, sm, md, lg as props to the component. Each size corresponds to a specific pixel value (14px, 16px, 18px, 24px) that is then passed to an Icon component. The errors mentioned in point (1) occur at the line ...

reactjstypescriptchakra-ui

conceal elements using the <option> class隐藏

Although it seems like a simple task, I'm struggling to make it work. I created a form where the user can select a month from a list using the tags: <select> <option> When the selection is changed, the class .gone from the day SELECT is ...

javascripthtmlcssformshtml-select

Do I have to additionally check the data type using typeof when implementing PropTypes in my code?

I have a custom method called onNotifyChange that is triggered in the onChange event of an input element. This method has been defined with a PropType of func. MyComponent.propTypes = { onNotifyChange: PropTypes.func, } When invoking the onNotifyCha ...

javascriptreactjsreact-proptypes

Differentiating a path element in SVG by dynamically adding color using d3 and react

I have a unique SVG icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <circle cx="12" cy="12" r="12" /> <path class="svg-fill" d="M12,2A10,10,0,1,0,22, ...

javascriptreactjsd3.js