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;
}
Related
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;
}
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;
}
My goal is to fix the width of rowsPerPageTemplate im p:datatable
(i'm using primefaces and HTML5)
what i did:
in my css i fixed the style of the select menus as follow
select{width : 100% !important;}
the problem is that rowsPerPageTemplate took the same width of selectmenu which is not expected ,i want that rowsPerPageTemplate take customized width different than the width of the select menu, so i added this code in the css
select.customWidth
{
width:45px;
}
i called this style in my xhtml page as below
<p:dataTable
rowsPerPageTemplate="5,10,15"
styleClass="customWidth">
Howver it seems that customWidth is not taken in account
screen shoot
can anyone guide me to the right point
Problem solved, I added this code in the style sheet to set the width of rowsPerPageTemplate (10em in my case )
.ui-paginator .ui-paginator-rpp-options {
margin-left: 1em;
margin-right: 1em;
background-image: none;
width: 10em !important;
}
I am new to CSS. I am observing a strange CSS behaviour where an element has the below CSS property
.container .header{
color: #FFFFFF;
font-size: 2em;
font-weight: bold;
padding: 5px;
position: relative;
text-align: center;
top: 21%;
}
When the page loads on Mozilla and chrome, the top property is not applied but inspecting the firebug shows the property. When I edit in firebug just by 1px, the elements gets properly aligned and even if I set the top value to 21% after that, the position is correct. Only on load the CSS property is not applied. Can you please let me know where I am going wrong?
It's because you are calculating the top value in percentages and to make that happen, you need a declared height for it's parent i.e. container.
.container, body, html {
height:100%;
}
Add the rule above and see it working. FIDDLE HERE
NOTE - body and html also need their height declared(either in percentages or pixels) too as container's parent is body and like so.
I know exactly what it is now. Its your style class names themselves. After much testing I have discovered:
.container, .header {
color:#ffffff;
font-size:2em;
font-weight:bold;
padding:5px;
position:absolute;
text-align:center;
top:21%;
}
Notice what's after the .container? A COMMA. You need a Comma after every class name that inherits those same attributes! Hope this helped!
I've been instructed to make links on a website have a different colour underline than the font colour. It all seemed quite easy, using border-bottom as below, except that linked images are now also underlined.
Is there a way, without using JS, to stop happening?
a{
color: #6A737B;
text-decoration: none;
}
a:hover{
border-bottom: 1px solid #C60B46;
text-decoration: none;
}
An example - hovering over the below image now adds the border-bottom CSS style to it, which I don't want -
<a title="Dyne Drewett" href="http://test.dynedrewett.com">
<img class="attachment-full" width="202" height="78" alt="Dyne Drewett Solicitors" src="http://test.example.com/Website-Header.png">
</a>
The only static way to do this would be to use a class on image links like:
<a href='http://whatever.url.here/' class='imglink'>
<img src='img/image.png' alt='Alt text'>
</a>
Then apply a CSS style to this class:
a.imglink:hover {
border-bottom: 0px solid;
}
You'd have to declare this AFTER the other a:hover CSS class.
Technically, you cannot set a style on an element based on what elements it contains. You cannot make the border of an a element depend on the presence of an img element inside (and this is what you are dealing with). Using classes would help, but from the comments, it seems that this is out of the question.
There’s a workaround: place each image at the bottom of the containing element (not on the baseline as per defaults), and shift it down one pixel, or whatever the border width might be. This way, the image will cover the bottom border, provided that the image has no transparency. CSS code:
a img {
vertical-align: bottom;
position: relative;
top: 1px;
}
This slightly changes the position of all images, so it might affect the overall layout unless you take precautions.
I'd suggest adding a class to the link, so you can do
a.imglink:hover{
border:0;
}
Alternatively, if you can't control that class, you can try adding a negative margin to your image to ensure the border doesn't show:
a img{
margin:0 0 -1px 0;
}
That -1px might need adjusting based on your other rules
Here's a fiddle to show the negative margin solution: http://jsfiddle.net/QRXGe/
Your solution will require you adding an additional class name to links that wrap images (or anything where the border should be removed). There's no way to sort of "reverse select" unless you want to employ a JavaScript technique.
A jQuery technique would be something like this:
$('a > img').parent().css('border-bottom', 'none');
That will remove a "border-bottom" style from all anchor tags that have image as a direct descendant. But you'll need it on every page, and every page is getting parsed by this script, so it's a little added overhead on each page.
Otherwise, if you have access to the HTML, creating a CSS class to target these specific links such as:
a.img-link{ border-bottom:none; }
And apply it to any link that's around an image such as:
<img src="#" alt="" />
I hope that helps!
Another way to achieve this is to simply make the images in links relative and then offset the bottom to cover the border. 5px seems to do it http://jsfiddle.net/ECuwD/
a{
color: #6A737B;
text-decoration: none;
}
a:hover{
border-bottom: 1px solid #C60B46;
text-decoration: none;
}
a img {
position:relative;
bottom: -5px;
}
a:hover img {
border-bottom:none;
}
or perhaps...
a:hover img.attachment-full {
border-bottom:none;
}
Apparently, what you want is a different behavior for the same markup (<a>) based on its content.
Sadly, there is no real way to do this with pure CSS, as this language is not programming language and therefore lacks the condition structures, such as if.
That does not mean that there is no solution! Here is a couple of things you can do:
Declare (say) in your HTML that the element (<a>) should be handled differently (with classes, in your case either <a class="text"> or <a class='image'>.
Use JavaScript to change your style dynamically, which means based on conditions, such as content for instance. In your case it would probably be something like:
function onLoad() {
for (var element in document.body) {
// look for links
// if this is a link:
// look for image inside link
// if there is one:
// remove the border
}
}