I want to highlight background colour of the selected value which is clicked. I was going through this example
Here it is highlighting multiple select value. I want to highlight only the selected value when click to choose an option.
https://stackblitz.com/edit/material-selection-list-5-0-0-selection-color-change?file=app%2Fapp.component.css
<hello name="{{ name }}"></hello>
<p>
Area 3 is initially selected. The displayed array below updates as options are selected/deselected.
</p>
<div>
Selected: {{ selectedOptions | json }}
</div>
<mat-selection-list #list [(ngModel)]="selectedOptions" (ngModelChange)="onNgModelChange($event)">
<mat-list-option *ngFor="let tta of taskTypeAreas" [value]="tta.name">
{{tta.name}}
</mat-list-option>
</mat-selection-list>
app.css
p {
font-family: Lato;
}
mat-list-option {
margin: 10px;
}
mat-list-option[aria-selected="true"] {
background: rgba(0, 139, 139, 0.7);
}
mat-selection-list is not suitable for single value selection but still, if you want to you can try something like this.
mat-list-option[aria-selected="true"] {
background: blue;
}
you have to clear your list on every selection
https://stackblitz.com/edit/angular-i3pfu2-kylx8v
UPDATE: Based on current mat-selection-list options: https://material.angular.io/components/list/api
declaring [multiple]="false" and addressing .mat-list-single-selected-option style this will highlight the currently selected mat-list-option
<mat-selection-list [multiple]="false">
<mat-list-option>1</mat-list-option>
<mat-list-option>2</mat-list-option>
<mat-list-option>3</mat-list-option>
</mat-selection-list>
.mat-list-item.mat-list-single-selected-option {
background: #FF0000;
}
Related
I have a buefy table with values between 0-1000, I want to conditionally highlight the cells in the table based on the cell value. For example is the value is above 50 i want to set the cell background as green, 25-50 to yellow and <25 to red. I saw this previous answer: How to apply class to a specific cell in a Buefy Table? But the solution doesnt seem to work.
Here is my current buefy table:
<b-table
:data="selectedProducts.productQuantities"
:row-class="(row, index) => row[0] === 'TOTAL'"
>
<b-table-column
label="quantity"
v-slot="props"
:class="cellObject(props.quantity)"
>{{ props.quantity }}
</b-table-column>
And i have a method to calculate and return the class of the cell:
methods: {
cellObject(quantity){
if(quantity < 25) {
return "is-red";
}
else if (quantity > 50) {
return "is-green";
}
else {
return "is-yellow";
};
},
which returns one of these classes:
<style>
.is-red {
background: #343a40 !important;
font-weight: bold;
}
.is-yellow {
background: #ee3f3f !important;
font-weight: bold;
}
.is-green {
background: #41f841 !important;
font-weight: bold;
}
After fiddling around with it more i found that if i did :cell-class="is-red" it would apply it to the whole column.
<b-table-column
label="quantity"
v-slot="props"
:cell-class="'is-red'"
>{{ props.quantity }}
</b-table-column>
You cannot apply this to the column, it has to be applied directly to the cell itself. Unfortunately, this is not easily done with a conditional unless you put the conditional in the tag however, I doubt this will accomplish what you're after. I would recommend that instead, you use a and just change the background color of the tag based on a conditional. For example, we do something like this:
<b-table-column label="Column Label">
<template v-slot="props">
<b-tag type="is-primary" v-if="props.row.value > 0 && props.row.value < 25">{{ props.row.value }}</b-tag>
<b-tag type="is-success" v-else>{{ props.row.value }}</span>
</template>
</b-table-column>
I have a registration for a website with a html select menu from which to choose between beeing called Mr. or Mrs. The text-color is grey and I want it to be black after choosing one of the options, like it happens with the usual input fields.
I've tried it with .anrede:focus (that works for the input fields), but that makes it grey again after choosing the next input field
<div>
<select id="anrede" class="anrede">
<option hidden>Anrede</option>
<option value="f">Frau</option>
<option value="m">Herr</option>
</select>
</div>
<!--Vorname-->
<div><input id="vname" type="text" class="input" placeholder="Vorname"></div>
.input{
border: 2px solid #AD974F;
border-radius: 4px;
margin-top: 15px;
}
.input:focus{
border: 2px solid #8E793E;
I want to solve it with CSS if that's possible, but i couldn't find any solution yet.
You can simply add jQuery to your project, like this:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.4.1/jquery.min.js"></script>
</head>
Then just use the snippet below inside of <script></script> tags at the bottom of your HTML file.
You will also need to give each of your options an 'id' if you want to accomplish the bonus text-color-change for each option selected.
$( document ).ready(function() {
$("#anrede").change(function(){
// the code in here will be called if an option is selected
// This line will change the options text-color to be whatever color you
// provide
$(this).find('option').css('text-color', '#8E793E');
});
});
Bonus:
$( document ).ready(function() {
$("#anrede").change(function(){
//If you want to change the color based on what option was selected you can
get them based on their id's and handle them accordingly
// EX:
var id = $(this).find("option:selected").attr("id");
switch (id){
case "Anrede":
// Change the color for the Anrede option
$(this).find(id).css('text-color', '#8E793E');
break;
.... // Add cases for each possible ID if needed
}
});
});
I have a button that shows a table when clicked on. That's done with bootstrap vue. I made some :hover in the css that highlights it, but i want to keep it highlighted while the table is shown.
the button and table look like this:
<b-btn v-b-toggle.collapse1 class="toggle-table-btn">Cardboard size</b-btn>
<b-collapse id="collapse1" class="mt-2">
<b-table striped hover :items="(( table ))"></b-table>
</b-collapse>
and the css
.container .table-box .toggle-table-btn:hover {
background-color: rgb(63, 63, 63);
color: white;
}
You can apply a class on a html object dynamically. Then, you can create a new class that does the same that hover does, and apply this new class to your button.
You will need a support variable, to handle the table status collapsed or not, I called this support variable as highlightButton
In your css, you can "reuse" you hover class declaration for your highlight
.container .table-box .toggle-table-btn:hover, .toggle-table-btn.highlight {
background-color: rgb(63, 63, 63);
color: white;
}
When you click the button, #click changes the highlightButton's value, then your class is applied or not.
<b-btn v-b-toggle.collapse1 #click.prevent="highlightButton = !highlightButton" :class="['toggle-table-btn', highlightButton ? 'highlight' : '']">Cardboard size</b-btn>
<b-collapse id="collapse1" class="mt-2">
<b-table striped hover :items="(( table ))"></b-table>
</b-collapse>
the component data
data: function {
return {
highlightButton: false
}
}
Make use of the v-model support for the collapse component. This way you can explicitly track whether the table is currently visible or not using a data attribute (showTable in my example). You can then use showTable to add an extra class to your button dynamically. Use this class to highlight the button while the table is visible.
See this working example:
https://jsfiddle.net/ebbishop/304jws9m
I am using ui-select in combination with angularjs v1.5. Here is my html code:
<ui-select multiple sortable="true" ng-model="RealtimeCtrl.selectedPersons" theme="bootstrap">
<ui-select-match placeholder="Select or search a person in the list...">{{$item.username}}</ui-select-match>
<ui-select-choices repeat="item in RealtimeCtrl.people | filter: $select.search">
<div ng-bind-html="item.username | highlight: $select.search"></div>
<!--<small ng-bind-html="item.email | highlight: $select.search"></small>-->
</ui-select-choices>
</ui-select>
In angular I have a basic controller that fills the people variable with data. My question is pretty simple but I didn't find anything similar asked before - how to give ui-select selected element a specific css background color?
I would store this randomly generated color in angular controller.
Any ideas? Any help would be much appreciated.
I solved this problem the ugly way, but it works. First I added a function call to ui-select element on select event (occurs when an item was selected):
<ui-select on-select="MyCtrl.onSelected($item);" on-remove="MyCtrl.onRemove($item);" multiple sortable="true" ng-model="MyCtrl.selectedPersons" theme="bootstrap">
<ui-select-match placeholder="Select or search a person in the list..."><span id="{{$item.$$hashKey}}">{{$item.username}}</span></ui-select-match>
<ui-select-choices repeat="item in MyCtrl.people | filter: $select.search">
<div ng-bind-html="item.username | highlight: $select.search"></div>
<!--<small ng-bind-html="item.email | highlight: $select.search"></small>-->
</ui-select-choices>
</ui-select>
I added a html id property on the span element with the value of {{$item.$$hashKey}}. The trick is I needed to change the background color of the parent of the selected span so I needed an id so that I could reference the proper parent. If there is a more elegant way to do this, please let me know.
Lastly, onSelected method is implemented in controller:
vm.onSelected = function(x) {
document.getElementById(x.$$hashKey).parentElement.parentElement.style.backgroundColor = x.color;
};
This method changes the background color of the selected element parent. The color for each object is already stored in a object property.
When the user removes a certain element, a for loop runs over all selected persons and ensures that color of each DOM element stays the same as it was before the user removed a certain element.
vm.onRemove = function(x) {
for (var i = 0; i < vm.selectedPersons.length; i++) {
var x = vm.selectedPersons[i];
document.getElementById(x.$$hashKey).parentElement.parentElement.style.backgroundColor = x.color;
}
};
Its very late at this point but solved this a little cleaner I think.
Main point is add some css to override and clear the default background and then drop an ng-style to apply colors to ui select
ng-style="{ 'background-color': someVariable === true ? '#color1' : '#color2'}"
<style>
.select2-choice, .select2-arrow {
background-image: none !important;
background-color: transparent !important;
}
.select2-choice, .select2-arrow {
background-image: none !important;
}
.select2-arrow {
border-left: 0px !important;
}
.select2-drop-active {
border-top: none;
}
</style>
<ui-select ng-style="{ 'background-color': someVariable === true ? '#color1' : '#color2'}" multiple sortable="true" ng-model="RealtimeCtrl.selectedPersons" theme="bootstrap">
<ui-select-match placeholder="Select or search a person in the list...">{{$item.username}}</ui-select-match>
<ui-select-choices repeat="item in RealtimeCtrl.people | filter: $select.search">
<div ng-bind-html="item.username | highlight: $select.search"></div>
<!--<small ng-bind-html="item.email | highlight: $select.search"></small>-->
</ui-select-choices>
</ui-select>
I am binding my currently selected item like this:
The selected item gets visible, but how can I give the unselected items an unselected/default background color? When I set a background color to the template class I do not see anymore the background color set from the selection via mouse click.
Is the problem maybe that I have 2 backgrounds set but none is removed?
<div data-bind="foreach: items">
<div class="cellContainer" >
<div class="template" data-bind="click: $parent.selectItem, css: { selected: isSelected }">
<div data-bind="text: number"></div>
</div>
</div>
</div>
.selected {
background-color: #0094ff;
}
Sounds like a cascade issue. Make sure your ".template" style is defined before your ".selected" style in your css file.
Make sure your selectItem method resets isSelected on all elements before setting it to true on the argument. A naive implementation could be:
var ViewModel = function() {
// Skipped the rest for brevity...
self.selectItem = function(item) {
// Deselect all items first
for (var i = 0; i < self.items().length; i++) {
self.items()[i].isSelected(false);
}
// Select the argument
item.isSelected(true);
};
};
See this jsfiddle for a demo.
However, it is often easier to keep a reference on the parent view model to the currently selected item, and change the css binding to something like:
css: { selected: $parent.TheOneSelectedItem().number() == number() }
See this fiddle for the alternate demo.
Something like this might work.
.template {
background-color: #fff;
}
.template.selected {
background-color: #0094ff;
}
It does not look like a knockout issue.