I usually work with Vision. Now I am taking over a perspective project and I have a bit of a pet peeve right now with my touch screen button components.
The Text embedded in the button is selectable from the client screen. So if you click the button on a touch screen it will highlight the text and not actually trigger the button. You have to click in an area that has no text.
I would like to disable this ability to highlight the button label. I can't find a property for this.
Thank you.
Set prop.style.cursor: pointer
For anything Perspective styling, you can try searching for CSS props relating to what you want to do. Styling here is a bit wider reaching, and includes things like cursor icons, mouse events (e.g. disabling them), animations, options when components "overflow" the container, etc.
Note: only a select number of css props are exposed by the style editor in the designer, however you can add any valid css prop directly into the style prop manually if it's not exposed.
Ps, you might want to create a set of perspective styles and include some that style your buttons and that include the cursor: pointer style
Hi, this does not work on a touch device.
And I struggle a lot to figure this out.
My project was working perfect on the computer, but when was finnish and open it on my touch device, all text is highlighted and it`s hard to actually press the buttons.
Solved by @victordcq in
Add a property to the button style,
user-select : none
Thank you, I did this and it did work very good !
But "chrome" still try to search for that text it can`t select.
So it is a Decent solution, but not the best.
I would rather make a invisible box on top of the text that link to the correct page\item.
But since I using Tab menu, it is allot of work.
That sounds like a problem with the Chrome touch screen driver settings. I would investigate that to see if there is a setting for that.
Related: