I have a table in Google App Maker, I am wondering is it possible to apply conditional formatting to rows of the table.
Example:
If the value of a drop down is "Yes" set that row's background colour to be red.
The documentation regarding this is useless as always and wasn't able to find any questions regarding this.
Image:
Greyed out Image:
The secret is in your bindings. If you wish to retain the regular assigned styles like 'app-ListTableRow' and 'hoverAncestor' then do the following:
Add a class in your Style Editor like this for example:
.red {
background: linear-gradient(to bottom, darkred, red);
}
On your table row 'Display' - styles enter the following binding:
#datasource.item.CertificateisRequired === 'Yes' ? ['red','app-ListTableRow','hoverAncestor'] : ['app-ListTableRow','hoverAncestor']
That will do it.
If you have a dropdown in each row I would suggest to call it 'CertificateisRequired' instead of leaving a default name like 'DropDown1' or whatever App Maker assigns to it. Then adjust the binding in the row Display - styles to:
#widget.descendants.CertificateisRequired.value === 'Yes' ? ['red','app-ListTableRow','hoverAncestor'] : ['app-ListTableRow','hoverAncestor']
Related
I need to style a material date range picker with custom colors, I'm not able to find which class corresponds to the selected range
I've found the selected and changed with
::ng-deep .mat-calendar-body-selected {
background-color: #368EA1;
}
anyone can help me please?
I also need to change the background color when passing over the items
Thanks
There is a new handy browser feature in Chrome called Css Overview. It gives you an overview of the styling properties used in the page components and native html elements. Among these properties it extracts the colors. From the list of the colors extracted there, pick the mat-calender-range color you want to change and it will give you the name of the classes associated with this color. Here is a screenshot of how this can be used with mat-calender.
How to remove the default outline generated by chrome for the select option list ?
below i have added outline property to none which disable the select element outline.is there any simple way to remove the option tag's outline?
select {
outline: none;
}
Look :
https://jsfiddle.net/thilinasan166/oqfvugbs/1/
You cannot style the outline or whatever you call it, for the options dropdown as it comes from default Operating System.
Check this How to remove border of drop down list : CSS -- this answer
Despite that create your own custom select dropdowns you can find plenty of them on the web
INSPIRATION for Custom Select Elements
I've seen an angular course telling that :
host-context is used to style elements inside a component, depending on some condition set outside of it.
I've searched the official documentation for it in https://angular.io
but it is not documented
can some one explain the different use cases where I can use this selector for an angular component ?
can some one explain the whole meaning of the -context added to host here ?
without an official documentation, does it mean that when someone give one use case, it mean that it is the only case the thing refers to ?
This answer explains the difference between host and host-context. Here is an example of host-context usage. Suppose you have a component that wraps an input and this input can be used inside two different components - table and dropdown. When inside a dropdown it should occupy 50% of the width, when in table - 100%. Now if you have these two components selectors defined like this:
<my-dropdown>
<my-table>
Then the styles for the input component can be defined like this:
:host-context(my-dropdown) input { width: 50% }
:host-context(my-table) input { width: 100% }
In a list of users I want to highlight a particular row that matches a user's current rank.
My problem is that with ng-class it doesn't seem to override the Foundation background-color for that row even when the conditional expression matches. The row looks like this:
<tr ng-repeat="user in displayUsers" ng-class="{'userSelectedBackground': user.rank == regularRank}">
I output user.rank == regularRank just to test it and I do get back true on the row I want to highlight. Developer tools show that my userSelectedBackground class is being applied, but I can't see where it's being overwritten. I've also tried attaching an !important tag even, with no success:
.userSelectedBackground {
background-color: #4C4CFF !important;
}
Foundation's :nth-of-type(even) rule is taking precedence over your class styling. You need to target it more specifically:
.userSelectedBackground,
.userSelectedBackground:nth-of-type(even),
.userSelectedBackground:nth-of-type(odd){
background-color:red;
}
Here's a demo.
I have few questions on styles (Themes). Presently i get a blue colored theme in all my window and panels. I want to change this to Pink. How can i do that ?
I read about swapStyleSheet( String id, String url) : Void but, i am not sure how to use it.
2.) I also need to know how to change the colors of labels/form panels etc, I want all the styles to be on 1 page, rather than adding it as an attribute in labels/form panels. (eg: fieldStyle: 'background-color: #ddd; background-image: none;')
Although I have not created a custom theme, there is a themeing guide located here: http://www.sencha.com/learn/theming/ that will give you very powerful tools to create your theme instead of styling individual components.