While using md-slider from angular-material, if the range of max and min is less, then the slider is looking fine:
However if the range of value is wide (1-100) then the pink line of the slider is getting overlapped by grey dots:
Is there a way to remove these grey dots from md-slider in md-discrete mode ?
Angular-material discrete md-slider dots can be removed using the following CSS snippet
.md-track-ticks canvas { display: none; }
In my case, there was CSS naming issue according to which version.
This works for me.
Thanks Salal.
._md-track-ticks canvas, .md-track-ticks canvas { display: none; }
Related
I am trying to make the checkbox's closer together... without so much space in between vertically.
I'm using a cls to make the font size smaller which is working properly. Any ideas?
.my-class .x-form-cb-label
{
font-size: xx-small;
font-weight: bold;
}
here is a pic of the spacing that is too large
I created my css class, declared margin-bottom: -4px; (you can pick your size) and attached it to checkbox components with help of cls config. Here's the FIDDLE check index.html for css class.
In Angular Material you can set the width the of md-menu-content section within an md-menu by setting the width eg.
<md-menu-content width="2">
Is there a way to do the same for height? Using height="x" doesn't seem to work.
Thanks!
I just used this css: md-menu-content { max-height: 90vh; }, which allows the menu height to grow up to 90% of the view height. Works great!
There is simple form and some textfields on this form. I have to set colors
(background and font) in two of them on runtime.
I tried to do it two ways:
1) fieldInstance.addClass('aaa') with css like this
.aaa .x-form-field {
background-color: black;
color: red;
}
2) fieldInstance.setFieldStyle('font-weight: bold;color: red;background-color: black;');
both methods are working because I see the bottom age of both is
fields is thick in black color, and both fields are working the same (almost) way.
Before enter and after exit background color is white.
When I start to edit this fields, background of first
is always white, background of the second is black until
I leave the field.
Could you explain me whats wrong?
For <input> element applied many classes beside x-form-field, like x-form-text and some of them define color and background-color aswell. So I guess that some of that classes may be more specific than .aaa .x-form-field. Try to use !important within your CSS rules:
.aaa .x-form-field {
background-color: black !important;
color: red !important;
}
I think that the 1st function append a class to the Others already presents.
In the second case you replace values of style already setted.
Maybe to have the same issue you need to modify the x-form-field fields, instead of append Others.
I Always use the second option if i have to modify style on Runtime.
maybe posting other code i can see better where the problem could present
In Angular js ui rid, how can I remove vertical and horizontal scrollbars ?
And also for each column heading I am getting a little carrot icon by default, which shows sort ascend, sort descent, Hide column. I want to remove this also from my column headings.
Instead .table-striped which comes by default for ui grid, I want to use .table-bordered. Is there any place to set these parameters to ui grid?
enableHorizontalScrollbar : 0,
enableVerticalScrollbar : 0,
enableSorting : false,
enableColumnMenus : false;
Good answer from #Asqan answering the first part of your question. For the second part:
Instead .table-striped which comes by default for ui grid, I want to use .table-bordered. Is there any place to set these parameters to ui grid?
I'm thinking you mean you want the look in this plunker I created.
You can solve these css issues in one of two general ways.
1) Customize the ui-grid css
2) Leave the original ui-grid css then override it in your own css file
I've shows the first option to solve your "stripped" issue and the second option to implement your desired border. I have done both for example only so you can see both options - I recommend choosing and using consistently one method or the other.
The ui-grid sets the ".table-striped" look to which you are referring in the css. You can override this either in you own css file or using the customizer tool and setting the #rowcoloreven and #rowcolorodd fields to the hex code for white #ffffff. This will update the ui-grid css to contain the below:
.ui-grid-row:nth-child(odd) .ui-grid-cell {
background-color: #ffffff;
}
.ui-grid-row:nth-child(even) .ui-grid-cell {
background-color: #ffffff;
}
For ".table-bordered" see specifically in the style.css file these added lines
.ui-grid-cell {
border-style: solid;
border-bottom: 1px #ff0000;
}
Default Material Design gives a sidenav width of 304px. I am trying to implement material design's use of flex boxes, by adding in a flex="66" attribute inside the md-sidenav element.
When I did, it shortened the sidenav vertically, instead of horizontally.
It seems like I'm unable to override that 304px without pure CSS, which, although I can accomplish, is something I was specifically hoping to stay away from.
I haven't seen this concept referred to in the Material Design documentation. Anyone else have this issue?
If you will look at angular-material.css as below
md-sidenav is displayed as
display : none
when its closed & its displayed as
display : flex
when its visible.
If you want to change its width you need to write below lines in yr custom.css which you should load after loading angular-material.css
width : 500px !important;
min-width : 500px !important;
max-width : 500px !important;
replace 500 with yr custom value.