I am very new to html and css , I have used angular-tabs-component for creation of tabs,so now i want to change background color of tab..can some one suggest me how to do.here is my code...
HTML:
<tabs (currentTabChange)='onSelectChange($event)'>
<tab tabTitle="Live">
</tab>
</tabs
Add class tab to tab tag-
<tabs (currentTabChange)='onSelectChange($event)'>
<tab tabTitle="Live" class="tab-background">
</tab>
</tabs
and then in the css of that component add -
.tab-background {
background-color: red;
}
Related
I have a question about adding styles to Angular components.
e.g I would like to have every second angular component in a list to have red background-color.
How can I make it happen?
I tried a lot of different things - it seems that it is added in HTML but doesn't work.
<ang-component class="someClass" />
<ang-component class="someClass" />
I tried setting it in parent component styles
ang-component:nth-child(odd) {
background-color: red;
}
but it doesn't work. It shows up while inspecting but there is no visible effect
EDIT: Code - to show an example how it looks
<form [formGroup]="form" class="someParentClass" (ngSubmit)="onUpdateForm()" >
<item></item>
<hr />
<item></item>
<item></item>
<hr />
<div id="btn-save-section">
<button class="cancel-btn" type="button">Cancel</button>
<button class="update-btn" type="button">Update</button>
</div>
I want item components to change - so every second should have background color red
ang-component:nth-child(odd) > * {
background-color: red;
}
because your component root element is probably only a container w 0 width and 0 height
I have this css code for an Angular mat-group-button
mat-button-toggle-group mat-button-toggle button div.mat-button-toggle-label-content {
line-height: 0px;
}
This is the generated code
<mat-button-toggle-group _ngcontent-sah-c203="" role="group" name="os_attribution" aria-label="Atribuição de OS"
class="mat-button-toggle-group mat-button-toggle-group-appearance-standard" ng-reflect-name="os_attribution"
aria-disabled="false">
<mat-button-toggle _ngcontent-sah-c203="" value="anyone"
class="mat-button-toggle mat-button-toggle-appearance-standard" ng-reflect-value="anyone" tabindex="-1"
id="mat-button-toggle-2"><button type="button" class="mat-button-toggle-button mat-focus-indicator"
id="mat-button-toggle-2-button" tabindex="0" aria-pressed="false" name="os_attribution">
<div class="mat-button-toggle-label-content">
<mat-icon _ngcontent-sah-c203="" role="img" class="mat-icon notranslate material-icons mat-icon-no-color"
aria-hidden="true">assignment_turned_in</mat-icon>
Atribuídas
</div>
</button>
</mat-button-toggle>
</mat-button-toggle-group>
I am able to change the style of the elements until this selection
mat-button-toggle-group mat-button-toggle {
background: red;
}
But after that, when I reach button, nothing I've tried works
What's happening ?
I suppose you're using angular right?
In this case the problem is about view encapsulation.
If you check the generated styles, you notice that they are scoped to the parent components assigned ID.
To opt out of the view encapsulation you can use the ::ng-deep selector.
::ng-deep mat-button-toggle-group mat-button-toggle button div.mat-button-toggle-label-content {
line-height: 0px;
}
You forgot to use the CSS class selector .!
.mat-button-toggle-group .mat-button-toggle {
background: red;
}
If any of those are angular components, you cannot be sure that they will build into the same HTML tag names. Its better to use classes if it involves non-standard tag names (stuff that isn't button, div, span, etc).
mat-button-toggle is missing the period. Needs to be .mat-button-toggle.
I have a loop that generate names + icon.
I would that icon only shows on hover.
<div class="elm" *ngFor="let element of callWorkflowData?.jobsList">
<mat-card (mouseover)="hover=true" (mouseleave)="hover=false">{{element}}
<mat-icon [ngClass]="hover?'show-icon':'hide-icon'" ng aria-hidden="false" aria-label="Example home icon">add</mat-icon>
</mat-card>
</div>
Actually the icon became visible on all cards list when I hover only one element.
I would that the icon shows only on the hovered element
In your original code, the same condition applies to the class binding of all icons. That is why they all change at the same time.
You could define a hoverElement property in the component class. It would be set to the hovered element on mouseover and reset on mouseleave. The class binding condition would check if the element variable corresponds to that hoverElement:
<div class="elm" *ngFor="let element of callWorkflowData?.jobsList">
<mat-card (mouseover)="hoverElement = element" (mouseleave)="hoverElement = null">{{element}}
<mat-icon [ngClass]="hoverElement === element ? 'show-icon' : 'hide-icon'" ...>add</mat-icon>
</mat-card>
</div>
See this stackblitz for a demo.
Please note that the same result can be achieved with only CSS and the :hover selector:
mat-card mat-icon {
color: orange;
}
mat-card:hover mat-icon {
font-weight: bold;
color: darkgreen;
}
See this stackblitz for a demo.
I want to hover on an element (an imagemap area, actually but I made it a simple div for this example) and create an animation on a different div element. Since they're not child or sibilings I had to use java and addclass but it's not working. It looks like the trigger element is not recognized and if I hover it nothing happens
<div class="testHover">
<p>Hover me to change color</p>
</div>
<div id="timeLine">
<div id="primaGuerraMondiale">
<h2>Content</h2>
</div>
</div>
css
#primaGuerraMondiale {
background: green;
}
.animated {
color:white;
}
javascript
$('.testHover').hover(function() {
$('#primaGuerraMondiale').addClass('animated');
}, function() {
$('#primaGuerraMondiale').removeClass('animated');
});
Here is the fiddle https://jsfiddle.net/elisapessa/yzLe803n/
You need jQuery 1.9.1 and above to make it work. The code is right.
In the left hand panel in the jsfiddle, there is a section called "Add Resources". Click this, then add the URL into the field and click the + button. This will add your resource (JS or CSS) to the page. After that you click on run and check it:
I want to change the font-size of the text in a tab.
This does not work:
<zk>
<style>
.xxx {
font-size: 28px;
}
</style>
<vlayout style="padding:20px">
<tabbox width="100%">
<tabs>
<tab label="Tab 1" sclass="xxx"/>
<tab label="Tab 2"/>
<tab label="Tab 3"/>
</tabs>
<tabpanels>
<tabpanel>This is panel 1</tabpanel>
<tabpanel>This is panel 1</tabpanel>
<tabpanel>This is panel 1</tabpanel>
</tabpanels>
</tabbox>
</vlayout>
</zk>
What am I doing wrong?
If you have to have this then you can achieve it by doing the following
.xxx * {
font-size: 28px !important;
}
now use sclass="xxx" on tabpanels to apply instead of tab as the content goes into tabpanels.
Using .xxx * means this css class will be applied to the tabpanels as well as all children component. Also !important is required to override any font-size settings used by children components
Note: This way of overriding is NOT recommended as most components rely on their own css settings for consistent look & feel as well as behavior across all browsers