I've been having trouble changing the colours of a custom disabled angular button. The button (or better - the button element) is conditionally disabled and that part works perfectly, but I need to set the colour of the disabled button to seem disabled (e.g grey) except when I inspect the element it seems to have the styles shown below despite being disabled. I've tried setting ef-ng-b2b-button:disabled {background: black !important} but it doesn't seem to work.
How it looks currently:
How it's supposed to look:
HTML
<ef-ng-b2b-button
ef-feature-id="vp.configurator.model-info-dialog.create-offer"
size="l"
type="primary"
prefixIcon="add"
(click)="createConfiguration('offer')"
[disabled]="!configurationValid"
>
{{ 'vp.modules.configurator.create.offer' | ppTranslate }}
</ef-ng-b2b-button>
<ef-ng-b2b-button
*ngIf="showContract"
ef-feature-id="vp.configurator.model-info-dialog.create-contract"
size="l"
type="primary"
prefixIcon="add"
(click)="createConfiguration('contract')"
[disabled]="!configurationValid"
>
{{ 'vp.modules.configurator.create.contract' | ppTranslate }}
</ef-ng-b2b-button>
CSS
div:nth-child(1) {
display: flex;
justify-content: flex-start;
}
div:nth-child(2) {
display: flex;
justify-content: flex-end;
ef-ng-b2b-button:first-child {
margin-right: 10px;
}
ef-ng-b2b-button:nth-child(2) {
margin-right: 10px;
}
}
You need to attach a style to this element: ef-ng-b2b-button with angular.
CSS doesnt notice the changes of the disabled button that come from changes in angular. In this case, the behavior isnt like it is for dom events such as 'hover', 'mouseover', 'focus', etc.
Try something along these lines:
<ef-ng-b2b-button
ef-feature-id="vp.configurator.model-info-dialog.create-offer"
size="l"
type="primary"
prefixIcon="add"
(click)="createConfiguration('offer')"
[disabled]="!configurationValid"
[style.color]="!configurationValid ? 'black': 'blue' " >
{{ 'vp.modules.configurator.create.offer' | ppTranslate }}
Look into the NgClass directive to set css classes on your condition with the ternary operator
https://angular.io/api/common/NgClass
<div [ngClass]="condition == true? 'enabledCssClass' : 'disabledCssClass' " >
or just use an ngIf with your condition and place two different button elements on the html page
Related
I wanna ask something about pseudo-element using tailwind, so before going through into my main problem I wanna show my code using CSS
.text-location {
display: flex;
gap: 1.625rem;
}
.text-location::after {
content: url('image/arrow-down-icon.svg'); <= example image
display: inline-block;
width: 100%;
height: 100%;
}
and the result is like this:
it's working and nothing something wrong when I used in CSS, but when I'm going through using tailwind the content is not showing anything, any wrong with my code? Or I must do something different what I have been made? I hope anyone can help and tell me where I made the mistake...Thank you before and have a nice day, bellow my code:
<label class="font-poppins text-sm font-light leading-[0.875rem] text-[#969696] flex gap-[1.625rem] after:content-[url('image/arrow-down-icon.svg')] after:inline-block after:h-full after:w-full">Location</label>
And the result:
You can use item-center class here and use text-black to make them look similar. You have to use custom fonts as popins is not supported by default.
You can refer here
Below is my code
https://play.tailwindcss.com/0wks3noHUe
You can define your content in the tailwind.config.js
theme: {
extend: {
content: {
'arrowDownIcon': 'url("../src/arrow-down-icon.svg")',
'arrowUpIcon': 'url("../src/arrow-up-icon.svg")',
},
fontSize: {
...
You can render it using the following className. Make sure to include an inline-block and width.
<label className="after:content-arrowDownIcon after:inline-block after:w-8">Learn More</label>
You can also apply a hover state like this hover:after:content-arrowUpIcon
<label className="hover:after:content-arrowUpIcon after:content-arrowDownIcon after:content-arrowBlack after:inline-block after:w-8">Learn More</label>
I'd like to increase the height of the Vuetify v-autocomplete, which is fixed at 304px (might be a calculated value, YMMV).
<v-autocomplete
class="flex-grow-0 ml-16 mr-6 largecontent"
prepend-inner-icon="mdi-magnify"
v-model="select"
:items="items"
item-text="name"
item-value="id"
:search-input.sync="search"
hide-no-data
label="Search anything (press /)"
>
<template #item="{ item }">
<v-list-item to="item.route">
<v-list-item-content>
<v-list-item-title v-text="item.name"/>
<div
v-if="item.desc"
v-html="item.desc"
/>
</v-list-item-content>
</v-list-item>
</template>
<v-autocomplete/>
These both work, but would apply the style to ALL v-autocomplete, which we don't want:
<style>
.v-autocomplete__content {
max-height: 600px !important;
}
</style>
<style>
.v_menu__content {
max-height: 600px !important;
}
</style>
So, I'd like to either scope it
<style scoped>
.v-autocomplete__content {
max-height: 600px !important;
}
</style>
Or add an entry to my global css file, something like:
.largecontent.v-autocomplete__content {
max-height: 600px !important;
}
But nothing seem to work, also tried the Vuetify deep selectors, but they seem to only work when there's a parent-child hierarchy, which is not the case here.
There is a menu-props property, that you can pass to v-autocomplete in order to customize its dropdown menu (including max-height).
<v-autocomplete :menu-props="{ maxHeight: 500 }">...
Did you tried put the lang=scss and use ::v-deep?
Maybe "deep" helps you to change the style in the way you want
In Ionic, the ion-title component has the content encapsulated in an extra div within its shadow-dom.
This div has the class .toolbar-title set. How can i select this div via scss-selector to change its overflow behavior?
I tried:
.toolbar-title { ... }
ion-title .toolbar-title
ion-title::shadow .toolbar-title { ... }
ion-title::shadow(div) { ... }
and a lot other combinations including :host & ::ng-deep selectors.
And, yes i know , ::shadow and ng-deep is deprectaded.
I also know that ionic has introduced css-variables for this purposes, but unfortunatley not for the overflow attribute.
THX in advance!
The concept of shadowDOM is you can't touch its content with CSS from the outside.
It is an open shadowDOM, so you can change it with JavaScript.
document.querySelector("ion-title")
.shadowRoot
.querySelector(".toolbar-title")
.style
.overflow = "initial";
Ionic v6 allows you to target and modify shadowDOM contents with CSS. See https://ionicframework.com/docs/theming/css-shadow-parts
However, the element you want to select inside the shadowDOM needs to expose a part attribute. For instance the ion-select element:
<ion-select>
#shadow-root
<div part="placeholder" class="select-text select-placeholder"></div>
<div part="icon" class="select-icon"></div>
</ion-select>
You can select the placeholder element with:
ion-select::part(placeholder) {
color: blue;
opacity: 1;
}
Unfortunately, the ion-title element does not expose any shadow parts. You need to wrap the contents of ion-title in a container to be able to modify them:
<ion-title>
<div class="content">
<img src="..." />
Hello World!
</div>
</ion-title>
CSS:
.content {
display: flex;
align-items: center;
}
StackBlitz example: https://stackblitz.com/edit/ionic-title-modification-8a1qst
I'm trying to modify the css color picker of a module, in order to adapt it to my website (align it to center).
Here's the code of the color picker:
#Component({
selector: 'color-circle',
template: `
<div
class="circle-picker {{ className }}"
[style.width.px]="width"
[style.margin-right.px]="-circleSpacing"
[style.margin-bottom.px]="-circleSpacing"
>
<color-circle-swatch
*ngFor="let color of colors"
[circleSize]="circleSize"
[circleSpacing]="circleSpacing"
[color]="color"
[focus]="isActive(color)"
(onClick)="handleBlockChange($event)"
(onSwatchHover)="onSwatchHover.emit($event)"
></color-circle-swatch>
</div>
`,
styles: [
`
.circle-picker {
display: flex;
flex-wrap: wrap;
}
`,
],
I'm using justify-content: center to the class circle-picker to align it, but nothing happens, so I don't really know if I'm able to do it.
Here's how I use the selector:
<color-circle [colors]="colors" [color]="productForm.get('color')?.value" (onChange)="onColorChanged($event)" width="190px" circleSize="34" circleSpacing="18"></color-circle>
When I inspect the code with the browser, I can make it, but with the CSS file nothing works.
Could anyone help?
This is what I want:
This is what I have:
Author of the color picker:
https://github.com/scttcper/ngx-color
If you want to set style to elements inside your host component. you must use :host
and to change deeper elements you have to use ::ng-deep
Use
:host color-circle ::ng-deep color-circle-swatch{
justify-content: center;
align-items:center
}
May be this two line of code can fix your problem
.color-circle-swatch{
margin: 0 auto;
width:100%;
}
I have a Home component with this inside:
<alert type="info">Hello from ng2-bootstrap</alert>
Inside my home.style.scss, I have this:
:host .alert {
background-color: green;
}
which should change the background color to green, but it does not.
The above css code will produce this style:
[_nghost-wjn-3] .alert[_ngcontent-wjn-3] {
background-color: green;
}
and the final HTML looks like this:
<home _nghost-wjn-3="">
<div _ngcontent-wjn-3="" class="card-container">
<alert _ngcontent-wjn-3="" type="info" ng-reflect-type="info">
<div class="alert alert-info" role="alert" ng-reflect-initial-classes="alert" ng-reflect-ng-class="alert-info">
Hello from ng2-bootstrap Sat Sep 17 2016
</div>
</alert>
</div>
</home>
I don't know what the problem is here, but I think the selector is wrong. I'd like the final selector to be:
[_nghost-wjn-3] .alert
instead of:
[_nghost-wjn-3] .alert[_ngcontent-wjn-3]
Or in other words, why is there no _ngcontent-wjn-3 attribute on <div class="alert">...</div>?
Maybe I'm doing the whole thing wrong. What I'm trying to achieve is to customize the CSS of the individual bootstrap components (<alert> in the code above) as provided by the ng2-bootrap library (https://github.com/valor-software/ng2-bootstrap) inside my custom components (<home> in the code above).
I'm using the default view encapsulation (emulated) in the home component.
How can I do that please?
I figured it out myself. This is what I was looking for:
:host /deep/ .alert {
background-color: green;
}
The above code will produce the following:
[_nghost-wjn-3] .alert {
background-color: green;
}
This way I can modify the default styles of a bootstrap class (.alert, in this case) inside of my component <home>.
Source: https://angular.io/docs/ts/latest/guide/component-styles.html
You need:
[_nghost-wjn-3] alert[_ngcontent-wjn-3]
Instead of:
[_nghost-wjn-3] .alert[_ngcontent-wjn-3]
If you go and check your structure, alert tag has the ngcontent... attribute, not his div child with alert class.