I need it in order to make clickable just a piece of the checkbox label (Privacy Policy). This is the snippet:
<div>
<mat-checkbox required formControlName="privacyCheck" [checked]="false">
<b style="color: crimson">*</b>Accetto la
<i style="color: #770E0E" (click)="printDebug()">privacy policy</i>
e i termini di condizione dell'utilizzo del servizio.
</mat-checkbox>
</div>
At the moment, if i click on the italic text ("privacy policy"), i got the printDebug but of course the checkbox will be setted to "checked".
I tried several solutions using CSS property pointer-events: none !important; on .mat-checkbox-layout .mat-checkbox-label span, .mat-checkbox-layout .mat-checkbox-label, and so on.
How about a good old fashioned stopPropagation()?
I was a bit too quick with my answer
You need to do preventDefault(), because the content of the mat-checkbox will be put inside a <label> and it's default browser behavior to check a checkbox if you click on the attached label.
<i style="color: #770E0E" (click)="printDebug($event)">privacy policy</i>
printDebug(event: MouseEvent) {
event.preventDefault();
// ...
}
If you are using the ripple effect from material, this will still be triggered. If you do not want this, you will have to do a .stopPropagation() on mousedown:
<i style="color: #770E0E" (mousedown)="$event.stopPropagation()"
(click)="printDebug($event)">privacy policy</i>
stackblitz
Related
I have an issue with some components which using ng-template. If the component I'm using generates some elements which I don't want or contain a buggy thing, I seek for workarounds. Ideally I shouldn't do, but once there are some issues with these depending lib and I'm compelled to do so. Previously faced similar issue with popver, and now with ngx-datatable. I appreciate if you can tell me the better practice I need to follow.
i.e. here for ngx-datatabler-row-detail template I get an output with a div which has .datatable-row-detail class. If I don't override it with /deep/ (which is deprecated I heard), even !important doesn't work to override the width. How can I override these class styles for generated fields within angular component, since there is no way to give them an id ?
/deep/
.datatable-body-row{
border-bottom:1px solid #000;
}
/deep/
.datatable-row-detail{
width:600px !important;
}
<!-- Row Detail Template -->
<ngx-datatable-row-detail [rowHeight]="120" #myDetailRow (toggle)="onDetailToggle($event)">
<ng-template
...>
<div style="padding-left:35px" >
<div><strong>==== Details ===</strong></div>
<li *ngFor="let detail of row.details">
{{detail }}
</li>
</div>
</ng-template>
</ngx-datatable-row-detail>
<ngx-datatable-column>
<ng-template
...>
<a
(click)="toggleExpandRow(row)"> <i class="fa fa-cube btn-link" hover-class="active"></i>
</a>
</ng-template>
</ngx-datatable-column>
Please see this stackblits. Just remove the /deep/ from css and when you click on open you no longer see the background.
https://stackblitz.com/edit/ngx-datatable-row-detail-omuywi?file=app/app.component.css
I don't think it is possible to override the thirdparty component styles from an Angular component in a clean way. (There are options like using the deprecated deep or turning off ViewEncapsulation.)
However, overriding them is possible from the global styles.scss in the app root. If we put the following styles into it, it works:
.datatable-body-row {
border-bottom: 1px solid #000;
}
.datatable-row-detail {
background: rgb(134, 79, 79) !important;
}
Stackblitz:
https://stackblitz.com/edit/ngx-datatable-row-detail-mj3otr?file=styles.css
if I set up a className for certain components like
<Segment className="Change" color='blue' inverted></Segment>
and in my css I use
.Change:hover{
background-color: black; //or any other change on hover
}
nothing is overriden on the hover.
I have also noticed there are many other components that refuse changes of mine, seemingly randomly. One semantic component will let me change a width the next will not. Is the cause from the same issue? How do I override the color on a hover?
After reviewing the source code of Segment Component (github), I found it has two default classes: segment and ui. In addition, you used two props color=blue and inverted. So I would recommend using the following code.
.ui.segment.blue.inverted.Change:hover {
background-color: black !important;
}
Working DEMO
Choose any color semantic-ui provide for example:
<Form>
<Form.Input label="Email" type="email" />
<Form.Input label="Password" type="password" />
<Button color="teal" type="submit">
Sign In
</Button>
</Form>
Your button appears like:
You can add inverted props inside Button component that react semantic-ui provide
<Form>
<Form.Input label="Email" type="email" />
<Form.Input label="Password" type="password" />
<Button inverted color="teal" type="submit">
Sign In
</Button>
</Form>
your component appears like:
On hover returns to basic style opposite of inverted
styled components usage with react semantic ui
I recommended you to use styled-components in order to override semantic-ui component style
import { Tab, Form, Button, Grid, Icon } from "semantic-ui-react";
import styled from "styled-components";
const Mybutton = styled(Button)`
&:hover {
color: #fff !important;
}
`;
Next use your new styled component instead of semantic-ui
<Mybutton inverted color="teal" type="submit">
Sign In
</Mybutton>
Because you didn't provide more code, hard to guess what overriding style you try to change. Try to add !importanant rule to this style.
.Change:hover {
background-color: black !importanant;
}
To avoid !important, which is not always a good solution, add a more specific CSS selector, for exaple Segment.Change:hover.
UPDATE:
Try to remove color='blue' from the template and check if will work with and without !important rule.
I am using Angular Material and I have used md-checkboxes throughout however when I have a checkbox checked and focused it gives me a strange pink circular shadow around the checkbox (I just want to be able to change the colour)
<md-checkbox class="gray md-default-theme md-checked" checked="checked">
// When this is checked and in focus it adds the class 'md-focused' & gives this a faint pink circle around the checkbox
<md-checkbox class="gray md-default-theme md-checked md-focused" checked="checked">
Can anyone explain how I alter this to change the colour via css?
You have to override .md-focused .md-container:before because the style is added to a pseudo-element... (PLUNKER DEMO)
To override all checkboxes focus:
md-checkbox.md-focused .md-container:before {
background-color: transparent !important;
}
To override just certain checkboxes:
HTML
<md-checkbox class="md-checkbox-no-focused">
Checkbox without focus
</md-checkbox>
CSS
.md-checkbox-no-focused .md-container:before {
background-color: transparent !important;
}
I was using routerLinkActive="active" inside the html file with routerLink=[myId] to highlight the active anchor in a ul.
Example:
<a [routerLink]="[myId]" class="list-group-item clearfix" routerLinkActive="active">
<div class="pull-left">
<h4 class="list-group-item-heading">{{someName}}</h4>
</div>
</a>
But when I remove the [routerlink]="[myId]" and replace it with a click listener (that does some calculation and then redirects the route using this.router.navigate(['/someURL', myId]) ) the routerLinkActive="active" no longer works/highlights.
Example:
<a (click)="onClick(myId)" class="list-group-item clearfix" routerLinkActive="active">
<div class="pull-left">
<h4 class="list-group-item-heading">{{someName}}</h4>
</div>
</a>
When inspecting the anchor elements using the routerLink=[myId], the style is set to:
.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
z-index: 2;
color: #fff;
background-color: #337ab7;
border-color: #337ab7;
}
Is it possible to set the active anchor style in the .ts file in the onClick() function? Or is there a simpler way around this?
Highlighting a specific link in the navigation is a reflection of the current state of the app: link A is highlighted because the user is looking at page A.
You're asking how to highlight the link as the result of a click. This approach is less than ideal: you could end up highlighting the link before the new route/page is actually activated. Most importantly, if the user reloads the page or navigates to it directly because they bookmarked it, the link will NEVER be highlighted (because no one clicked it).
You need to find a way to highlight the link based on app state, NOT as the result of an action (the typical flow is: action => changes state => updates UI).
Maybe something like this:
#Component({
template: `
<a [class.active]="currentPath == 'home'">HomeComponent</a>
`
})
export class HomeComponent {
currentPath = '';
constructor(route: ActivatedRoute) {
// Retrieve current path.
this.currentPath = snapshot.url.join('');
}
}
The idea is to retrieve the current path and expose it to the template.
Like Günter suggested, you can probably find more robust code for testing the current path in routerLinkActive's source code.
When I create toolbar button in CKEditor 3.0 with following code I need to uncomment icon property to get button visible. Otherwise space is occupied but no label is shown. When I hover over it I get caption popping up.
editor.ui.addButton('customButton', {
label: 'Custom Action',
//icon: this.path + 'images/anchor.gif',
command: commandName
});
Do you know how to create toolbar button without icon? Just a pure text.
An easier way is that CKEditor creates a CSS class on your custom label automatically called:
cke_button_<command>
For example, if your command for the button was called 'myCommand', and you set 'label: 'My Command', then CK would render something like:
<a id="cke_27" class="cke_off cke_button_myCommand" ....>
...
<span id="cke_27_label" class="cke_label">My Command</span>
</a>
Therefore (assuming you are using the 'kama' skin - substitute for your skin if not), you can use the following CSS to override the cke_label ==> display:none
.cke_skin_kama .cke_button_myCommand .cke_label {
display: inline;
}
Voila.
This is how I did it. A button looks like this:
<span class="cke_button">
<a id="cke_..." class="cke_off cke_button_cmd" ...>
<span class="cke_icon"/>
<span class="cke_label">Label</span>
</a>
</span>
.cke_label is styled "display:none" by default. This would do exactly what we want:
<span style="display:none;" class="cke_icon"/>
<span style="display:inline;" class="cke_label">Label</span>
So the selectors are a bit tricky, put this in the Style Tag on the page with the editor:
<style type="text/css">
.cke_skin_kama .cke_button_CMDNAMEHERE span.cke_icon{display:none !important;}
.cke_skin_kama .cke_button_CMDNAMEHERE span.cke_label{display:inline;}
</style>
The ckeditor authors applied css to get the label on the source button (presets.css):
/* "Source" button label */
.cke_skin_kama .cke_button_source .cke_label
{
display: inline;
}