I have the following bootstrap 4 button code.What I am finding is that only on my mobile device, the button remains highlighted after clicked. The color of it is exactly the same as if I hovered it over with a mouse on my desktop device
<button class="btn btn-outline-primary d-inline">
Search
<i class="fa fa-search float-right" aria-hidden="true"></i>
</button>
Or in other words, it is pretty much the same as if I clicked on the button on my desktop mouse and dont hover away.
To me, it seems like one of the following occurred
On the mobile device, the click on the button simulates moving the mouse to that point and trigger the click event. However, the "invisible" mouse on the mobile device never hover away??
Something else?
How can I get rid of this behaviour?
Its because mobile browsers (modern ones) support hover state.
what you can do is override it for case of mobile with
button.btn:hover {
background-color: inherit || < your color >;
}
Related
This is happening in Safari and can be viewed here by clicking the "chat now" button in the lower right side of the screen: https://online.calvin.edu/
When you click on "chat now" button the minimize button in the chat window has a focus outline on it. I can't figure out why it defaults to having that outline applied to it anywhere in the CSS.
screenshot
When the dialog opens, the browser thinks that <embeddedservice-chat-header> has focus. You can see this by issuing the command document.activeElement in the console panel of the code inspector. If you tab through the rest of the dialog and issue document.activeElement after every tab, you'll see the focus moves to the "welcome" <div> (why?), the three <input> elements, the "by submitting" <label> (again, why?), and then the "start chat" <button>.
(The <div> and <label> elements are not interactive elements which is why I was asking "why" the focus is moving to them.)
Keep tabbing and the focus moves back to the top of the dialog. It moves to the minimize button and then the close button. However, rather than the actual <button> elements receiving focus, the <embeddedservice-chat-header> receives focus. So that leads me to think that the custom <embeddedservice-chat-header> element might have some built in javascript that is moving the focus to an internal element.
I've created a 'show on hover' mat-menu button as you can see here:
https://stackblitz.com/edit/angular-show-hide-menu?file=app%2Fshow-hide-menu.scss
The problem is, when I click the button it disappears, leaving me with an odd-looking mat-menu. I've tried targeting the button's active or focus states using css (shown in the example) but that doesn't appear to help keep the active button appear.
When you click the button in the example you will see the blue background flash when the button is active, however it doesn't stay blue. The blue background is there just to debug, but basically I want the 'display: flex' css to kick in whenever the button is clicked i.e. while the selected menu is active.
Any help greatly appreciated!
-S. Arora
Your "More Options" button disappears because it's no longer active or focused after the menu opens. In fact, you can't make it active or focused because the menu creates a transparent backdrop layer that covers everything else on the screen, which you can see when you inspect the HTML. That's why you can't get the button to reappear while the menu is open.
One way around this is to watch the state of the menu itself and add a class to the button whenever its associated menu is open:
<button fxFlex="80" mat-icon-button matTooltip="More Options"
[matMenuTriggerFor]="optionsMenu" class="hover-display"
#menuTrigger="matMenuTrigger" [ngClass]="{ 'open': menuTrigger.menuOpen }">
Then you can use this class in your CSS instead of targeting the active or focused states:
.node .hover-display.open {
display: flex;
}
After the mat-menu is triggered and items are shown, the popup elements are not scrolling along with the page. Instead they seem to be broken from the mat-menu icon and they are always visible as I scroll the page.
<mat-icon class="mat-accent" [matMenuTriggerFor]="menuOptions">menu</mat-icon>
<mat-menu #menuOptions="matMenu"> <button mat-menu-item *ngFor="let menuItem of menuItems" (click)=selectMenuItem(menuItem)> {{menuItem.text}}</button> </mat-menu>
As shown in below picture, even though the initial menu-items popup appeared correctly, as I scroll the page, the popup elements are no longer attached to the above hamburger icon [which was attached with matMenuTriggerFor as shown in above code]
Issue will be fixed in the next version.
For now you can do workaround in .mat-menu-panel set position: fixed!important;
I have a jsFiddle that illustrates the problem. I'm using the bootstrap CDN on my site. I've overridden the Bootstrap btn-primary class in CSS in order to make them match my site theme.
The problem: btn-primary has a hover that toggles the icon background color to a shade of blue. But when I click on the button, it seems to 'lock' onto the hover color. It will only change back if I click on the page OUTSIDE of the button.
I know I could just add !important to the background line in my CSS, but then I lose the mouseover/hover color change, which I'd like to preserve.
Can anyone explain why this is happening or give me a fix to allow my overridden button to switch back to its desired/initial color after clicking it and mousing off of it? Thanks.
JsFiddle link
Instructions to repro problem from jsFiddle:
See the issue:
1. mouse over the button without clicking. Color changes for mouse on, changes back on mouse off.
2. Mouse over button
3. Click button.
4. Mouse off button.
5. Notice color of button remains the mouseover color, even if you mouse on/off button repeatedly.
6. click page outside of button.
7. notice button now changes back and mouseover behavior is restored.
Looking for a way to retain default mouseover behavior yet override the default bg color of the bootstrap btn-primary.
I have this:
<li><i class="fa fa-question-circle"></i> Help</li>
But when I click it, the button remain selected.
How can I change it to say don't remain selected, I just want it to have the hover effect but not to remain selected.
On bootstrap you have to do manual deselect of button using Javascript.
$("button").removeClass("active");// call it after the button click event