Have you experimented with creating webpages using react.js along with the Material UI library? How can I adjust the size of an SVG icon? Recently, I developed a "create new" component, which consists of a material paper element with an add button on top. ...
I am encountering an issue with Material Dialog when confirming the action to "remove row" in a table. Initially, removing from the dialog works fine and deletes a row. However, after closing the dialog and re-calling it for the second time, the removal ac ...
Is there a way to turn off the animation for Material UI expansion panels in React? I'm trying to disable all animations on the panel. Any tips on how to achieve this? I attempted to overwrite the transitions, but it didn't work as expected. How would you ...
After successfully creating a theme for my project using createTheme, I find myself wondering how to efficiently use that same theme for future projects without having to constantly copy it over. Upon reaching out to the Mui team with this question, their ...
Hello, I have a question regarding the bottom bar on my website. You can see it here: https://i.stack.imgur.com/gaayc.png The library I am using is com.roughike:bottom-bar:1.4.0.1. However, I am facing an issue: Some titles on the bottom bar are not bei ...
Hey there! I'm facing a simple issue with my React app that I just can't seem to figure out. As a beginner, I'm struggling to get the drawer in my appbar to open. Despite checking the console, I couldn't find any errors. Any help from you guys would be g ...
Currently experimenting with material-ui-next (branch next also known as v1) for a ReactJS web application. Encountered some challenges when trying to set the default color for a Typography component within an AppBar. I've established this specific m ...
Currently, I am utilizing Materialize CSS for the design of my website and incorporating AngularJS to enhance its flexibility. However, I have encountered some issues with certain properties of Materialize (such as Select, date-picker, radio-button) not wo ...
While I am able to programmatically create a standard button and textview, I'm finding the documentation for Material design components to be lacking. Can anyone provide guidance on how to dynamically create a Material Button (and other Material Desig ...
Whenever a window scroll is visible on any page, opening the material-ui dialog control hides the scroll and causes the page to shake as it adjusts its width and height. Upon closing the dialog, the scroll reappears, causing the page to shake once again. I ...
I am having trouble with the file uploader from Material-UI. It doesn't seem to be working properly when I try to select a file. Does anyone have any suggestions on how to handle the input from the file selector? <FlatButton icon={< ...
I'm interested in incorporating a drawer similar to the one shown in this image into my Flutter app: View Image Currently, I am using NavigationRail and have read that it is possible to add a menu button to open a navigation drawer. Can anyone provid ...
I'm attempting to create an autocomplete feature that displays the firstName and lastName of a user on the first line and their id on the second. Here is my current implementation: <Autocomplete freeSolo disableClearable options ...
My Angular 7 application includes a Material Design form with input text fields, and I have not implemented any autocomplete feature within the code. Despite deleting all navigation data from my Chrome browser, I am still experiencing autocomplete suggesti ...
Can someone explain how to target the 'element' when the root is selected? Here is the makeStyles code snippet: const useStyles = makeStyles(theme => ({ root:{ '&.selected': { } }, element: { } }) And here is the JSX code: ...
While attempting to add a new color palette to my MUI Theme, I encountered a type error as shown in the image below: https://i.stack.imgur.com/Y3pwg.png Can anyone provide assistance or offer a hint on how to resolve this issue? ...
I'm currently using MUI v5 in my project and I am encountering some challenges while attempting to style a Drawer component with a black background color. As this update is relatively new, I have not been able to find much information on customizing the ...
I have implemented a Material Design (MDL) card to showcase numeric values in the title. However, I am facing an issue where the values are left aligned by default and I want them to be right aligned. Despite trying various styles, they are being ignored ...
I am brand new to Angular 4 using Material Design 2. I have a simple inquiry regarding this topic. My code is in app.component.html, which displays a few mat-card components. When clicking on any link inside the mat-card component, it should switch the e ...
I am looking to change the color of the asterisk in my form fields from black to red. I am currently using the Material UI React library and need some guidance on how to achieve this. You can view the code here: https://codesandbox.io/s/r7lq1jnjl4 For mo ...
I'm currently working with a nested Grid system in Material UI, but the Grid items are only occupying a fixed width and leaving some empty space. The issue arises when this fixed space is used up and instead of adjusting their internal free space, the ...
How can I customize the default Text Color in my Material UI Theme? Using primary, secondary, and error settings are effective const styles = { a: 'red', b: 'green', ... }; createMuiTheme({ palette: { primary: { ...
I am working with a few radio input components that have been imported from material Ui react. Each radio input is wrapped in a FormControlLabel component. <FormControlLabel onClick={checkAnswerHandler} value={answer} control={<Radio color=&quo ...
I'm facing an issue with my materialize footer's text disappearing when I set the height to 35px. Whenever I decrease the size of the footer, the text goes off the screen. How can I adjust it so that it stays visible? <footer style="position:fixed;bo ...
I'm looking to develop a scrolling grid with card tiles similar to Google Plus that has three columns. I am currently using Material UI, but I can't seem to find the right functionality for this. I have experimented with the standard Material UI ...
How can I bring this icon closer to the text? I'm not sure how to do it. When I enter developer mode, it shows me this. https://i.stack.imgur.com/WzhB1.png I am uncertain about what the purplish stuff indicates. My objective is to move the icon to the up ...
I am having trouble customizing the default style of this component : https://material.angular.io/components/component/select It contains various classes such as .mat-select-placeholder, .mat-select-value However, I cannot find any information in thei ...
I currently have a NavigationBar on my app that consists of 3 tabs. I am looking for a way to switch the active tab or destination when a button is pressed. The Navigation Bar setup in the Home class: body:IndexedStack( index: currentPageIndex, ...
In my application built with NextJS and styled with MaterialCSS, I have created two themes: a dark theme and a light theme using the following code: import { createTheme } from '@mui/material/styles'; export const darkTheme = createTheme({ pal ...
If we want to customize the theme in material-ui, we can do so by following these steps. import { createMuiTheme } from '@material-ui/core/styles'; const theme = createMuiTheme({ palette: { primary: { main: '#ff4400' }, secondary: { ...
While I have a good grasp on the fundamentals of MUI's createTheme and modifying default component styles like Typography, I'm not sure how to target specific classNames. Specifically, I'm looking to create themes exclusively for certain Typ ...
One of the new custom colors I've added to the palette is blue: const rawTheme = createMuiTheme({ palette: { primary: { light: '#7ED321', main: '#417505', dark: '#2B5101', contrastText: &apo ...
I am experiencing a problem with printing a long report created using md-list displayed in a md-dialog. When I attempt to print it, only the section that is currently visible on the screen gets printed instead of the entire length of the md-list. I have at ...
It's puzzling why Popovers are set to have an invisible backdrop by default, with no apparent way to change it. Is there a key concept in Material Design that I'm overlooking? Should I raise this concern as an issue? <Modal container={containe ...
Recently, I integrated MDL into my Angular project. While most of it is functioning properly, the MDL icons seem to be giving me trouble... I've implemented them using <i class="material-icons">share</i>, but instead of displaying as an icon, ...
Our team has developed a custom npm package that enhances the functionality of React Material buttons to make them compatible with multiple applications. As an example, let's say our npm package is named custom-npm-package import React from 'rea ...
Have a question for you, Currently, I'm utilizing React's material UI Text Field component, When I iterate through the text field from a dynamic array and update the default value sourced from that same array, the default value ends up includin ...
There used to be 5 tabs on the website - Overview, Specs, Guidelines, Implementation, and Accessibility. However, now there are only 4 tabs. I can't seem to locate the implementation tab in the updated design of the website. Where did it go? https:/ ...
Currently, I have a series of checkboxes that are displayed sequentially on the page. <div class="myCheck"> <h5>Here's what you've selected so far</h5> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect ...
When working with Material UI code for creating a sticky header and vertical scroll, I encountered an issue while trying to implement horizontal scrolling as well. Despite attempting to use overflowX: "auto" and scroll on paper, the functionality did not w ...
I am new to working with material UI and I am having trouble figuring out how to add columns in the table header. The image below shows what I am trying to achieve - under "Economics", there should be 3 columns, each of which will then have two more column ...
I have created a Data Grid table with 10 columns. It displays perfectly on large screens, but when the screen size is reduced below 1380 px, instead of having a smooth horizontal scroll bar, it looks messy. Instead of changing to a different library, I am ...
Once I've installed the material-design-icons package using npm, how can I incorporate them into my React application? The instructions provided here do not mention the npm method. ...
How come the customTheme I've created is not being applied to my buttons in MUI 5? Can someone please spot where I'm going wrong and suggest a solution? import React from 'react'; import NavBar from './components/NavBar'; imp ...
Currently in the process of designing a website using Material-UI's drawer component. It is functioning as intended, directing me to the correct pages when I click on the Drawer Items. However, I am looking for a way to highlight the individual Drawer ...
My goal is to achieve something similar to this: Desired Live Website I am looking for a feature where clicking on the div will slide in content from the right, load an external page inside it, and close when prompted. The slider div should be device c ...
New to coding and need some guidance. I'm attempting to create a card that is not the full width of the window. I have specified a cardStyle as shown below. cardStyle:{ width: '95vw' align? : 'center?' textAlign? : 'default or left or somethi ...
I need assistance with: angular / material / datepicker. My test project is running smoothly and consists of the following files: /src/app/app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from ' ...
I'm attempting to create a dialog with a form that pops up when the user clicks a button. I followed the example on the Material-UI Dialog site for creating a button to open the dialog and adding a TextField within it. This is being done using Meteor and R ...
I'm having trouble changing the color of an active input field. I want to customize it with my theme's primary color, but I can't figure out how to do it. I've tried adjusting the color attribute in various components like FormControl, ...
I am puzzled by why the app:hideOnScroll="true" attribute is not functioning as expected in my scenario, where I intend for my BottomAppBar to disappear when scrolling. My goal is to achieve a behavior similar to what is shown in this video: Hide bottom ap ...
I am currently working on an app design that includes 3 flat buttons placed in a row. The first button is selected by default and displays a listView widget. The other two buttons should be greyed out until clicked, at which point they will show another ...
I am trying to create a dynamic list of properties in Angular using Material Design that adjusts for different screen sizes. For example, something similar to this design: https://i.stack.imgur.com/EUsmV.png If the screen size decreases, the labels shou ...
I am trying to create a card that contains a cocktail recipe. The card initially displays just the title, and when you click on a button, it should expand to show the full menu and description. The issue I'm facing is that when I click on one element, it e ...
I am currently using the material-ui framework to create a form. Utilizing the Grid system, I want to achieve the following layout: <Grid container> <Grid item xs={4} /> <Grid item xs={4} /> <Grid item xs={4} /> </Gr ...
I am a newcomer to React and I am eager to display a Material UI icon in one of my existing components. The icons can be found at https://www.npmjs.com/package/@material-ui/icons. Upon inspecting the component, I noticed that the previous developer includ ...
I'm having difficulties setting rounded borders for my DatePicker component from @mui/x-date-pickers and Material UI V5. Here is the intended look I am aiming for: https://i.stack.imgur.com/c1T8b.png I've tried using styled components from Mat ...
Within MaterialUI, it is possible to tweak the theme to utilize a variety of colors. The range of colors provided by MaterialUI includes various shades. For example: import purple from '@material-ui/core/colors/purple'; const theme = createMuiTheme({ p ...
When looking at the first image, it appears that the material-UI menu position is working correctly. However, when we change the button position to align-right, the menu position shifts slightly to the left, not perfectly aligning with the right side as in ...
Looking for advice on how to properly place an image in an AppBar within the standard material height restrictions, like 64px for desktop? Currently utilizing material-ui@next (1.0.0-beta.2). This code snippet seems to work well: <AppBar> <To ...
Why isn't the menu item highlighted when clicked on? Check out the screenshot below: https://i.stack.imgur.com/ZLZAG.png <div ng-controller="DropdownCtrl as ctrl"> <md-menu> <md-button aria-label="Menu" class="md-icon-bu ...
Trying to integrate an additional text element next to an input using angular-material. The goal is to replicate the functionality of bootstrap's .input-group-addon: The closest approach achieved so far can be seen in this example: <md-content layout- ...
I am trying to find the optimal way to display a React Material-UI component that includes both an icon and text, ensuring that they are all aligned vertically. Currently, I'm facing issues with this setup, especially when it comes to conditional renderi ...
I'm working with the following Material Icon code but I want to enhance it by adding a white background for better contrast. Any suggestions on how to achieve this? <a id="lnk_quick_print" href="javascript:;" title="Quick Print& ...
Incorporating Uno.Material's BottomNavigationBar in my app has been a success so far, except for figuring out the event handler when a bottomnavigationbaritem is clicked. I've tried various options like ItemInvoked, OnPressed, OnTouch, OnClick, and Clicked ...
How can I make the Grid component stretch when one of the Card components contains extra text? You can view the sample code here. Changing the alignItems property to "flex-end" or "center" works, but when using alignItems: "stretch" it does not work. I ...
In my Angular 4 Material application, I have a set of radio buttons grouped together: <md-radio-group fxLayout fxLayoutAlign="center center" fxLayoutGap="30px"> <md-radio-button value="1">Date</md-radio-button> <md-radio-butto ...
Hi there, I am currently navigating my way through Material Design and attempting to ensure that the cards section is responsive by utilizing media queries and flex. However, I have encountered an issue where only a portion of the image is displayed when t ...
I'm currently working on customizing a Flutter ElevatedButton within the context of an app that adheres to a specific color scheme created by myself. Is there a way to apply styles to this button using a particular hexadecimal color value (for example, u ...
I am facing a challenge with version 1.2.1 of material-ui. My goal is to make the AppBar component transparent by overriding its styles as per the documentation here. This is the code snippet I have been working on: import React, { Component } from 'react ...
I am currently working on implementing material-ui steppers, specifically the "small dot stepper." One challenge I am facing is connecting the dots with a line. I attempted to set the StepConnector position to absolute, but it does not function well when s ...
My website utilizes a table to showcase some data, but there's an issue when viewed on smaller screens. The table gets cut off and not all the content is visible. Even after scrolling completely to the right, the rightmost field remains barely visible and ...
Looking to implement Material design for bootstrap3 in my app using webpack, specifically mdb3. I'm having trouble finding an npm repository for this. Any suggestions on how to integrate it? Can I use the CDN alongside installed modules or is there a dif ...
Hello everyone! I am new to ReactJS and admin-on-rest. I am currently studying from this documentation and I am interested in creating a navigation submenu similar to the one shown here. I have tried searching on Google but haven't found what I need. ...
I'm attempting to incorporate the Material.io icon into a button using ::before, but it is appearing filled rather than outlined. Unfortunately, there are no available instructions on how to display the icon in an outlined style. This is the code I am cu ...