I want to style a GtkToggleButton differently in the active and non-active states. As supplied, GtkToggleButton "sticks" active or not active after the click is finished -- i.e., the "toggle" part. I tried styling GtkToggleButton:active, but that doesn't "stick". That is, the GtkToggleButton:active CSS style elements do apply when the GtkToggleButton is clicked down, but when I release the mouse button, the widget's style reverts to the default (i.e., non-"active") style. Isn't the whole point of GtkToggleButton:active that the "active" state stays on when the button's state toggles to active after clicking, and then only goes off when when the button toggles back to not active after the clicking a second time? So why doesn't CSS applied to GtkToggleButton:active also stick?
Am I the only one who works on a problem for 3 hours, gives up, comes here begging for help, then tries that one.... last... thing..., and it works?
FYI, contrary to any documentation I could find, the style I was looking for is "checked", not "active" (yes, even for GtkToggleButtons that aren't checkboxes).
Related
In this Confirm to Delete dialog, I am going to click the Cancel button. When I am pressing the button, its css class is chagned and also its style is chagned. The button's backgournd color gets deeper.
I want to copy the new class names and its css content in the devtools. But when I put the mouse in the devtools and right click the mouse button to open the context menu to copy the class names, the class names in this Cancel button just go back to its original state.
It seems that if I click anywhere in the screen, the Cancel button lost its pressing CSS classes. How can I freeze the pressing state CSS classes? I tried with checking the active, hover, visit state in the devtools, but it cannot get the Cancel button's backgroud color get deeper.
Here, after clicking this Cancel button, and do not click anywhere else, it is like this.
After loading the page, not click the Cancle button, check its state in the devtools. Its backgroud color cannot get deeper.
If you know conclusively that the button is getting new classes assigned to it on click, you can add a breakpoint to the element itself on an attribute modification. The steps:
Find the element in the "Elements" pane.
Right-click the element in the "Elements" pane and select Break on > attribute modifications
Click the element
If it gets a new class, that counts as an "attribute modification," which will trigger the debugger to break and freeze the state-- from there you should be able to investigate the DOM in its current, frozen state.
Here is my screenshot showing me take this actions for the snippet at the bottom of the question-- it worked for me in Chrome on Windows 10.
function addClassToBtn() {
const btn = document.querySelector('button');
btn.classList.toggle('red');
}
.red {
background: red;
}
<button onclick="addClassToBtn()">Click me</button>
If that doesn't work, you could always be less targeted-- if you wanted to cast the widest net possible, I believe that right clicking the <body/> element in the "Elements" pane in the devtools and selecting Break on > subtree modifications would cause it to break anytime anything changed in the DOM beneath it-- but obviously that could cause the debugger to trigger a lot, so proceed with caution.
I want my application's buttons to be green only when I hover over them. Currently, they are green after I click one of them, until I click something else.
For instance, this button is green after clicking on it and before clicking somewhere else.
What's the name of this effect?
I am now looking over my css files, trying to find this effect and replace it with hover so that the buttons are green only when I hover over them.
My guess is that it is applying the style to the :focus pseudo-class.
The :focus CSS pseudo-class is applied when an element has received
focus, either from the user selecting it with the use of a keyboard or
by activating with the mouse (e.g. a form input).
Alternately, the style might be applied by JavaScript in response to click/focus events, either directly to the element, or by adding a class to the element.
As mentioned in the comments by #AdrianoRepetti, use dev tools to help identify how the style is being applied.
when I click on a Bootstrap button, a csss is applied while the mouse button is clicked. This is also visible when the mouse button is hold pressed over a bootstrap button.
I need to change that style, but I can't find it using inspect element. How can I find what style is applied and how can I change it?
I had this problem the other week. If you're using chrome, open inspect element, code highlight the button, right click, select Force Element State, select :focus. This will show you the CSS code that you need to alter.
Having an issue with this myself until I applied the style to .btn-default:active:focus
I have a component called X. I'm trying to make a menu come down from it when I put my mouse over it.
I have a mouseOver handler which changes the component's state to another state which shows an extra child component (the menu) on the lower part. This of course makes the X component grow.
I also have mouseOut event handler which makes the menu disappear by returning component X to its original state.
When I move the mouse over the component the menu appears as expected. But when I move the mouse down to the menu that is now visible, as soon as I touch it, it disappears. This way it's impossible to reach the menu.
I guess the mouseOut event is triggered as soon as I move out of the old boundaries. Is this so? And how can I avoid it? The new boundaries should now consider the extra child with the menu.
Thanks in advance,
Nuno
When you move over the child element you are mousing out of compo0nent "X".
Without seeing code I can't really help you. However you might want to try a few things.
Make a function that tests hit area
of the mouse and component and only
dispatch the event if it passes a
mouse out only if it isn't over your
component. Your component shouldn't dispatch a mouse out event just because the mouse moved out of the component
Change your listeners as needed
Event propagation
But really there is no way I can help more without code.
I may be trying to get too fancy on this one.
I have a pair of radio-like buttons in a row with a divider between them with background images. When one of the 'buttons' is clicked, I change its class. The CSS for the divider is keyed to the classes of the buttons on either side to select a background image. I am doing this with CSS 'sibling' selectors.
I have jQuery .click events tied to the 'buttons'. the first thing they do is clear the 'selected' class from the other button and set it on the button that was clicked.
For example, if the LEFT button class='selected' and the RIGHT button is not, the divider between them will get a blue background. Click on the RIGHT button and it gets class='selected' while the LEFT button's class is cleared. The divider turns red.
This works in IE, FF, Safari, etc. But IE is odd (IE7) - it will only reflect the divider background change when I mouse OFF the button I clicked! That is, in the example, the RIGHT button gets class='selected' and changes immediately on the click. But the divider stays blue until I mouse off the button, then it turns red.
The class itself IS changing and the button's appearance changes as a result. It's only the neighboring stuff that doesn't!?
It reminds me of my old VB6 days when you had to periodically call 'DoEvents' to get Windows to make UI changes. Could there be something similar here for IE?
I have no idea why this helps, but adding .hide().show() to a selector that includes the stuff that changed class seems to make it update.
I've read that using setAttribute to change the class will force IE7 to re-render the styles. Try that, and if it still fails, I've solved a similar IE7 problem by rewriting the html, which forced IE7 to re-render (using jquery):
if ($("html").hasClass("ie7")){
var tempHolder = $("#ajaxresults").html();
$("#ajaxresults").html(tempHolder);
}
As for giving the html or body tag the ie7 class, I recommend taking a look at html5boilerplate.com. If for some reason you can't use their solution, the jquery for it is:
if ($.browser.msie){
if ($.browser.version < 8){
$("html").addClass("ie ie7");
}
else {
$("html").addClass("ie");
}
}