I am using Kendo controls for styling my application, I was able to customize the css of almost all other kendo controls by overwriting default css but I am unable to do that in the case of Kendo datepicker.
I have tried many things but I am only able to change the font size inside the calendar/month view. but the height and width of the datepicker's selection box is too big and that doesn't look good in my page.
Can somebody help me to know how to resize the whole calendar container to be smaller that how it looks now.
I have added a live sample link and an image below for reference.
Live sample - click here for a live sample datepicker simulation
Any help would be much appreciated! Thanks in advance!
You'll have to play around with the values to get it the exact size you want, but this should work:
.k-calendar-monthview .k-calendar-td,
.k-month-calendar .k-calendar-td {
width: 20px;
height: 20px;
inline-size: 20px;
block-size: 20px;
}
.k-calendar .k-calendar-cell-inner,
.k-calendar .k-link {
font-size: 8px;
}
.k-calendar-view {
min-height: min-content;
max-width: min-content;
}
.k-calendar-th {
width: 20px;
height: 20px;
font-size: 8px;
}
.k-button-md {
font-size: 8px;
}
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;
}
EDIT: Link to reproduction on codepen
https://codepen.io/bedelman851/pen/oyWpGq
I have a ul to which I am applying columns: 3 to. Each li has an input/custom label. The custom label has the following relevant css.
input[type="checkbox"] + label:before {
content: '';
display: block !important; //ie fix
width: 16px;
height: 16px;
border: 1px solid $dark-button;
border-radius: 2px;
position: absolute;
background-color: $white;
left: 0;
top: 5px;
}
The height 16px is still being applied to the element, but is actually getting rendered as over 18px when I inspect the element. All others are exactly 16px. This only seems to happen at the top of the last column.
It doesn't always happen as you'll see in this picture.
But I have noticed that the last column in the second picture sometimes does appear this way. If I go in to the inspector and click on the height to disable it and then reenable it, it renders perfectly. Have tried adding !important (god help us) to the height, and adding a min-height. Thoughts?
This was an actual firefox bug that has now been resolved a year later. https://bugzilla.mozilla.org/show_bug.cgi?id=1468654
I'm relative new to react but I'm trying to use a common custom scrollbar but I can't seem to get the styling to work, I also submitted this as an issue on github but maybe somebody here has the answer.
Using react-custom-scrollbars v4.0.0; React v15.1.0; Redux v3.5.2
So I've been trying to add my own styling to the thumb and track but I can't seem to get it to work. I figured out that you need to add the complete styling (I did see this is fixed in 4.0.1) but when I try to set a different color to the thumb it doesn't style the actual thumb but just places a 'new' static thumb in that color and the actual thumb that is moving isn't colored, what am I doing wrong?
<Scrollbars
autoHide={false}
autoHeight={true}
autoHeightMin={500}
autoHeightMax={600}
renderThumbVertical={props => < div {...props} className="thumb-vertical"/>}
renderTrackVertical={props => < div {...props} className="track-vertical"/>}>
// content
</Scrollbars >
.thumb-vertical {
position: relative;
display: block;
width: 100px;
height: 100px;
cursor: pointer;
border-radius: inherit;
background-color: #d9534f;
}
.track-vertical {
position: absolute;
width: 6px;
display: block!important;
right: 2px;
bottom: 2px;
top: 2px;
border-radius: 3px;
}
For the one that are struggling to figure out how to make the customization work. Know as it's mentioned in this question, you need to provide the base styling.
You can find how here https://stackoverflow.com/a/54973078/7668448
Or here https://github.com/malte-wessel/react-custom-scrollbars/issues/208
Hope this is helpful.
I have a on my page and I have styled it with css.
input[type=range] {
-webkit-appearance: none;
background-color: #1b2b66;
width: 300px;
height: 3px;
position: relative;
top: -9px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background-image: url("../images/slider.png");
background-size: 100% auto;
border: 0px;
width: 35px;
height: 35px;
}
The issues is: on the ipad when the user clicks the slider thumb a black border surrounds the image. How do I hide this?
You need to use modernizr to perform a feature detect.
<script src="modernizr.js"></script>
<script>Modernizr.load({
test: Modernizr.inputtypes.range,
nope: ['use your css to define the range input format']
});
</script>
This test looks for support. When it fails, it loads your css to format that input. If a browser has support for this tag, which means there will be a standard way it renders that control and your css will be redundant. In this case, we usually just let the browser ignore our css settings.
If you really want to override the default css settings. Try using !important.
border: 0 !important;
I figured out my issue. First of all thank you everyone for the help.
I forgot to set the background-color: property. I set it to #FFF and now have the desired effect.