I'm trying to change the colour of a textfield when the user put the cursor on it, to be more easy to the user find the textfield.
I see in another post's how to change the colour with the css rules, and i found in the API, the fieldCls and focusCls to change the colours, but it isn't working, i know the problem is on the focus event that isn't fiering,
Definition of the Button:
xtype:'textfield',
focusCls:'red',
fieldCls:'green',
listener: {
'focus':function(){
Ext.Msg.Alert('Focus','TextField have focus'); //This don't run
}
}
CSS rules:
.red {
background-image: none;
background-color:#ff0000 !important;
}
.green {
background-image: none;
background-color:#00ff00 !important;
}
I made this test's on fiddle: http://jsfiddle.net/FabioJCosta/3ZZcZ/547/
Even when i'm forcing the focus with a button textfield.focus(false, 200); the focus event isn't fiering.
I hope this helps another people.
Thank You
You don't need jQuery if I understand the question.
.green:focus {
background-image: none;
background-color:#ff0000 !important;
}
.green {
background-image: none;
background-color:#00ff00 !important;
}
Related
I need to create some custom buttons - like a red button with white text, green button with white text, etc.
I followed the accepted answer of the same question "How to change background of hovered and pressed extjs-button dynamically" but did not work for me. It just changes the ui without any interactions. When I click the customized button, it toggles despite the handler function is executed.
ExtJS button has 2 configuration for styling according to documentation: overCls and pressedCls. Despite I set them both pressedCls configuration did not work for me.
Which css properties should I override/define in order to create my own buttons?
Sencha Fiddle Link: https://fiddle.sencha.com/#fiddle/fim
simply, every form component has a property called "cls". So you can use the following:
cls: 'myclass'
Edit for the last issue:
You have to override the x-btn-focus class, to remove/replace the blue background color:
.x-btn-focus.green-button {
background:#46a546;
}
Edit of your your fiddle's css:
.green-button{
background:#46a546;
border: none;!important;
color: #ffffff;!important;
}
.green-button .x-btn-inner {
color: #ffffff;
}
.green-button-over {
background: #4cc54c;
border: none;
}
.x-btn-over.green-button {
background: #4cc54c;
border-color: #4cc54c;
}
.x-btn-pressed.green-button {
background: #5b9f5b;
border-color: #5b9f5b;
}
.x-btn-focus.green-button {
background:#46a546;
}
Try using these css classes :
.x-btn-over.green-button
and
.x-btn-pressed.green-button
I don't know if this is preferable to defining and using a custom UI but it's a quick fix.
Hope it helps
Pedro
EDIT (adding css as in comment below)
.x-btn-over.green-button {
background: #4cc54c;
background-color: red !important;
background-image: none;
}
.x-btn-pressed.green-button {
background: yellow;
background-color:yellow !important;
border:solid 1px red !important;
}
Added some random properties you might need background-image, etc
Following CSS works for me:
.numpad-btn {
background: #008080 !important;
}
.numpad-btn .x-btn-inner {
color: #ffffff;
}
.x-btn-over.numpad-btn {
background: #00baba;
border: solid 1px #00baba !important;
background-color: #00baba !important;
background-image: none;
}
.x-btn-pressed.numpad-btn {
background: #005151;
background-color: #005151 !important;
border: solid 1px #005151 !important;
background-image: none !important;
}
.x-btn-focus.numpad-btn {
background: #008080;
}
I realize this question was related to ExtJS 4, but I wanted to add a solution for those that find this page but want to use ExtJS 6.
In ExtJS 6, you can create a custom theme using Sass that will result in the required CSS classes being generated for you. A tutorial for this can be found here: https://docs.sencha.com/extjs/6.2.0/guides/core_concepts/theming.html
As a simple example, this Sass snippet (after being processed by Sencha Cmd) results in the various CSS classes required for a red button. Note that the $ui attribute becomes the name you reference this style by.
#include extjs-button-small-ui(
$ui: 'red',
$background-color: red,
$border-color: red,
$color: #fff
);
You configure a component to use these classes via the 'ui' config attribute. For example:
{
xtype: 'button',
itemId: 'deleteBtn',
ui: 'red',
width: 180,
text: 'Delete',
tooltip: 'Delete this item',
handler: 'onDeleteClick'
}
I've created a plugin with a RichCombo box. Unfortunately the name of the dropdown is a little too long for the RichCombo and it gets cut off.
Is there a way to force a wider RichCombo? Likewise, is there a way to force a width of the actual dropdown list (ListBox) itself?
The CSS value you seek is .cke_combopanel { width: 150px; }. It can be found within editor.css.
style your page with:
.cke_combo_text {
width: 130px !important;
}
.cke_combopanel {
width: 370px !important;
}
I got it. I added this to the page containing the ckeditor control:
<style>
.cke_combo_text { width:auto !important; }
.cke_combopanel { height:600px !important; }
</style>
I am trying to use select2 on a webpage I am creating. However the combobox background seems to be transparent but I need to change it to another color. I tried modifying the select2.css file but nothing seems to work. Any Ideas ?
If you are trying to target the combo box wrapper use
.select2-search { background-color: #00f; }
If you are trying to target the input use
.select2-search input { background-color: #00f; }
And if you are trying to target the results wrapper use
.select2-results { background-color: #00f; }
Hope this helps!
It's a little late to help the OP, but I'll leave this answer in the hope it might help somebody.
I don't know about other versions, but using select2-rails 3.5.9.3 (which according to their github page means the version of select2 being used is 3.5) I was only able to change the background color as follows:
.select2-choice { background-color: #00f !important; }
The selector mentioned by Matthew for the results works, though.
Anyway, I didn't try it using "vanilla select2," so I don't know if there is any difference in this case.
For combo box
.select2-container--default .select2-selection--single{
background-color: #000;
}
For options search box
.select2-search--dropdown{
background-color: #000;
}
.select2-search__field{
background-color: #000;
}
and for options list
.select2-results {
background-color: #000;
}
A few more snippets below where I overrided the CSS in order to change the appearence of the Select2 dropdown select to suit my custom dark theme. (I'm using Bootstrap 5)
https://apalfrey.github.io/select2-bootstrap-5-theme/getting-started/basic-usage/
I accessed the non minified css file through the CDN to find what bits i needed to override and through trial and error, i came up with the below:
/* ------------------------------------- */
/* ---------- Select2 Library ---------- */
/* ------------------------------------- */
/* See https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-5-theme/1.2.0/select2-bootstrap-5-theme.css */
/* Change the appearence of the bakground colour surrounding the search input field */
.select2-search {
background-color: #343A40 !important;
}
/* Change the appearence of the search input field */
.select2-search input {
color: #ffffff !important;
background-color: #343A40 !important;
}
/* Change the appearence of the search results container */
.select2-results {
background-color: #343A40 !important;
}
/* Change the appearence of the dropdown select container */
.select2-container--bootstrap-5 .select2-selection {
border-color: #6c757d !important;
color: #ffffff !important;
background-color: #343A40 !important;
}
/* Change the caret down arrow symbol to white */
.select2-container--bootstrap-5 .select2-selection--single {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}
/* Change the color of the default selected item i.e. the first option */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
color: #ffffff !important;
}
Tested and worked for me with disabled Select2 4.1.0 :
.select2-container .select2-selection--single .select2-selection__rendered{
background-color: #fff;
}
.select2-container--default.select2-container--disabled .select2-selection--single{
background-color: #fff;
}
.select2-container--default .select2-selection--single, .select2-selection .select2-selection--single{
border: none;
}
.select2-selection
{
background-color: #f5f5f5 !important;
}
I have an image that loads into a DIV:
.playerSkipForward
{
background-image: url("../images/player/forward.png");
background-repeat: no-repeat;
cursor: pointer;
}
With hover image set
.playerSkipForward:hover
{
background-image: url("../images/player/forward-hover.png");
}
Then at a certain point I add a class to it that changes the image and makes it look "inactive"
$(track).parents().find('.playerSkipForward').addClass('playerSkipForward_inactive')
The new (inactive) class is declared in my CSS like so
.playerSkipForward_inactive
{
background-image: url("../images/player/forward_inactive.png");
background-repeat: no-repeat;
cursor: default;
}
The image changes to the one in the class above correctly. However, it still hovers and changes colors. I do not want to add an unbinding like .on('hover') because bindings can be tricky to manage. Is there a way to override the hover with just the added css class?
Looking at your comments I think this is an issue with CSS specificity.
Try using the following CSS class instead of your current .playerSkipForward_inactive:
.playerSkipForward.playerSkipForward_inactive,
.playerSkipForward.playerSkipForward_inactive:hover
{
background-image: url("../images/player/forward_inactive.png");
cursor: default;
}
Note I've also removed the background-repeat property. You already set the same value for this in your .playerSkipForward rule.
.playerSkipForward_inactive, .playerSkipForward_inactive:hover
{
background-image: url("../images/player/forward_inactive.png");
background-repeat: no-repeat;
cursor: default;
}
If you're using two classes at once, try this more specific selector:
.playerSkipForward.playerSkipForward_inactive,
.playerSkipForward.playerSkipForward_inactive:hover
{
...
}
or the more common and simple:
.playerSkipForward.inactive,
.playerSkipForward.inactive:hover
{
...
}
The following code should do the trick. Just override the hover functionality for inactive state using important keyword.
.playerSkipForward_inactive:hover
{
background-image: url("../images/player/forward_inactive.png") !important;
background-repeat: no-repeat !important;
cursor: default !important;
}
So it changes the background image, but not the background color.
Anyway care to point out the problem in my code?
JavaScript:
$("#menu a").hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
CSS:
.hover {
background-color: white;
background-position: top center;
background-image: url("img/dot.png");
background-repeat: no-repeat;
color: red;
}
As mentioned above... if you just add the following css, it will take care of it.
a:hover {
background-color: white;
background-position: top center;
background-image: url("img/dot.png");
background-repeat: no-repeat;
color: red;
}
:hover is a pseudo css class, and you can use it on anything, without needing to add the jquery/js to support it.
A shot in the dark:
you need to make sure that the nodes exist in the DOM before binding events to them. If you're calling your <script> in the <head> wait for document.ready:
jQuery(function($){
$("#menu a").hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
});
Alternatively, you could be overriding the background-color property by using a selector with a higher specificity elsewhere. If you've defined styles such as a:link, a:visited, a:hover, a:focus, or a:active you will need a higher specificity selector to override it:
a.hover {
/* your styles here */
}
You'll need to provide more of your CSS for us to give you better advice.
You may have misspelled an ID or not nested your a elements under another element with [id="menu"].
As per ShankarSangoli's comment, you likely have another rule in your css that is overriding the background color, which in turn is likely a problem with specificity.
You can test this by changing your hover function slightly:
$("#menu a").hover(
function () {
//add 'background-color' as an inline css style which will have higher specificity than anything in the css.
$(this).addClass("hover").css('background-color', 'white');
}, function () {
$(this).removeClass("hover").css('background-color', '');
}
);
Your problem is that something overwrites your background color. Use firebug or another DOM inspector to find your problem. A hotfix is to make your background-color important but you should only use this for testing:
background-color: black !important;
If this works, you still need to find out what is overwriting your background.
Then you can do this with pure CSS
#menu a:hover {
background-color: black;
background-position: top center;
background-image: url("img/dot_hover.png");
background-repeat: no-repeat;
color: red;
}