I am trying to programmatically set the selected index and it works fine, thanks to the [(selectedIndex)]="", but whenever I select index with this, there is no highlight on the selected item.
It is selected because you can see the content of it, but there is no graphical representation of selected tab state.
Is this a bug or it can be done somehow?
Html
<mat-tab-group [(selectedIndex)]="this.dataService.selectedTabs[0]">
<mat-tab *ngFor="let Tab of this.dataService.Tabs">
<ng-template mat-tab-label>
{{Tab.label}}
</ng-template>
<div *ngIf="Tab.childTabs.length !== 0">
//INSIDE OF THIS SECTION THERE ARE MORE NESTED TABS
</div>
</mat-tab>
</mat-tab-group>
And when I open this tab, nested tabs within its content won't be highlighted but they are opened.
Ts
public selectedTabs: any[] = [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
];
This solution works but it is mainly a workaround.
Just add this code in the style.css file:
.mat-tab-label-active {
bottom-border-style:solid !important;
opacity: 1 !important;
}
Related
When the button is clicked I want an area to write an e-mail. And when the delete icon is clicked, this area is deleted. How can i do
addListItem = () => {
var number=0;
var list = [...this.state.list];
number++;
var ele=
<div id={number}>
<span>{number}
<TextField id="standard-basic" style={{width:"60%"}}></TextField>
</span>
<IconButton>
<Delete></Delete>
</IconButton>
</div>
list.push(ele)
this.setState({list})
}
<Button onClick={this.addListItem} style={{ float : "left" ,marginTop:10,backgroundColor: "#657c9e", borderRadius: 4, boxShadow: "#727272", width: 159, height: 46 , color: Color.AIRPLATFORM.WHITE , fontSize: 15 , fontWeight: 500,marginLeft:0}} variant="contained">ADD</Button><br></br><br></br><br></br>
<div id="list" style={{backgroundColor:"#ffffff",borderRadius:16,padding:10,minHeight:140,width:406,borderRadius:8,marginTop:10,boxShadow: "0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(0, 0, 0, 0.14)"}}>
{this.state.list}
</div>
Here is my code
You can do conditional rendering. So, what conditional rendering is, you render the JSX element based on a condition.
Conditional rendering
{condition ? <p>True</p> : <p>False</p>}
This one will render True paragraph if condition is ture, and False paragraph if condition is false
{condition && <p>True</p>}
This one will render True only if condition is True, and render nothing otherwise
In your case
In your case, first you need a state variable to store the render choice
const [renderDelete, setRenderDelete] = useState(true)
Then, on click you set renderDelete to false:
<button onClick={() => setRenderDelete(false)> Render Delete </button>
Lastly, you conditional render based on the renderDelete variable:
Instead of <Delete /> you render:
{renderDelete && <Delete />}
You can do the same logic to toggle between rendering Edit field or Delete field:
{renderDelete ? <Delete /> : <Edit />}
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;
}
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
im trying to change the color of my text in a contentEditable div. I do this with the following code:
document.execCommand( 'styleWithCSS', false, true );
document.execCommand( 'foreColor', false, color );
This works pretty good. But if i try to do this in a <ul> or <ol> this is my ouput:
<ul><li><span style="color: rgb(0, 0, 255);">abc</span></li><li><span style="color: rgb(0, 0, 255);">def</span></li><li><span style="color: rgb(0, 0, 255);">ghi</span></li></ul>
as u can see it wraps the text but not the <li> so the dots/numbers wont change color.
How can i include the dots/numbers in the list so that they too change colors?
This is done in Angular 2 so preferably a solution in this context. JS would also work
we have the following code which is a html5 select dropdown menu:
<!doctype html>
<select name="indexCombobox1">
<option selected value="null"> Sort By:</option>
<option value="most_recent"> Most Recent</option>
<option value="most_popular"> Most Popular</option>
<option value="featured"> Featured</option>
</select>
is there a data attribute that can set the drop down background transparent so that you can see what's behind the drop down menu? is there a data attribute that changes the option highlight from default blue to a different color, e.g. yellow?
CSS(3) should do the trick. Something like:
option:hover {
background-color: rgba(0, 0, 0, .2);
}
Edit:
With jquery instead of css:
$('option').hover(function() {
$(this).css(backgroundColor: 'rgba(0, 0, 0, .2)');
}, function(){
$(this).css(backgroundColor: 'blue'); //or something else you consider 'normal'
});
I am increasingly using the jqtransform library to style form elements for both mobile webapps and HTML websites.
I can't confirm if it will enable you to make the background transparent, but it can do just about everything else to form elements.