In my Angular application (styled with Angular Material) I need to show some data using a Material Table.
This table has a sticky header, several rows and a sticky footer.
By default, rows have a height of 62.5px and I'd like to override this value.
How can I achieve that?
I have tried overriding the css style for tr / tr.mat-row / tr.mat-header-row etc, without success. I have tried using ::ng-deep too.
Also, my sticky footer row has a 48px height, which i didn't set!! Does anyone know whats happening?
Table picture
I'm able to edit the footer row css with ::ng-deep, i have set the font-weight to bold, but when i set the height attribute nothing happens.
::ng-deep tr.mat-footer-row {
border: 1px solid #e7e7e7;
font-weight: bold;
}
Try adding it out on your styles.scss.
tr.mat-footer-row {
border: 1px solid #e7e7e7;
font-weight: bold;
height: #px !important;
}
On a related point, I had an issue where my mat-table rows were too high, and tried to set the height in CSS to reduce it.
It turned out that the problem was "min-height" had been set on "mat-header-row" and "mat-row" somewhere deep inside material (not in my source code).
The fix was simply:
.mat-header-row, .mat-row {
min-height: 30px;
}
To change the height by default (48 px) in mat-table you need to specify a class for every row in the html, for example, when you define the rows:
<tr mat-row *matRowDef="let row; columns: displayedCol;" class="table-row"></tr>
Then you can override the height, setting in your main css file the class 'table-row' with a specific height, for example:
.table-row {
height: 30px !important;
}
We prove this with angular 7 and angular material version 7.3.7.
Regards
With material 5
mat-row.mat-row.ng-star-inserted
{ height: 32px !important; }
.mat-row{ min-height: 30px; }
You can also set it in the mat-row element in the template to an exact value.
Using minHeight is better than height because it overrides the default css.
<mat-row
matRipple
*matRowDef="let row; columns: columnNames"
routerLinkActive="highlighted"
[style.minHeight.px]="100">
</mat-row>
Update for Angular 15 / Material 15:
They've now changed the CSS to use height instead of min-height so height.px would be better. I'm still looking for justification, but my guess would be to try to enforce consistency or perhaps it's performance related.
There's also guidance to just use:
.mat-column-name { height: 100px; } // for column 'name'
It works correctly.
tr.mat-footer-row,
tr.mat-row {
border: 1px solid #e7e7e7;
font-weight: bold;
height: 20px !important;
}
You could specify the height of the table footer in tr.mat-footer-row.
tr.mat-footer-row {
height: 100px;
}
Here is StackBlitz example https://stackblitz.com/angular/gjjjdpjqvvde?file=app%2Ftable-sticky-footer-example.css
The answers are correct but if it doesn't work for you, it probably means you have a div or any element inside the table that has a height set to it, and if this height is greater than the row height you won't be able to override it.
I had a similar problem; in my case, the height of the table was too large relative to the number of rows, so setting the height didn't work. When I adjusted the height to be smaller when I had fewer rows, I was able to set the height again.
my solution:
.mat-header-row{
max-height: 40px;
height: 40px;
min-height: 40px;
text-align: center;
}
Use this on your style.css
.mat-row{
height: 10px !important;
}
Related
I created a drop down menu with menubar. However I have custumization problems :
The transparency is well done, but the size of the horizontal items is too hight (and so not vertically centered. The required height is thirty pixels all inclusive ;
(just resolved with height: 30px; in passive mode (neither hover nor seleted). The selection "Button" item in the horizontal menu remains too hight
The vertical menu items are too separated from each over and the width of the vertical menus too narow ;
The movement in the verticals menu items not be materialized (with a blue color) as it is in the horizontal menu;
Impossible to move to a submenu with a mouse. Only with keybord arrows. Why ?
I tried a long time the css with modification of the "theme.css" of the saga-blue theme, but nothing to do nothing works except the css lines included in my code :
Code:
.p-menubar {
background: transparent;
padding: 0;
height: 30px;
}
What are the particular css elements and clauses to modify ?
Eventually, using Chrome's inspector, I ended up discovering the CSS classes involved. By groping on the values I got about what I wanted.
The impacted code:
In the vue.js file:
<div id="menuU" class="user-menu" v-show="isvisible()">
<Menubar:model="items" class="p-menubar"></Menubar>
</div>
the v-show parameter is application specific and not given here.
In css:
.menu-utilisateur {
background-color: lightgrey;
height: 30px;
}
.p-menubar {
background-color: lightgrey;
padding: 0px;
height: 30px;
}
.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
padding: 0.5rem 1rem !important;
}
.p-menubar .p-menuitem-link {
padding: 0.5rem 0.5rem !important;
}
Don't forget the !important. It overwrites the default values.
Is it possible to change the size of the checkbox in an Angular Material Selection List? I've tried changing the size of the mat-pseudo-checkbox in CSS but that results in the checkmark not being placed properly:
mat-pseudo-checkbox {
height: 10px;
width: 10px;
}
Is there another selector that I need to adjust to correct this?
With Angular 7 I succeeded with:
mat-checkbox ::ng-deep .mat-checkbox-inner-container {width: 30px;height: 30px;}
Yes, the checkmark is just a pseudo element within the checkbox. You can override it's styles the same way as with the box itself.
For your case with the 10px box size the following CSS would work (for other sizes the values need to be adjusted):
.mat-pseudo-checkbox-checked::after {
top: 0px;
left: -1px;
width: 6px;
height: 2px;
}
I was facing the similar issue and tried the below CSS, which seems to work in Angular 8:
::ng-deep .mat-checkbox .mat-checkbox-inner-container {
width: 30px;
height: 30px;
}
I have added a sample width and height; please customize these to what you need.
Buttons are large and going over the card width
This should be easy, but I'm having a bit of tough time customizing the buttons inside the cards. I want to remove all the padding, so that the black border nicely encompasses the icon without any extra space in the left/right-hand sides. I've tried adding custom css and !important and directly overriding the div.btn__content, but those don't work. Any ideas to do this as simply as possible?
Reproduction Link
The issue is the min-width of the .btn class. Setting that to 0 will allow the button to be smaller than 88px. You should also just set the padding of the .btn__content to 0.
div.btn__content {
padding: 0;
}
div.card__actions .btn {
min-width: 0;
}
Here's an updated codepen.
For newer versions of Vuetify (1.2.4 and above) you need to use this:
/* turn off min-width for all buttons */
.v-btn {
min-width: 0;
}
You need to change min-width of .btn class and set padding-left: 16px of .btn-content.
Here is an example:
https://codepen.io/anon/pen/zPEyLB
You might have to use ::v-deep
::v-deep .v-btn {
padding-left: 12px;
padding-right: 12px;
}
I am using material design lite and try to control the height of a td using mdl-data-table__cell--non-numeric by opening material.min.css and adding height:20px to the selector, did not make any diference.
.mdl-data-table__cell--non-numeric{text-align:left; height:20px;}
Also try to create a new selector and apply to the columns i need, and also did not make any diference :
.padtd{
height: 20px;
}
How can i control the height from .mdl-data-table__cell--non-numeric ?
Think you should use the !important tag, if you want to set your own attributes.
.mdl-data-table__cell--non-numeric {
text-align:left !important;
height: 20px !important;
}
I can't figure it out, why is this table 102px and not 100px in height? Is there another css attribute I need to set otherthan:
table {
border-spacing:0;
border-collapse:collapse;
}
example: https://jsfiddle.net/0enwstw7/2/
There appears to be padding on the <td> tag assigned by default. This should fix it:
td {
padding: 0;
}
The <td> element defaults to having 1px padding, which adds a pixel on each side to make 102px total.
Remove it with td{padding:0;}
It's the padding of the td that adds another 2px;
You have set the up div to be 100px but you are measuring the table.
You can set the padding of the td to 0;
td {
padding: 0px;
}
Try removing implicit td padding which is included into overall size of the table. Sufficed to add some directive like this:
td {
padding: 0;
}
see: https://jsfiddle.net/0enwstw7/3/
Take a look at this.
Your browser (e.g. Chrome) has its own stylesheet and that's why it adds that border-spacing: 2px; to the table.
If you want more information about browser specific stylesheet, take a look at here.
And Yes. Like lots of people here already mentioned it, you can override the setting by adding
td {
padding: 0px;
}
BUT I still think it's important to know WHY this happened.
Hope this helps.