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
Related
I need to prevent the check of a checkbox by clicking on its label.
I use the angular material checkbox.
I partially manage to do it using the preventDefault() method but the checkbox still shows focus style if I click on the label.
What I need is: if I click on the label, nothing should happen to the checkbox (not checked, not focused on).
Please take a look at this stackblitz link to better understand my issue: https://stackblitz.com/edit/angular-2zyvdp?file=src%2Fapp%2Fcheckbox-overview-example.html
If you don't want to change ripple behavior or CSS, try this:
<span (mousedown)="$event.stopPropagation()" (click)="check($event)">
Check me!
</span>
The ripple effect is triggered from the mousedown event (hence why you don't see them when using the space bar), and you need to use stopPropagation(), as preventDefault() isn't enough here.
StackBlitz link here
Add below css in style.css & check
span.mat-ripple.mat-checkbox-ripple.mat-focus-indicator {background: none !important;opacity: 0 !important;}
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 am using Vue.js (which I don't think have anything to do with this issue) and a color picker package vue-color. What I want to achieve is following:
A button or rectangle element have color as selected color when clicked show a menu type dropdown with color picker. User can pick color here, and when they click outside color picker, it collapse. I tried doing this with bootstrap dropdown and everything works fine except when I click to pick color the menu collapse(refer to following code):
<ul>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><sketch-picker v-model="colors" /></li>
</ul>
</li>
</ul>
Above code shows this output, which is same as what I want to achieve but on first click only it collapse, hence user couldn't tune it.
On exploring I found below link, but am not able to translate it into vue.js
https://github.com/react-bootstrap/react-bootstrap/issues/1490
I also tried using select and putting color-picker in it's option, but then no color-picker comes and only r, g, b values are shown.
I also tried to make my own div and show-and-hide using vue. But instead of coming over base div it takes it own space even with z-index (I know this is workable but I couldn't get this working). Any help would be appreciated
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 >;
}