I have put textarea over button, but it made button not clickable at the positions where textarea is. How can I disable textarea selection and make button clickable on whole surface, while textarea is still visible?
The same with small image (icon). If I put icon over button it will not be clickable on that position.
You can use pointer-events: none on the overlapping objects which will let you "click through" it, i.e. click the element below it.
More information: https://css-tricks.com/almanac/properties/p/pointer-events/
Related
I'm working on table in Blazor. I want to use mousedown and mouseup event to add posibility for selecting more cells in the table. When user holds mouse button, he can move and select cells until he release mouse button. Everything works fine, there is just one problem: together with selecting cells, I'm selecting every text, even outside of cells, which doesn't look good.
Is there any easy way in Blazor how to turn off the text selection after holding mouse button?
Thank you!
If you only want the text to be un-selectable while dragging the mouse (so the only way to select text if you do this would be with the keyboard)...
In the onmousedown handler, change the CSS style of the table to user-select: none; and then remove that style in onmouseup.
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;
}
I want to create a start experience like button on my A-Frame design. My experience needs to hide until you press a button and then it appears
Two approaches:
1) Hide the a-frame scene until a html button is pressed
This one is simple. Bring a white <div> up front (by setting up a high z-index), and hide it (display: none) when a button is clicked.
Fiddle here.
2) Hide the experience content "in-game"
This one is a bit harder. Hide the a-camera within a white sphere with a button, and hide the sphere, when the button is clicked.
Fiddle here
I have div with a button inside it. I want when a user clicks on the div (outside the button's rect) to initiate the button click with its animation. Is there any simple css solution, without javascript?
I am using gwt 2.4. And I am not using uibinder.
I have a button which has a background image. when I place mouse on this button it should display a text saying "submit" . The kind of text which says what the button does.
Button is a UIObject and so you can use setTitle method on a Button to set the tooltip.
Or if you want to do something else on mouse over. Just make use of the mouse handlers.
Read Button documentation for more details.