In Kendo UI for Angular 2:
1- How can I hide the extra filter options (the filter at the bottom in the picture).
2- For the first (remaining) filter: how to set a default operation and then hide the operations dropdown?
You can hide the extra filter by setting [extra]="false" at the kendo-grid-date-filter-menu component. (API Reference)
The default operator can be set by utilizing the operator input.
Example:
<kendo-grid-column field="myDate" title="Title">
<ng-template kendoGridFilterMenuTemplate
let-filter let-column="column" let-filterService="filterService">
<kendo-grid-date-filter-menu
[column]="column" [filter]="filter" [filterService]="filterService"
[extra]="false"
operator="eq"
>
</kendo-grid-date-filter-menu>
</ng-template>
</kendo-grid-column>
When it comes to hiding the operators-dropdown, there is no configuration-option right now for the filter-menu.
For the row-filter approach this is possible by setting [showOperators]="false".
You can get around this limitation by either hiding it via css (but this still would be a workaround), or by implementing a custom filter that fits your requirements. (Documentation)
A css workaround can be like this:
kendo-grid-filter-menu-container {
kendo-dropdownlist.k-filter-and {
display: none !important;
}
kendo-grid-string-filter-menu-input,
kendo-grid-date-filter-menu-input {
&:nth-child(1) {
kendo-grid-filter-menu-input-wrapper {
kendo-dropdownlist:nth-child(1) {
display: none !important;
}
}
}
&:nth-child(3) {
display: none !important;
}
}
}
But I'm still in need for better Kendo configurations.
You can use the default filter operator as reference.
The following example demonstrates how to configure a string filter and select the "contains" operator as default, also you can specify the active filter operators with their order using this tag: <kendo-filter-(operatorName)-operator>.
<ng-template kendoGridFilterCellTemplate let-filter let-column="column">
<kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains">
<kendo-filter-contains-operator></kendo-filter-contains-operator>
<kendo-filter-eq-operator></kendo-filter-eq-operator>
</kendo-grid-string-filter-cell>
</ng-template>
For everyone who use this workaround as #Hashem explained dont forget to add kendo-grid-numeric-filter-menu-input
kendo-grid-filter-menu-container {
kendo-dropdownlist.k-filter-and {
display: none !important;
}
kendo-grid-numeric-filter-menu-input,
kendo-grid-string-filter-menu-input,
kendo-grid-date-filter-menu-input {
&:nth-child(1) {
kendo-grid-filter-menu-input-wrapper {
kendo-dropdownlist:nth-child(1) {
display: none !important;
}
}
}
&:nth-child(3) {
display: none !important;
}
}
}
<kendo-grid-column field="OrderDate" title="Order Date">
<ng-template kendoGridFilterCellTemplate let-filter let-column="column">
<kendo-grid-date-filter-cell [showOperators]="false" [column]="column" [filter]="filter">
</kendo-grid-date-filter-cell>
</ng-template>
</kendo-grid-column>
[showOperators]="false" it work for me. Hide other operators
source Link : DateFilterCellComponent
Related
I'm pretty new to react-js or css and i want to hide a css object.
This is the code
I tried to hide (make it unclickable) the object with this code
.react-aria9431256528-7
{
display: none;
}
but this only works temporary. Every time i load the site, the id changes. How can i reference this object in way that it will always work? I was thinking about the aria-label since it is constant but how to i reference it?
Is there a better way than just to hide it?
If the aria-label attribute is unique, you can use the attribute selector syntax ([attr="value"]) as follows:
[aria-label="Help"] {
display: none;
}
Help
You can use this for example.
a[id^="react-"] {
display: none;
}
a[id^="react-"] {
display: none;
}
<div>
<a id="react-area1">1</a>
<a id="react-area1">2</a>
<a id="react-area1">3</a>
<a id="area1">4</a>
</div>
Is it the link (a href='...') that you're trying to hide? You could use the aria-label as already said. Here is another solution :
I've noticed that there is a parent div with a class "dropddown". You could target your link with css like below:
.dropddown > a {
display:none;
}
That should do it normally. If not add the important flag :
.dropddown > a {
display:none !important;
}
PS, don't forget to fix the naming of the class dropddown by the way (one d) => "dropdown". That makes me believe that you have control over it ;).
I'm trying to make a floating add button in my Polymer 1.0 app with pretty much similar functionality to Google Inbox's floating add button. First question then:
To achieve similar functionality, I'm currently using the paper-fab element and onmouseover and onmouseout js functions as follows:
<paper-fab id="addBtn" icon="add" class="fab red" onmouseover="hoverOver(this)" onmouseout="hoverOut(this)"></paper-fab>
<script>
hoverOver = function(srcElement) {
srcElement.querySelector("paper-material").elevation = 4;
};
hoverOut = function(srcElement) {
srcElement.querySelector("paper-material").elevation = 0;
};
</script>
Is this the recommended approach, or is there a slicker, more 'polymerized' way of accomplishing this?
You can achieve this by using css only.
paper-fab::shadow > paper-material {
#apply(--shadow-none);
}
paper-fab::shadow > paper-material:hover {
#apply(--shadow-elevation-8dp);
}
In the source code of the paper-material element, you can see that the elevation attribute is just for setting the the box-shadow style on the element. So instead of updating the attribute in js (which then sets the css), you can simply update the same thing directly in css.
<dom-module id="paper-material">
<style>
:host {
display: block;
position: relative;
#apply(--shadow-transition);
}
:host([elevation="1"]) {
#apply(--shadow-elevation-2dp);
}
:host([elevation="2"]) {
#apply(--shadow-elevation-4dp);
}
:host([elevation="3"]) {
#apply(--shadow-elevation-6dp);
}
:host([elevation="4"]) {
#apply(--shadow-elevation-8dp);
}
:host([elevation="5"]) {
#apply(--shadow-elevation-16dp);
}
</style>
Alternatively if you'd like to use html, ensure that the paper material has the attribute "animated" set to "true"
Another workaround is put in <style> directly in dom-module of your element.html
paper-button:hover{
#apply(--shadow-elevation-6dp);
}
May change the dp for elevation . Hope helps
I recently encountered a.. "thing" in the land of SASS. And maybe you guys know a trick or something alike to "fix" it.
I've got this class .icon. It contains some basic styling for my icons (Used for an iconfont). These icons can then be placed in the markup whereever I want. For example in a button. But inside the button this icon needs some extra styling. So I do the following:
.icon {
// Basic styling
}
button {
.icon {
// Additional styling
}
}
It compiles to this css:
.icon {
// Basic styling
}
button .icon {
// Additional styling
}
Everything OK so far. But now I want to extend the .icon to an after-element inside of all my .foo elements like so:
.foo:after {
#extend .icon;
}
Now it compiles to this css:
.icon, .foo:after { // This is good, exactly what I want
// Basic styling
}
button .icon, button .foo:after { // But I don't need the second half of this line
// Basic Additional
}
Now the foo-element isn't just extending the "root" icon-class but also the icon-class under button and all its additional stylings. But I don't need that. I don't want that element to have that additional styling. It doesn't result in problems yet. But maybe that could happen later. So I was curious if it is possible to extend only the .icon from the root, omitting the nested .icon in the button, and possibly more nested icon-classes in other elements later on.
My first thought was to use an abstact class like %icon and extend from that, but the above mentioned icon-class, and the file that it is placed in, is generated by grunt-webfont. So I can't just change the icon-class styling 'cause its overwritten all the time.
What can I do? Is there some more to the extend function of SASS that I don't know of? Or is there a totally different way?
Thanks for any help.
SOLUTION:
Using all the awesome help and tips I found a way to avoid this problem:
Grunt-Webfont suggests to use the i-tag to display the icons. Font-Awesome does the same. So, I'm doing exactly that. And I usually don't use it for anything else.
This allows it to use the i-tag under the button for my extra styling, and not the .icon class. This way the .icon class is used only once in the generated file and then never again.
.icon {
// Basic styling
}
button {
i { // <= Previously '.icon'
// Additional styling
}
}
Have you tried doing something like this?
.icon {
//some styles from external (ie: grunt webfont)
color: red;
}
%icon {
#extend .icon;
}
button {
.ico {
#extend %icon;
//add some additional styles
}
}
.foo:after {
#extend %icon;
//add some more
}
You would then avoid generating the foo:after rule for the .icon inside the button.
EDIT2 - you'll need to create an additional class which you can use inside your styles, so there's only one .icon class defined (in your grunt-webfont generated css). Then just use the .ico class inside your styles and extend the %icon placeholder like shown above.
EDIT - have you considered solving this problem in your grunt-webfont generator?
From the documentation, it seems you can set the output to scss like so:
options: {
stylesheet: 'scss',
mixinPrefix: 'mixin-'
Then just use the mixin to define the styles of your desired classes?
I think this gets the result you're looking for? Albeit, slightly messily.
The method: make a placeholder style and extend that into .icon to begin with.
%icon-styles{
basic: styling;
}
.icon {
#extend %icon-styles;
}
.foo:after {
#extend %icon-styles;
}
button .icon {
#extend %icon-styles;
additional: styling;
}
It compiles into:
.icon, .foo:after, button .icon {
basic: styling;
}
button .icon {
additional: styling;
}
You can also use custom template with grunt-webfont. It’ll give you much more control on generated CSS.
I have a list of <div>s. Each <div> has class zebra. Until now I've used the following to stripe the list:
.zebra:nth-child(2n) { /* colors */ }
Now I'm implementing a filtering feature, such that some of these <div>s will have a class hidden. I tried updating my css to
.zebra:not(.hidden):nth-child(2n) { /* colors */ }
But that had no effect. What am I missing? How can I combine these selectors so that only the showing .zebra <div>s are considered in the :nth-child(2n)?
Here's a fiddle of what I'm describing.
UPDATE:
there is an unknown number of .hidden elements, and an unknown total number of elements. (the list is data-driven, not static).
I'd really rather not do any of:
run a javascript every time a filter control is touched, just to re-color the showing list items.
remove an element entirely when it's hiding. this makes re-adding it non-trivial (afaict).
Instead of removing the element as Justin suggested, you could replace it with an element of a different tag. We could use details, for example:
var placemarker = document.createElement("details");
node.parentNode.replaceChild(placemarker, node);
placemarker.appendChild(node);
Then, instead of using :nth-child, use :nth-of-type.
details { display:none; }
div.zebra:nth-of-type(2n) { /* colors */ }
Unhiding the element can then be done with:
placemarker.parentNode.replaceChild(placemarker.firstChild);
See this static example.
if you don't mind delving into jquery..
$('#yourHiddenElement').remove();
will remove it so that your css shades alternate.
http://jsfiddle.net/NYvcv/1/
I would suggest using this instead of applying the class 'hidden' to the element you want to hide.
If you know there will be a limited number of .hidden items, you can do something like this:
.zebra2:nth-child(2n) {
background: lightgrey;
}
.zebra2.hidden ~ .zebra2:nth-child(2n) {
background: inherit;
}
.zebra2.hidden ~ .zebra2:nth-child(2n+1) {
background: lightgrey;
}
.zebra2.hidden ~ .zebra2.hidden ~ .zebra2:nth-child(2n) {
background: lightgrey;
}
.zebra2.hidden ~ .zebra2.hidden ~ .zebra2:nth-child(2n+1) {
background: inherit;
}
And so on. This particular example breaks if there are more than 2 hidden items.
One possible solution:
use jQuery to change the .hidden element's type to, say, <li>. Use :nth-of-type instead of :nth-child.
http://jsfiddle.net/Nb68T/1/
I'm currently using readonly="readonly" to disable fields. I'm now trying to style the attribute using CSS. I've tried using
input[readonly] {
/* styling info here */
}
but it is not working for some reason. I've also tried
input[readonly='readonly'] {
/* styling info here */
}
that doesn't work either.
How can I style the readonly attribute with CSS?
input[readonly]
{
background-color:blue;
}
https://curtistimson.co.uk/post/css/style-readonly-attribute-css/
Note that textarea[readonly="readonly"] works if you set readonly="readonly" in HTML but it does NOT work if you set the readOnly-attribute to true or "readonly" via JavaScript.
For the CSS selector to work if you set readOnly with JavaScript you have to use the selector textarea[readonly].
Same behavior in Firefox 14 and Chrome 20.
To be on the safe side, i use both selectors.
textarea[readonly="readonly"], textarea[readonly] {
...
}
Loads of answers here, but haven't seen the one I use:
input[type="text"]:read-only { color: blue; }
Note the dash in the pseudo selector. If the input is readonly="false" it'll catch that too since this selector catches the presence of readonly regardless of the value. Technically false is invalid according to specs, but the internet is not a perfect world. If you need to cover that case, you can do this:
input[type="text"]:read-only:not([read-only="false"]) { color: blue; }
textarea works the same way:
textarea:read-only:not([read-only="false"]) { color: blue; }
Keep in mind that html now supports not only type="text", but a slew of other textual types such a number, tel, email, date, time, url, etc. Each would need to be added to the selector.
To be safe you may want to use both...
input[readonly], input[readonly="readonly"] {
/*styling info here*/
}
The readonly attribute is a "boolean attribute", which can be either blank or "readonly" (the only valid values). http://www.whatwg.org/specs/web-apps/current-work/#boolean-attribute
If you are using something like jQuery's .prop('readonly', true) function, you'll end up needing [readonly], whereas if you are using .attr("readonly", "readonly") then you'll need [readonly="readonly"].
Correction:
You only need to use input[readonly]. Including input[readonly="readonly"] is redundant. See https://stackoverflow.com/a/19645203/1766230
There are a few ways to do this.
The first is the most widely used. It works on all major browsers.
input[readonly] {
background-color: #dddddd;
}
While the one above will select all inputs with readonly attached, this one below will select only what you desire. Make sure to replace demo with whatever input type you want.
input[type="demo"]:read-only {
background-color: #dddddd;
}
This is an alternate to the first, but it's not used a whole lot:
input:read-only {
background-color: #dddddd;
}
The :read-only selector is supported in Chrome, Opera, and Safari. Firefox uses :-moz-read-only. IE doesn't support the :read-only selector.
You can also use input[readonly="readonly"], but this is pretty much the same as input[readonly], from my experience.
input[readonly], input:read-only {
/* styling info here */
}
Shoud cover all the cases for a readonly input field...
capitalize the first letter of Only
input[readOnly] {
background: red !important;
}
<input type="text" name="country" value="China" readonly="readonly" />
If you select the input by the id and then add the input[readonly="readonly"] tag in the css, something like:
#inputID input[readonly="readonly"] {
background-color: #000000;
}
That will not work. You have to select a parent class or id an then the input. Something like:
.parentClass, #parentID input[readonly="readonly"] {
background-color: #000000;
}
My 2 cents while waiting for new tickets at work :D
Use the following to work in all browsers:
var readOnlyAttr = $('.textBoxClass').attr('readonly');
if (typeof readOnlyAttr !== 'undefined' && readOnlyAttr !== false) {
$('.textBoxClass').addClass('locked');
}