Questions tagged [mdc-components]

Questions about Material Design Components (MDC) by Google, including MDC-Web, MDC-Android, MDC-IOS, and MDC-Flutter.

Material Components provide a reliable development environment for apps and websites across Android, iOS, and the web. Components are updated as the Material Design system evolves, ensuring consistent pixel-perfect implementation and adherence to Google’s front-end development standards, such as internationalization and accessibility support.

162 questions
1
vote
0 answers

Basic MDCSelect not displaying correctly

I can't get a basic select control working with MDC. Does anyone know what I'm doing wrong? (other mdc-components works just fine with on same setup) UI-bug (PNG) Javascript: import {MDCSelect} from '@material/select'; var selTEST = new…
Chris W.
  • 11
  • 1
1
vote
2 answers

Error text is going out of the Screen in material textfields

I am using Material Textfield for my project, @IBOutlet weak var cellTextField: MDCTextField! func setUpCellUI() { cellTextField.clearButton.isHidden = true cellTextField.font = CSFont.fontWithName(.Medium, size: 17) …
Jeni Khant
  • 350
  • 3
  • 13
0
votes
0 answers

Angular Material theme colors like mdc-theme-text-icon-on-background is undefined

Any idea why? The following is my custom theme that was more or less working pre-MDC. I've modified it to support MDC: $custom-typography: mat.define-legacy-typography-config( $font-family: "Inter, sans-serif", $button:…
gruuuvy
  • 2,028
  • 4
  • 31
  • 52
0
votes
2 answers

how to customize background color for mat-form-field?

All mdc mat-form-field examples have gray/whitesmoke background. How can I change it? https://material.angular.io/components/form-field/overview
Ya.
  • 1,671
  • 4
  • 27
  • 53
0
votes
0 answers

prebuilt theme overriding customized settings after upgrading legacy material to MDC

After upgrading to Angular 15 I ended up using legacy material and including a legacy pre-built theme in angular.json: "styles": [ "./node_modules/@angular/material/legacy-prebuilt-themes/legacy-indigo-pink.css", …
Ya.
  • 1,671
  • 4
  • 27
  • 53
0
votes
0 answers

Observer foundation adapter

After npm install and npm start I get this error with observer Error: node_modules/@material/base/observer-foundation.d.ts:25:75 - error TS2344: Type 'Adapter' does not satisfy the constraint '{}'. 25 export declare class…
Rafał Developer
  • 2,135
  • 9
  • 40
  • 72
0
votes
1 answer

What is causing the size increase in elements after upgrading Angular, and how can I fix it?

I'm currently working on a project that needed to be upgraded to the latest angular version, after running the migration tool: ng generate @angular/material:mdc-migration All the elements look bigger, I have tried to resize them with the height…
0
votes
2 answers

In Angular 15, how can I decrease the size of a Form Field?

I'm trying to reduce the size of a Form Field and font in Angular 15 as simply as possible. In the middle of an upgrade to 15 from 13 and the existing UI is quite broken. HTML
0
votes
1 answer

Change conditionally the outline color in in Angular

Im trying to customize my angular form. Using mat object, I was able to change everything except the outline color. The grey default color is staying there!! Pictures attached. Would be happy for some ideas. This is the relevant div (I think) with…
Yonatan
  • 23
  • 4
0
votes
0 answers

MDC Menu anchor to Dynamic list

I've a question about our MDC Menu from the latest 14.x material components web. What's the best way to handle anchoring of a MDC Menu to a dynamic list? So for example:
Haidy
  • 259
  • 6
  • 19
0
votes
0 answers

Getting material component error while migrating from Angular 9.1 to 15

I am new to Angular. I recently migrated from 9.1 to 15. Post that, did the mdc migration also as we have material changes in 15. Now, while running ng serve, the compilation is getting failed and from the stack it seems to be issue with Material…
0
votes
0 answers

Angular 15 build strange behavior. Build sometine pass, sometime not without source code changes

I have migrated an Angular App from Angular 14 to Angular 15. Application use material. The migration process was: ng update @angular/core@15 @angular/cli@15 ng update @angular/material@15 After these steps, I update all third parties packages, and…
Alaindeseine
  • 3,260
  • 1
  • 11
  • 21
0
votes
0 answers

Google Materia Design tabs - allow content swipe

I'm trying to build a little PWA. For the overall design I use Google Material Design v2 for the web, this was going great but I get off the road when it comes to the tabs. The documentation of the tabs is very poor…
user3142817
  • 787
  • 2
  • 9
  • 15
0
votes
1 answer

How can I change the placeholder (label) color for MDCOutlinedTextFields?

I'm having a hard time changing the text color for the placeholder label that is used as a hint when not in focus and as a label on top when in focus. (Photo below) The is reason I'm switching out all my MDC-TextFields and MDC-TextInputControllers…
WrapItUp87
  • 290
  • 1
  • 2
  • 15
0
votes
1 answer

Material Design Component: How to increase Material AlertDialog's single choice item text?

How to increase the text size of RadioGroup in AlertDialog made using setSingleChoiceItems? This is what we tried but did not work.