I have a toolbar of buttons that are gray by default but when one button is clicked on that button is made white to indicate that that is the page you are on. This is achieved using a class and the below css.
.btn-details:focus {
color: #fff;
}
This works fine except when I change windows and then go back. For example, if I have my page open it is working find, then I switch to an Excel window and then back to my page the white highlighting is now gone. How can I keep the button in focus even when the window is changed?
Unfortunately I think you need to take your time to focus on how CSS works.
You are using the: focus selector. Know that it does what you asked it to. If the button loses focus and your style no longer holds.
I think this is exactly what happens when you use other apps.
I advise you to add a CSS class on the button clicked and to remove this same class on the other buttons.
If you have difficulty implementing this, please come back to me. I would make a small example depending on your level.
See you soon !
I am writing tests for my Bootstrap 3.x webapp using Nightwatch. All is working fine, but I would like to add the "close modal by clicking somewhere next to it" in one of my tests. I don't seem to be able to identify the html element that's supposed to receive the click event however.
Can anyone help me with this?
Thanks!
The background is a div with class .modal-backdrop. According to the docs: "...generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal."
I've implemented a tooltip in my website. The link which opens the tooltip is simple, and has the following code:
This should open a tooltip
On focus or on click, the tooltip shows up. Everything works perfectly, till the time the screen-reader (I'm using JAWS) is turned on. When Jaws read the link, and I press enter, it doesn't show the tooltip.
This is what I've tried:
I've tried adding role=dialog on the div which contains tooltip
text.
I also tried adding aria-haspopup=true on the link.
But both approaches don't seem to work. Any suggestion on how to make it work with screenreaders?
Submit button stops working after partial post-back in IE11 when used with UpdatePanel(.Net). It's clickable, but it doesn't work.If clicked somewhere on page it starts to work normally.I have few pages in my project with this type of UpdatePanel's, all those pages are not working in IE11.
In UpdatePanel ContentTemplate is used for each drop down.
Buttons used were asp:linkbuttons and normal anchor buttons.
Tried with so many options like keeping meta tag in master page and wrote some javscript to trigger after the selected index changed, but no use... :(
Please help me.
On this fiddle http://jsfiddle.net/mjmitche/qVdEy/6/, you can see that the alignment of the text inside the popover is perfect, however, when I put the exact same css/js/html on my site, the text is larger than the container!
I'm trying to figure out what is happening using firebug, but I have to move my cursor off the popover to use firebug, and then the firebug disappears. I can't figure out what settings in my code is changing the presentation. The popovers are created using Twitter Bootstrap.js (you can see the resources in the fiddle)
Nobody really answered the question "How to debug a popover" ::: Simply set the popover to open on load >> $('#element').popover('show')
What I do is kind of weird and only seems to work in Chrome, not Firebug.
The steps are:
Open the Chrome inspector in a new window
Make sure part of the inspector is overtop of the button you're
trying to activate (which is in the background window
Activate the browser window and hover over the button (this activates the popup), now hit
alt+tab (cmd+` on OSX) to switch to the inspector window.
This will not trigger the mouseOut event and leave your popup
attached to the DOM body node! Since you're already in the inspector
you can navigate to it and see the css problem.
Well after looking at the popover CSS, it seems there is no explicitly defined font-size: http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css (Just do a find on "popover" and look through the CSS)
Perhaps try adding the following CSS and tweaking it from there:
.popover, .popover h3.title, .popover .content { font-size: 14px; }
Hope that helps :)
This is the kind of thing I created my new HTML box visualizer tool for. Check it out!
HTML Box Visualizer - GitHub
open devtools of the browser, then set a breakpoint of Mouse Click. Just Click the target of popover panel and U will see the opening popover. Just debug it like other normal DOM block