I created an alert controller and am trying to style the header of the alert. I have checked out the docs but i couldn't find any solution.
async showAlert(header, subHeader, message) {
const alert = await this.alertCtl.create({
cssClass: "my-custom-class",
header,
subHeader,
message,
buttons: ["Ok"],
});
alert.present();
}
How do i style the header of the alert ?.
Edit:
This is the global.scss file
.my-custom-class {
.alert-wrapper {
.alert-head {
color: green;
}
}
}
Have tried this as suggested by #Vijay Kumawat but it still the same.
You have to add a custom class to the alert while creating the alert which I can see is my-custom-class in your alert. You can use this class as below to customize the alert style
.my-custom-class {
.alert-wrapper {
.alert-head {
// header styling here eg. background
h2 {
// header text styling here eg. color, font size
}
}
}
}
EDIT: the text in the header are in h2 tag so styling regarding text (font size, color etc. ) will go under h2 otherwise h2's default style will override the custom css added directly to .alert-head
NOTE: you can check the ion alert's element structure using inspect element.
Related
Working with antd components, if you have an Alert component, inside there is a tooltip that is given the styling through ant-alert-icon class. So, if we need to override the Tooltip color, you can have in your stylesheet a class to override the values. For example:
ant-alert-info {
.ant-alert-icon {
color: #3d6de7 !important;
}
}
However, this will apply the color #3d6de7 to all Alerts type Info. How can I apply a different color to just one specific Alert type Info while keeping the styling above for the remaining Alert type Info components? Is this possible? What are the alternatives to doing something similar?
I am able to change the background of the Alert using the style field as follows:
<Alert
description={}
type="info"
showIcon
style={!props.alert ? { backgroundColor: "#F4F0F0"} : { backgroundColor: "#fff2f0", border: "#ffccc7" }}
/>
However, I have not been able to change the Tooltip color.
Thanks!
You can set an additional className like ant-alert-info-custom this way:
<Alert
description={}
type="info"
showIcon
className="ant-alert-info-custom ant-alert-info-custom-with-red-icon"
/>
And use it like this:
.ant-alert-info.ant-alert-info-custom {
// some shared styles by all custom alerts
.ant-alert-icon {
color: #3d6de7 !important;
}
// specific style for red icon
&.ant-alert-info-custom-with-red-icon{
.ant-alert-icon {
color: red!important;
}
}
}
As you can see you can do this:
<ConfigProvider csp={{ nonce: 'YourNonceCode' }}>
<Button>My Button</Button>
</ConfigProvider>
I think you can use ConfigProvider to overwrite Antdesign styles. Check out the link for more info:
ConfigProvider.
I only want a particular div to display if showHideClassName is set to the value of true. I have this code in my React application so that a div will either display or not depending on the status of showHideClassName:
render() {
...
const showHideClassName = showPrompt ? 'show-div' : 'display-none';
return (
<div className={showHideClassName}>
...
</div>
);
}
The div is always visible though. Is there any way I can get this to work as I desire?
I don't have display-none in my css. Now that I've added the below, it works ad desired.
.display-none { display: none; }
I want to mark cells who has been edited so the user can see which cells have been touched and altered. I know there is a cell flash option, but that just changes the background colors for a bit. What I want is a background color change when an edit has been done.
Cannot seem to find any specific documentation on accessing for example the html element or the styling of affected cell.
Anyone got any ideas?
You can use ColDef.onCellValueChanged to detect if something changes and update the cell style accordingly using GridApi.refreshCells()
const columnDefs = [{
headerName: "Athlete",
field: "athlete",
onCellValueChanged: this.markAsDirty
},...]
...
private markAsDirty(params: ICellRendererParams) {
params.colDef.cellClass = (p) =>
p.rowIndex.toString() === params.node.id ? "ag-cell-dirty" : "";
params.api.refreshCells({
columns: [params.column.getId()],
rowNodes: [params.node],
force: true // without this line, the cell style is not refreshed at the first time
});
}
In your css file
:host ::ng-deep .ag-cell-dirty {
background-color: rgba(255, 193, 7, 0.5) !important;
}
You may also want to use defaultColDef if you want this behavior applied to all columns
this.gridOptions = {
defaultColDef: {
editable: true,
onCellValueChanged: this.markAsDirty
},
};
Live Demo
I did this on a project I was working on.
There is a cellClass property that you can define in your column definitions (https://www.ag-grid.com/javascript-grid-cell-styles/) and it can take a callback function with params: CellClassParams.
So try doing:
cellClass: (params: CellClassParams) => {
// you need to have a handle on the original untouched data
// See if the original value does not equal the modified value in params
// For shortness, I will write pseudocode
if (originalValue !== modifiedValue) {
return 'ag-cell-was-modified';
}
}
If many columns are editable, you may want to use a re-usable function for cellClass for each column.
That should apply the class ag-cell-was-modified conditionally whether the cell was modified or not and in your style.scss or main stylesheet, you can add:
.ag-cell-was-modified {
background: red;
}
Of course, if you are using SASS, you can place this class definition in somewhere more appropriate.
I am trying to get a vue component to announce information dynamically to a screen reader when different events occur on my site.
I have it working to where clicking a button will populate a span that is aria-live="assertive" and role="alert" with text. This works decently the first time, however, clicking other buttons with similar behavior causes NVDA to read the previous text twice before reading the new text. This seems to be happening in vue, but not with a similar setup using jquery, so I'm guessing it has something to do with the way vue renders to the DOM.
I'm hoping there is some way to workaround this problem or perhaps a better way to read the text to the user that would not have this issue. Any help is greatly appreciated.
Here is a simple component I set up in a working code sandbox to show the problem I am having (navigate to components/HelloWorld.vue for the code) -- Note: This sandbox has changed per the answer below. Full code for the component is below:
export default {
name: "HelloWorld",
data() {
return {
ariaText: ""
};
},
methods: {
button1() {
this.ariaText = "This is a bunch of cool text to read to screen readers.";
},
button2() {
this.ariaText = "This is more cool text to read to screen readers.";
},
button3() {
this.ariaText = "This text is not cool.";
}
}
};
<template>
<div>
<button #click="button1">1</button>
<button #click="button2">2</button>
<button #click="button3">3</button><br/>
<span role="alert" aria-live="assertive">{{ariaText}}</span>
</div>
</template>
Ok so what I've found works way more consistently is instead of replacing the text in the element with new text, to add a new element to a parent container with the new text to be read. Instead of storing the text as a single string, I am storing it in an array of strings which will v-for onto the page within an aria-live container.
I have built a full component that will do this in various ways as an example for anyone looking to do the same:
export default {
props: {
value: String,
ariaLive: {
type: String,
default: "assertive",
validator: value => {
return ['assertive', 'polite', 'off'].indexOf(value) !== -1;
}
}
},
data() {
return {
textToRead: []
}
},
methods: {
say(text) {
if(text) {
this.textToRead.push(text);
}
}
},
mounted() {
this.say(this.value);
},
watch: {
value(val) {
this.say(val);
}
}
}
.assistive-text {
position: absolute;
margin: -1px;
border: 0;
padding: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
<template>
<div class="assistive-text" :aria-live="ariaLive" aria-relevant="additions">
<slot></slot>
<div v-for="(text, index) in textToRead" :key="index">{{text}}</div>
</div>
</template>
This can be used by setting a variable on the parent to the v-model of the component, and any changes to that variable will be read to a screen reader once (as well as any time the parent container becomes tab-focused).
It can also be triggered by this.$refs.component.say(textToSay); -- note this will also be triggered again if the parent container becomes tab-focused. This behavior can be avoided by putting the element within a container that will not receive focus.
It also includes a slot so text can be added like this: <assistive-text>Text to speak</assistive-text> however, that should not be a dynamic/mustache variable or you will encounter the problem in the original question when the text changes.
I've also updated the sandbox posted in the question with a working example of this component.
I've been messing around with aurelia-dialog trying to get a modal dynamically populated with some information. I have some stuff working but the modal is the incorrect size for the data its displaying.
welcome.js
import {DialogService} from 'aurelia-dialog';
import {CmdModal} from './cmd-modal';
export class Welcome {
static inject = [DialogService];
constructor(dialogService) {
this.dialogService = dialogService;
}
OpenCmd(intName, opName, opDescription, parameters){
var cmd = { "CmdName" : opName, "Description" : opDescription, "Params" : parameters};
this.dialogService.open({ viewModel: CmdModal, model: cmd}).then(response => {
if (!response.wasCancelled) {
console.log('good - ', response.output);
} else {
console.log('bad');
}
console.log(response.output);
});
}
cmd-modal.html
<template>
<ai-dialog>
<ai-dialog-header>
<h2>${cmd.CmdName}</h2>
</ai-dialog-header>
<ai-dialog-body>
<p>${cmd.Description}</p>
<b>Parameters</b>
<div repeat.for="param of cmd.Params">
<p class="col-md-6">${param.Key}</p>
<p class="col-md-6">${param.Value}</p>
</div>
</ai-dialog-body>
<ai-dialog-footer>
<button click.trigger="controller.cancel()">Cancel</button>
<button click.trigger="controller.ok(person)">Ok</button>
</ai-dialog-footer>
</ai-dialog>
</template>
cmd-modal.js
import {DialogController} from 'aurelia-dialog';
export class CmdModal {
static inject = [DialogController];
constructor(controller){
this.controller = controller;
}
activate(cmd){
this.cmd = cmd;
}
}
When a link is clicked, a modal like the following is displayed:
As the image shows, the modal is the wrong size for the body and some of the text spills over the side. I think this is because cmd-modal.html is being rendered before the data for the repeater has been inserted.
Does anybody know how I could resize the modal to be the correct size for the body or delay the modal display until cmd-modal.htmlhas been correctly evaluated?
You can add style for width and height to the ai-dialog tag like this:
<ai-dialog style="width:600px; height: 350px;">
I think I found something similar to this when trying to add items of varying width to the dialog. The widths weren't know until after the dialog had been rendered. Well I think that is why!
In the end I added a CSS class on the ai-dialog element which included a general width setting and a media query.
...
width: 90vw;
#media (min-width: 46em) {
width: 44em;
}
....
I know I mixed vw and em measurements and there's probably better ways - but it works well in this app. I'm sure there's probably a "correct" Aurelia way to get the dialog to re-render but this is ample for our situation.
FWIW I also added a "margin-top: 4em !important" so that the dialog would appear just below the fixed header bar that Bootstrap was providing us.