I got an issue with the alert box of sencha touch control.
Issue is: I would like to change background color of alert box, I tried to implement CSS but its not letting me to do it.
Is there any other way to change background color of alert box in sencha?
Early reply will be appreciated!
Thanks
Use below css classes to change MessageBox bg color and MessageBox text properties.
// To change messagebox background color
.x-msgbox
{
background-color: #fff;
}
// To change messagebox text properties
.x-msgbox-dark .x-msgbox-text {
color: #000 !important;
font-size: 14px;
font-family: Helvetica, Arial, sans-serif;
}
// To change messagebox title
.x-toolbar-dark .x-title {
color:#000 !important;
font-size: 20px !important;
font-family: Helvetica, Arial, sans-serif;
}
Hope it helps.
Thanks Gendaful
Related
I want to remove or change the background of the subtitles. I've changed the background-color and background but it doesn't work. can the background change?
::cue {
color: red;
background-color: blue; //or background: blue;
}
the subtitle color changes to red but the background doesn't change at all
I tried the following:
::cue {
color: red;
// take an absurd big outline, because background is only behind the text
outline: 500px solid blue;
// dont know why background-color is not working but background-image does the job
background-image: linear-gradient(blue, blue);
}
I am trying to build a Toggle button which has two states, Edit and Preview.
My demo is here:
https://codepen.io/yu-zhang/pen/rNmPyxG?editors=1111
<button aria-pressed="true"
id="speakerPower" class="switch">
<span aria-label="edit">edit</span>
</button>
button.switch {
margin: 0;
padding: 0;
width: 70px;
height: 26px;
border: 2px solid black;
display: inline-block;
margin-right: 0.25em;
line-height: 20px;
vertical-align: middle;
text-align: center;
font: 12px "Open Sans", "Arial", serif;
}
button.switch span {
padding: 0 4px;
pointer-events: none;
}
button[aria-pressed="true"] {
background: #262;
color: #eef;
}
button[aria-pressed="false"] {
color: #a;
}
label.switch {
font: 16px "Open Sans", "Arial", sans-serif;
line-height: 20px;
user-select: none;
vertical-align: middle;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
document.querySelectorAll("button").forEach(function(theSwitch) {
theSwitch.addEventListener("click", handleClickEvent, false);
});
function handleClickEvent(evt) {
let el = evt.target;
if (el.getAttribute("aria-pressed") == "true") {
el.setAttribute("aria-pressed", "false");
el.textContent= 'preview';
el.setAttribute("aria-label", "preview");
} else {
el.setAttribute("aria-pressed", "true");
el.textContent = 'edit';
el.setAttribute("aria-label", "edit");
}
}
But the strange thing is: VoiceOver + Chrome(92.0.4515) reads out the aria-labels while toggling but VoiceOver + Safari(14.1.2) does not read out the aria-labels.
Any ideas?
You are changing both the aria-pressed state and the aria-label property. It's important to know the difference between a state and a property, even though both begin with "aria".
When changing a state, you typically get an automatic announcement by the screen reader ("pressed/unpressed", "checked/unchecked", "expanded/collapsed") of the state change.
When you change a property, no such "free" announcement is made.
You'll see/hear differences depending which screen reader and which browser you're using. Sounds like you're getting the desired behavior in chrome but not safari. It's undefined which one is correct since changes in properties don't have to be announced.
To work around it, you can have a hidden aria-live="polite" region. In your click handler, just update the innerHTML of the live region with the new label and it'll be announced. I don't know if that will cause double announcements on chrome.
You'll also want to visually hide the live region so you can't see it but you can't make it display:none because then the aria-live won't be announced.
<div class="sr-only" aria-live="polite" id="foo"></div>
(See What is sr-only in Bootstrap 3? for info on the "sr-only" class.)
In your click handler, get the "foo" element and change its innerHTML to "preview" or "edit".
I use vue-slick-carousel for a carousel in my project.
I want to change the color of the arrows without changing the style in the module of this package.
I added this code in the main CSS file and this not working for me
.slick-prev:before,
.slick-next:before {
font-size: 20px;
line-height: 1;
opacity: 0.75;
color: red !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
Funny I've had the same problem a while ago, my problem was that I had defined my styles in a scoped style tag.
Try this code in a global style tag:
button.slick-prev:before, button.slick-next:before {
background-color: red !important;
}
Which property of THEMES/CLARO.CSS inside DOJO TOOLKIT shows the text box inside the buttons DIJIT/FORM/BUTTON ??
I would like to remove the black box from the text and icon.
Change the "baseClass" button but it still persists.
Configure the following:
.button0 {
margin: 2px;
padding: 3px;
background-color: #ffec64;
border-radius: 9px;
border: 3px solid #ffaa22;
}
.button0:hover {
background-color: #ffaa22;
}
And add "button0" to "baseClass" of widget.
I found the class that had the box and was able to get it out:
.dijitButtonNode {
border: 0px;
}
In elementUI, I've got a el-menu component and there is a el-submenu in it,
I can change the bg-color of el-menu-item when I hover it and I code like
.el-menu-item:hover {
background-color: black;
color:white
}
however when I do the same to the el-submenu, it failed
.el-submenu:hover{
background-color: black;
color:white;
}
I tried another way
.el-submenu.is-opened {
background-color: black;
color:white;
}
also can't work
it appears like that
and I want to change the bg-color when I hover the submenu and when it is open
I had the same problem and found that you can do the following to change the background color when hovering over a el-submenu:
.el-submenu__title:hover {
background-color: #000 !important;
}