Questions tagged [material]

DO NOT USE THIS TAG. Did you mean [material-design]?

0
votes
0answers
11 views

React + Material-UI style classes from different components conflict when served statically

Issue: styles applied to class names generated by Material-UI / JSS are incorrectly changing when components are re-rendered. Setup: I'm serving a React app (built with create-react-app) that uses ...
0
votes
0answers
10 views

Angular Material nav schematics has a toolbar with wrong top padding

I have just used ng generate @angular/material:nav test-nav And it has drawn this and I do not know how can I get rid of that white padding at the top of the screen. This is the generated code: &...
0
votes
0answers
10 views

Getting Angular Material Mat-Toolbar to fill the entire row and header name equally spaced

I added a mat-toolbar header in my angular material which uses flexfx. I have 3 header names but the mat-toolbar does not fully fill the width of the mat-card. the mat-toolbar occupies about 70% of ...
-1
votes
1answer
27 views

How to use constants with ngSwitchCase

I have found multiple posts including ngSwitchCase in angular 2 instead of ngSwitchWhen, How to bind to '*ngSwitchCase', and Angular 2 - ngSwitchCase. Google wasn't helpful at all. I am ...
0
votes
0answers
23 views

How to set min-width dynamically calculated with typescript on mat-select-panel?

I am trying to set min-width with my custom typescript calculation on mat-select-panel. As material added overlay code in runtime, It is not adding mine calculated min-width with renderer2 or pure ...
0
votes
0answers
18 views

How can I change the background-color and color of matBadge?

I want to change both the background and text color of a Material badge instead of using the standard material color, how do I do this? <mat-icon matBadge="{{this.userService.numberOfCartItems}}" ...
0
votes
0answers
10 views

Render components on Material UI tabs

I have been trying to render certain components on clicking inside a tab content. This is what i have been doing: import React, { Component } from "react"; export class Global extends Component { ...
0
votes
0answers
24 views

FloatingActionButton Path.isConvex is not supported

I am using com.google.android.material.floatingactionbutton.FloatingActionButton and a preview does not render. Android Studio shows a warning: The graphics preview in the layout editor may not be ...
0
votes
0answers
11 views

Material Icon can not be shown in material Select

in my material table I have created a filter column, in this filter I have created a Select. This select with material icon and text. the HTML code looks just like this: <mat-select placeholder=...
0
votes
2answers
25 views

Hide parts of menu in Angular (permission)

i am building a Dashboard using Angular. The users of the dashboard are 1: Administrator (who is allowed to see the complete menu in sidebar) and 2: employee (who are only allowed to see part of that ...
0
votes
0answers
10 views

Cant resolve Widget.MaterialComponents.TextInputLayout.*.ExposedDropdownMenu

I tried to create a AutoCompleteTextView, surrounded by a TextInpuLayout. According to the documentation, i should use Widget.MaterialComponents.TextInputLayout.*.ExposedDropdownMenu as the style. ...
0
votes
0answers
16 views

mat-select overlay transform (cdk-overlay-pane)

I need to set the width of a mat-option to the same value as the mat-select. The problem is that the cdk-overlay-pane adds a style with a transform: translateX(-16px). I can remove that by SCSS but I ...
0
votes
0answers
18 views

DateTime Picker with Historical Slider

I am trying to create a angular component that will show data in a collection based off a Material Slider value. Basically when the slider is moved a collection is queried and return data between two ...
0
votes
1answer
19 views

Angular Tables mat-table and cdk-table

What is the difference in angular's mat-table and cdk-table and in mat-table can we render rows of table after it has been created once.
0
votes
0answers
26 views

Can an Angular Component have different forms depending on the calling component?

I'm working on a PWA with Angular. The designers already gave me all of the needed files for the project. I've noticed that there's one screen that behaves like a component but on another "screen" it ...
0
votes
0answers
26 views

How to change the color of a clicked mat-list-item from a list of numbers

I'm not able to change the background-color of the mat-list-item when it's clicked I'm able to change the color of mat-list-item if I hover over it, but not when clicked. The snapshot of my UI when I ...
0
votes
3answers
45 views

Creating mat-option elements with ngFor when list initialized empty

I would like to update values in the "specialisation" mat-select" when I select a skill in my "competence" mat-select. I linked my var with the model using [(ngModel)] but it won't update the list. I ...
0
votes
1answer
43 views

Is it possible to display the placeholder on input fields over 2 rows?

I want to have the placeholder-text on Angular Material Input Fields shown over 2 lines. Is that possible? If the placeholder is too long then it is cut. I don't want to make very wide fields for ...
0
votes
1answer
20 views

Unity Legacy Shader how to change decal from script

This is what I am using but I can't find anything online regarding how to go about changing out a decal. Let's consider that I have multiple Textures ex.(Tex1, Tex2, .. etc). How could I access the ...
-1
votes
0answers
16 views

How to set any color i want easily in java3d?

I have a problem in understanding color values in java3d. I have to set x,y,z which represents red, green and blue colors in values from 0.0f to 1.0f but how can I easily convert it from RGB or other ...
1
vote
2answers
23 views

How to test your Aria tags on your website?

I been doing some research but I having issues finding a good way to test my Aria-labels, and other Aria tags I used. What is the best practice for testing this. Currently doing this for Angular using ...
0
votes
0answers
9 views

How to make the standard Material Design tabs component autoplay?

I am using the standard Material Design tab component found here: https://material-components.github.io/material-components-web-catalog/#/component/tabs I added some styling to it and everything ...
0
votes
1answer
22 views

Not able to pre-select mat radio button on HTML page in Angula6

There is a new requirement to include radio button input in an angular 6 application.There are two pages: Request and Approve. The user enters the value in request page and submit the request. ...
0
votes
1answer
14 views

Angular Material Dialog - content projection

Is it possible to use dynamic content inside an angular material dialog? let dialogRef = dialog.open(YourDialog, { data: { name: 'austin' }, }); Instead of { name: 'austin' }, I would like to use ...
0
votes
3answers
27 views

Angular Material Snackbar Change Color

I'm using Angular 7 with Material Snackbar. I want to changes the color of Snackbar to green. In app.component.ts, I have: this.snackBarRef = this.snackBar.open(result.localized_message, 'X', { ...
1
vote
1answer
46 views

Angular tree structure with 2 different list populating from nested rxjs subscription

In Angular 7 I have two observable which is getting data from the server; Observables gives the following lists: productgroup = [{"id":"1","groupname":"gr1"},{"id":"2","groupname":"gr2"}]; ...
0
votes
0answers
29 views

Disable past date in material dialog date picker

Even though i applied the min date in to the current date today. i was still able to select the past dates. here is my code : ViewUtilities.createDateDialog(context, new MaterialDialog....
-1
votes
0answers
12 views

Why is the materialPageRoute transition very short on iOS?

Naturally, at iOS, the duration of the push transition is about 300ms, however, the flutter framework on iOS has a very short "push" transition (about 100-150ms) which leaves a bad impression. ...
1
vote
1answer
23 views

Centering mat-tab-group

I have 2 labels and I want them to be in the middle. Angular Material provides simple class mat-align-tabs="center" which doesn't work at all. I searched an internet an found solutions for md, which ...
0
votes
1answer
28 views

Angular material table - this._elementRef is undefined

i was trying to use angular material table and I found the following error: ERROR TypeError: "this._elementRef is undefined" ERROR CONTEXT on the following line: <mat-table [...
0
votes
1answer
22 views

Is it possible to customize material's datepicker body?

The idea is to edit the datepicker body in order to add a button. I know it is possible to edit the header, but I'd like to add a button (that upon being pressed sets the calendar date to today's date)...
0
votes
2answers
46 views

Alternate color with Angular Material mat-table with parent child rows

I have an Angular Material mat-table which I used CSS styling for alternate row colors. Here is the CSS styling: .mat-row:nth-child(even){ background-color: #e4f0ec; } .mat-row:nth-child(odd){ ...
0
votes
1answer
30 views

Unity Black & White Material How to Change the color individual color (Black & White)

I made a material with a jpg on it, so the whole thing is black and white. Is there a way to change the Black parts to any color and then change the white parts to any color? So the Black and white ...
0
votes
2answers
65 views

Angular material datepiker configure time

I want to use Angular material’s datepiker. I would like to know how to make it start on Monday and not on Sunday. Also for the date, when I select it, I have for example 24/05/2018 00:00 gmt+2:00. ...
3
votes
1answer
76 views

Submenu closes improperly in React + Material UI

I have a nested menu structure like follows: menuItems = [ { "key": "key1", "caption": "Text1" }, { "key": "key2", "caption": "Text2", "subMenuItems": [ { "...
0
votes
0answers
28 views

Material UI Table size param missing?

I am trying to get a standard Material UI Table to be smaller, or how the Material UI team calls it dense table. Basically, I want to reduce the distance between all the lines. As suggested within ...
0
votes
1answer
18 views

Angular Material mat-table filter mat-table column containing boolean

I am trying to filter an Angular Material mat-table for a column that only contains boolean. I read here that datasource.filterPredicate can be used to filter the collection but I found out that the ...
3
votes
0answers
79 views

Material Floating Action Button causing error and crashing xml

I migrated to androidx and my dependencies are: implementation 'androidx.appcompat:appcompat:1.1.0-alpha05' implementation 'com.google.android.material:material:1.1.0-alpha06' I used ...
0
votes
0answers
19 views

How to validate more than one piece of form data in a dialog box using the library below?

I have a button when clicked a dialog pops up asking user for signup information. I want to validate the information, if the email is an email, if password matches confirmation password etc. I want to ...
0
votes
0answers
11 views

How to use material icons in canvas?

How to use material icons in canvas? For fontawesome you can include the font and use the icon character code like: ctx.font='30px FontAwesome'; ctx.fillText('\uF047',20,50); But what about Google ...
0
votes
0answers
22 views

angular material unable to set second parameter in the map-get custom components

IM following this guide of createing a custom component color to my buttons. ive had the same issue like this guy: Angular 2 + Material: Unable to use map-get with 2nd parameter "text", &...
-8
votes
1answer
68 views

Angular material textarea (stretch height)

How to scale height of textarea (mat-form-field) to 100% of the content? I tried height: 100% in every element inside directive, and it does not work. I am also trying to use code mirror here: &...
0
votes
0answers
19 views

filterPredicate from material table was not working in angular app

I want to implement a customer filter for my material table, but as I debugged and set a breakpoint in this customer filter function. but it was not working. the code is such like this: ngOnInit() {...
-2
votes
1answer
27 views

Would I use AngularJS Material in a Angular 6+ application or Angular Material?

Just trying to learn Angular 6+ and trying to understand how the UI components all get used. I see Angular Material and Angular JS Material. If I'm using Angular 6+ and NOT Angularjs, would I use ...
-1
votes
1answer
23 views

Material override : mat-select has no minimal width

I am trying to override Angular Material. So far, so good, I have achieved most of the things I wanted (like removing the underline, or stopping the label from floating, and so on). To do that, I ...
0
votes
0answers
25 views

material table with filter function for every column

I am implementing a generic table with material. the problem is that, how can I create a filter mehtod, which filter only his own column. the code looks just like this: <ng-container *ngIf="...
0
votes
0answers
18 views

How to create a generic table with generic filters for every column

I want to implement a generic table with generic filters for every column. online I have found this example: https://stackblitz.com/edit/angular-f3mmmp?file=src%2Fapp%2Fapp.component.ts but in ...
0
votes
1answer
25 views

Angular Material mat-select multiselect dropdown Get only the item selected or unselected

I got an Angular multiselect mat-select dropdown with checkbox. I used the code from the angular material website and it works. Instead of get a list or array of all selected dropdown items, I prefer ...
1
vote
1answer
21 views

How can I add a new callback for Flutter's Material Slider Widget to access touch active/inactive status?

I'm using Flutter's Material slider.dart and the official widget supports callbacks for onChanged, onChangeEnd, and onChangeStart. These start and end callbacks are a bit odd though in that they ...
0
votes
1answer
15 views

Angular Material Paginator Issue On Material Data Table

I have a data table populating from a service, everything works fine except when I hover over the arrow to paginate I get this error I have: ngOnInit() { this.dataTableSource.paginator = ...