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
3
votes
3 answers

How to change colour of mdc-select dropdown arrow?

I'm trying to change the default purple colour of the dropdown arrow in an mdc-select: None of the sass mixins seem to do it. How is it done? Here is what I have tried so far: HTML
nuxibyte
  • 1,434
  • 1
  • 13
  • 16
3
votes
1 answer

How can i change the background color in a BadgeDrawable Android

i want to create a bottomNavigationBar with badges. I already did it with the com.google.android.material.bottomnavigation.BottomNavigationView that can be found at https://material.io/develop/android/components/bottom-navigation-view/. However the…
3
votes
0 answers

How to write XCUITestCase to drive an MDCMultilineTextField

In a UI Test (XCUITestCase), when I try to let the test tap an MDCMultilineTextField, the test fails with Neither element nor any descendant has keyboard focus. If I try to use the UI test recorder and tap the MDCMultilineTextField it fails to…
rgal75
  • 151
  • 6
3
votes
1 answer

Remove label/label spacing below each MDCInputField

I'm trying to get two MDCTextFields (https://material.io/develop/ios/components/textfields/) to stack vertically, one under the other without any spacing. Here's a visual representation: This is what it actually looks in the emulator altho they…
Rovdjuret
  • 1,458
  • 3
  • 19
  • 40
3
votes
1 answer

Setting title in the Bottom App Bar not allowed

I have a main activity in my app with the new Bottom App Bar from the Material Design Components. On User interaction, I replace different fragments. In order to make the User aware of their present position inside the app, I decided to the set the…
Mehul Kanzariya
  • 888
  • 3
  • 27
  • 58
2
votes
2 answers

With Angular v16, how to customize Angular Material Tooltip Component properly

I've read the documentation about theming in Angular Material. But what if I want to do some finer adjustments on certain component. Take Tooltip component for example, I want to make the font size slightly bigger. I made it working by overriding…
Hao
  • 6,291
  • 9
  • 39
  • 88
2
votes
1 answer

How to reduce the height of the MCD based angular material input components with "outlined" appearance (>= Angular 15)

The MDC (https://github.com/material-components/material-components-web) based input components in angular material (https://material.angular.io/) take up a lot of space above and below. I tried to reduce the theme desinsity to -2 but…
maku_at
  • 1,579
  • 2
  • 13
  • 21
2
votes
0 answers

How to implement MDC (Material Design Component) tooltips?

I have been setting up a simple web guide without using any framework, by just using separate Material Design Components. Many of these I had no issues with (I have successfully implemented buttons with ripple effects, cards, tabs...) but I can not…
Allexio
  • 41
  • 6
2
votes
1 answer

Activity Layout goes blank when switched to Material Design components

Problem : There was no problem when app was using Theme.MaterialComponents.Light.NoActionBar But was not using any MDC elements in Layout like (TextInputLayout etc). Then i replaced Editext with TextInputLayout and Button with Material Button. Now…
2
votes
1 answer

MaterialComponents randomly gives colours to status bar and Toolbar despite lack of custom colour attributes defined

Why does MaterialComponents apply random colours when I've not specified any colours in the colors.xml file? Is there a way to remove those colours for the Day Mode so that the colour white is shown? I understand that MaterialComponents allows…
2
votes
0 answers

How to listen for keydown Enter and mouse click in a MDC menu?

How do I listen to keydown Enter and mouse click for an item in an MDC menu? Do I have to setup .addEventListener for both these events on the menu item? Or is there another way (similar to
Leo
  • 4,136
  • 6
  • 48
  • 72
2
votes
0 answers

MDC JavaScript dark theme conditionals always taking same route suddenly

I've been using this function to toggle the dark mode on my website and it has been working great but now whenever I flip the switch, dark mode is enabled correctly as can be seen in the console but when trying to toggle it again, it says "Switched…
2
votes
2 answers

Get MDC Drawer To Appear Below Top App Bar

I followed the example code here to put a dismissible drawer under a top app bar but it doesn't work. Here is what I tried: // Note: these styles do not account for any paddings/margins that you may need. body { display: flex; height:…
user3248346
2
votes
2 answers

How to use MDC-Web methods (e.g. MDCIconButtonToggle)

I'm having trouble getting the MDC-Web methods/ framework methods to work. Specifically I'm trying to get the MDCIconButtonToggle to work. I have an icon button that can change when clicked. I thought the way I set it up was correct, but it won't…
Adonis
  • 115
  • 2
  • 8
2
votes
1 answer

Basic Snackbar Example doesn't show on Material Design Components for Web

The basic example of snackbar for Material Design Components for Web doesn't work. It produces the error: ``` TypeError: snackbar.show is not a function ``` I have tried using jQuery to make sure the DOM loaded properly. I have tried changing back…
timthekoder
  • 415
  • 5
  • 16
1 2
3
10 11