Closed surenlancer7 closed 1 year ago
Why doesn't the density mixin work for you? It is the intended public API for cases like this.
Why doesn't the density mixin work for you? It is the intended public API for cases like this.
we are able to provide the density value from -2 to +2 only via mixin. We are trying to reduce the size of the ripple from 48px to 24px which is equivalent to -5 and the density is not allowed by angular theming. Hence we are trying manually via CSS
The density scale is based on the Material Design spec so that's why it's capped at those values. I was able to get the button to be 24x24 with the following styles. Note that doing this is at your own risk since the internal implementation of the buttons can change:
--mdc-icon-button-state-layer-size: 24px;
--mdc-icon-button-icon-size: 24px;
padding: 0;
.mat-mdc-icon-button .mat-icon {
width: 24px;
height: 24px;
font-size: 24px;
}
we are able to restrict the button size and font size even the ripple size with the above styles, but the mat-icon is positioned outside the button element
Are you sure that you're applying all the styles I mentioned above? Here's what the button looks like for me:
we are not utilizing any mixin , directly applying the styles in .scss files
where would you add the below styles, for which class or element we are supposed to provide it --mdc-icon-button-state-layer-size: 24px; --mdc-icon-button-icon-size: 24px; padding: 0;
can you share the styles override as a working scss / css format with selectors
It's likely a specificity issue. You should apply it to the .mat-mdc-button
and verify in the dev tools that something else isn't overriding it.
Closing since there hasn't been any activity and there are some suggestions above.
This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.
Is this a regression?
The previous version in which this bug was not present was
14.x
Description
For a button of any size, the default ripple size is displayed.
In certain scenarios, we need to fit in the button in smaller UI. As the ripple effect is taking more space than the button, it is creating a UI glitch. If we reduce the size of button, still the ripple effect is taking unwanted space and hence I had to redesign the application.
Is there any way to override the ripple size "THROUGH CSS" as the other option (density) is not working as expected for our use cases
Reproduction
Reference - https://stackblitz.com/edit/angular-rumxmw?file=src%2Fapp%2Fbutton-overview-example.html
Expected Behavior
The ripple effect also should be relative to the button
Actual Behavior
The ripple effect is not relative to the button
Environment
Angular CLI: 15.2.4 Node: 16.15.0 Package Manager: npm 8.5.5 OS: win32 x64
Angular: 15.2.4 ... animations, cdk, cli, common, compiler, compiler-cli, core ... elements, forms, language-service, material ... material-moment-adapter, platform-browser ... platform-browser-dynamic, router
Package Version
@angular-devkit/architect 0.1502.4 @angular-devkit/build-angular 15.2.4 @angular-devkit/core 15.2.4 @angular-devkit/schematics 15.2.4 @angular/flex-layout 15.0.0-beta.42 @schematics/angular 15.2.4 ng-packagr 15.2.2 rxjs 7.8.0 typescript 4.9.5