I am trying to work with the Bootstrap 5 Toggle Button (using the Outline Style for a more evident visual emphasis). However, the UX experience is not quite what I'm hoping for.
(See https://getbootstrap.com/docs/5.0/forms/checks-radios/#outlined-styles)
The toggle per se works well, its the focus (or after the click focus I should say) that's the problem. When the button is in an unchecked state, the visual clue is prominent since the button is outlined. When the button is in an checked state, again the visual clue is prominent because the button is filled. When the button transitions from an unchecked to checked state, the change is evident as it transitions from outlined to filled.
The problem is when unchecking. When the button transitions from a checked to unchecked state, the button remains filled until a) the mouse is moved on device with a cursor, or b) another location on the page is touched on a touch device. The user obviously believes that they have not unchecked the button when it has in fact been unchecked and then proceeds to continue to attempt to uncheck the button.
The problem is even more evident when dealing with multiple checkboxes in a button group.
(See https://getbootstrap.com/docs/5.0/components/button-group/#checkbox-and-radio-button-groups)
I have tried using javascript to call blur on the checkbox's click event, and although that approach has a limited degree of success, it does nothing on touch devices as the virtual pointer for the device remains hovering over the button. I also tried calling focus on a different element on the page with the same result.
Does anyone have any suggestions?
Was submitted for bugfix here: https://github.com/twbs/bootstrap/issues/34664
I am working on a website based on Prestashop, and there is a tag which classes are changed (from "col-md-12" to "col-md-6") when one activate a switcher.
I would like to be abble to see how and where this changed is made in the javascript code (I suppose it must be Javascript that make the change).
Thank you
Open chrome developer tools (F12 on Windows/Linux,
Command+Option+I on Mac).
Click on the element picker at the top-left corner of the devtools
panel.
With this tool selected, find (in page) and click on the element whose
attribute is changed at runtime. The tag must now be highlighted in devtools panel
too. Right-click the highlighted tag in devtools.
In the pop-up menu, hover over Break on and select attribute
modification.
Click the switch that changes the class to col-md-6.
Please note that this will pause the execution every time one of the attribute is modified, which includes addition/removal of an attribute or change in their values.
I have the following element:
And then I use jquery fadeOut(), then remove() method to remove the yellow element.
This works perfectly in every browser except in android Chrome, which looks like the picture above.
The element is supposed to be removed, yet still, it exists on the screen unless I change the phone orientation.
I used chrome inspector, through Remote debugging, to check the element, and indeed the element is removed as revealed in the element panel. I just wonder why the element still shows on the screen.
The element with class LMnwtItem clearly is left with one, with display being none, yet on the screen, still showing the element.
Any help is much appreciated.
btw, sorry for being unable to show the codes.
ONE MORE INFORMATION WHICH MAY HELP
The element, however, will disappear after hiding the parent element and then showing the parent element again, but only manually.
How can I inspect an element which disappears when my mouse moves away?
I don't know it's ID, class or anything but want to inspect it.
Solutions I have tried:
Run jQuery selector inside console $('*:contains("some text")') but didn't have any luck mainly because the element is not hidden but probably removed from the DOM tree.
Manually inspecting DOM tree for changes gives me nothing as it seems to be just too fast to notice what have changed.
SUCCESS:
I have been successful with Event breakpoints. Specifically - mousedown in my case. Just go to Sources-> Event Listener Breakpoints-> Mouse-> mousedown in Chrome. After that I clicked the element I wanted to inspect and inside Scope Variables I saw some useful directions.
(This answer only applies to Chrome Developer Tools. See update below.)
Find an element that contains the disappearing element. Right click on the element and apply "Break on... > Subtree Modifications." This will throw a debugger pause before the element disappears, which will allow you to interact with the element in a paused state.
Update Oct 22 2019: with the release of v. 70, it looks like FireFox finally supports this kind of debugging 2 3:
Update Sep 15 2020: Chrome has an "Emulate a focused page" option (you can get it from the [⌘]+[P] Command Menu, or Global Preferences) for this exact need. 5 - h/t #sulco on Twitter
An alternative method in Chrome:
Open devTools (F12).
Select the "Sources" tab.
While the element you want is displayed, press F8 (or Ctrl+/). This will break script execution and "freeze" the DOM exactly as it is displayed.
From this point, use Ctrl+Shift+C to select the element.
Open console
Type in setTimeout(()=>{debugger;},5000);
Press Enter
Now you have 5 seconds to make your element appears. Once it appeared, wait until the debugger hits. As long as you don't resume, you can play with your element and it won't disappear.
Useful tip to avoid repeating those steps above every time:
add this as a bookmarklet:
Bookmark any page
Edit this new bookmark
Replace the URL/location with: javascript:(function(){setTimeout(()=>{debugger;},5000);})();
Next time you wish to use this, just click/tap this bookmark.
Verified in 2022
Do the following:
Open the console and navigate to Elements tab
Type command + shift + P (OSX) or control + shift + P (Windows)
Type the word focused
Select Emulate a focused page from the the menu
Now clicking around in the console will not close the element.
I am using chrome on Mac there I've followed above steps but I'll try to explain a bit more:
Right click and go to inspect element.
Go to sources tab.
Then hover on the element.
Then using keyboard F8 or Command(Window) \. It will pause the screen in a static state and the element won't disappear on hover out.
In Firebug there are different solutions for this:
You can use Break On Mutate inside the HTML panel. (with this you'll also be able to find out which element it is)
You can right-click the element and choose Inspect Element with Firebug
Also you may want to follow issue 551, which asks for a way to temporarily block specific events.
Edit:
To find out which element it is you can also enable the HTML panel options Highlight Changes, Expand Changes and Scroll Changes Into View to make the element visible inside the HTML panel.
Sebastian
In my case, I used Expand recursively option on google chrome:
The steps are:
Inspect the dropdown field
Find the dynamic DOM (the purple highlight)
Right-mouse click on that dynamic DOM
Choose Expand recursively:
We can see all elements are there
Here is a demo:
Hover over the element with your mouse and press F8 (this in Chrome) to pause the script execution. The hover state will remain in visible to you.
It take you to the sources tab.
Go back to Elements tab. This time code will not disapper.
There Could be Dom element and the controller functions fighting at to refresh the session. Running the application by "Start without debugging" helped in my case.
enter image description here
you can view the elements appearing and disappearing in the inspector under elements. If you navigate to the element when it is visible you should be able to see it disappear or see its css change when it status changes.
This is possible with firebug in firefox or the built inspector in chrome.
I've written an article about debugging CSS of disappearing elements
Using hotkeys to automatically go into debugger mode with hotkeys keyboard shortcut:
Install the shortkeys extension
Click on the extension icon and chose "options":
Configure as follows:
Click "Save shortcuts" button (bottom-right)
Now, go to any page, make sure devtools is opened, and hit CTRL+SPACEBAR keys, while your inspection target element is visible.
I'm using Windows OS and this hotkeys combination is good for me and is not "taken" by any other shortcut, but of course, you can choose any other.
i had the same problem but i use Firefox it disappear as soon as i open inspect element found a solution:
open the 4 dashes(settings) go to web developer > Debugger and immediately press F8 which is the shortcut for the pause that stop the script before it kick and detect that you opened the developers tools
I'm having a strange issue with IE9 where if I have multiple <div> elements on the page, where only 1 is visible at a time and then others are shown as a result of JavaScript actions on the page.
The issue I am having is that if an element is hidden (seems to only happen after being hidden for a certain amount of time), when I go to show the elements w/ jQuery $('.className').fadeIn(500); for example, the background image properties of the elements inside that DIV that is being shown are lost.
They are still there when inspecting the HTML w/ IE Developer Tools, but the background image seems to not be recognized for whatever reason. In the developer tools, I can click to edit the background image path, and simply hitting enter (not actually changing the path) makes the background appear.
Is there something with IE that makes it ignore elements if not displayed on the page for a certain amount of time? Any help would be greatly appreciated. This is very strange as this was never an issue for me in any other browser or any other version of IE.