I'm checking if it would be possible to implement a GUI using HTML through PyQT and WebKit. One of the problem is that using the mouse you can select the text making up the interface. Can this behaviour be disabled?
Also, the mouse pointer changes to an insertion caret while over the selectable text. I would like to disable this, without disabling the hand mouse pointer which appears when over a clickable link.
That's how I am doing it:
cursor: default;
-webkit-user-select: none;
I am working on something quite similar, a desktop app with html/css-based interface.
The above code takes care of text selection and the caret. Set css property cursor to pointer for your links, something like:
a { cursor: pointer; }
You can use javascript to "return false" on the start selection event in order to disable the text selection.
Related
When you create a new element, you can assign tags to it, but the tags window constantly jumps around the screen as you type. Which is very annoying if you want to quickly select with the mouse by ready-made tags.
https://i.imgur.com/AccTcXZ.jpg
And here http://eucaly-tw5.tiddlyspot.com/ the owner has already screwed something up and the window does not move, and of course it is more convenient.
https://i.imgur.com/63boyVQ.jpg
What parameters need to be changed in order to get the same effect on myself?
This behaviour is controlled via CSS. One option would be to add the following value to a sitewide stylesheet (tagged $:/tags/Stylesheet):
.tc-edit-add-tag {
display: unset;
}
I have a responsive layout that must be accessible for screen readers. The issue is around the order of buttons on desktop vs mobile.
On desktop the button order is
Cancel - Remind Me Later - Learn More
...and the screen reader reads left to right. However on mobile the button order is vertically stacked and is ordered as the reverse of the desktop:
Learn more
Remind me later
Cancel
The problem is the screen reader still reads as if user was in desktop mode - the visual order no longer matches.
Is there a way for the screen reader to change the reading order depending on the viewport?
In general, screen reading software ignores CSS (*). The order of your DOM is the order the screen reader will read it. Even if you used tabindex, that will only control the order of tabbing through the interface. If you use CSS to reposition elements, whether through flexbox or grid or float, the screen reading software will ignore that.
A screen reader user can simply walk the DOM (**) by using the up/down arrow keys. (** The user is not really walking the DOM but rather the accessibility tree, but it's similar to the DOM. Not every element in the DOM will be on the accessibility tree, but it's a similar analogy).
So, the only way to "control" the order that a screen reader hears the elements is by modifying the order of the elements in your DOM.
(*) (If you have a :before or :after pseudo-element with a content property, that property will be read by a screen reader as noted in step 2F of the "Accessible Name and Description Computation")
This is a common issue and there are a few solutions you can do. Without knowing much about your codebase, here are a few suggestions for you:
Not knowing how complex your markup is, you could provide a version of the form elements that are only visible on small screens. That way you can explicitly control the accessibility tree structure.
Another option, you can use CSS (flexbox or grid) to reposition the buttons based your media query for small screens.
While this would work, I would not advice using "tabindex="1", "2", "3" "..." to control tab order seeing as how your UI is not rendering in the correct order anyway.
Hope this helps. Good luck with your project.
Is there a way for the screen reader to change the reading order depending on the viewport?
One solution is to have two sets of the same menu and use your media queries to use one or the other
<div class="desktop">Cancel - Remind Me Later - Learn More</div>
<div class="mobile">
Learn more
Remind me later
Cancel
</div>
CSS:
.mobile {display:none}
#media screen and (max-width: 600px) {
.desktop {display:none}
.mobile {display:block}
}
This way, you will be free to let the DOM order match the visual order.
I've been developing a web-ui for a while and it has become now quite complex. At a certain place I use a <div contenteditable="true"> for editing text, and there is a bug in FireFox, which I cannot trace down:
When there is some text in the div, and I click with my mouse to change cursor position, it doesn't work. The cursor is always in the end of the text. It works fine in other browsers, and you can change cursor in FF using arrow keys.
I tested a simple html page with a single element <div contenteditable="true"> in it in FireFox, and it works fine, but doesn't work on my system. Obviously, there is something that blocks it.
What can be a possible issue?
Thanks!
I had the same issue and finally found that the issue in my case was CSS wise. I had:
-moz-user-select: none;
on a parent element of my contenteditable which caused the problems.
It worked well after I applying:
-moz-user-select: element;
NOTE: depending on which select behavior you want to have, choose the user-select value (https://developer.mozilla.org/en-US/docs/Web/CSS/user-select)
for me it didn't work because on the parent div is a drag & drop implemented. and it effects all input-fields, textareas and div's with contenteditable.
I haven't found a solution for it yet but there is already a Bug Ticket for Firefox with the right hint that draggable makes the problem.
Here is a link to the bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=419808#c4
Here is a way to fix this problem:
Prevent drag event to interfere with input elements in Firefox using HTML5 drag/drop
I have some divs (class="boxes") with some text in them in paragraph tags. What I'd like is for the text to be invisible unless hovered.
However, things are behaving strangely. When I use:
.boxes p{visibility:hidden;}
.boxes p:hover{visibility:visible;}
the text is hidden but does not become visible upon hover.
When I tried:
.boxes p{visibility:visible;}
.boxes p:hover{visibility:hidden;}
the text will (after a moment) disappear, but 'flashes' if the cursor is moved at all.
Any idea what's going on here? Firefox often updates automatically, so I believe I am running the latest version.
Thanks!
By making the boxes invisible, the selector stops matching them, which makes them visible, which then makes your original selector match them again and you get your flicker from an endless loop.
If you want to have your boxes still be hoverable, either give them another parent element and hide them:
.boxes .parent:hover p {
visibility: hidden;
}
Or give the boxes zero opacity on hover:
.boxes p:hover {
opacity: 0;
}
I have a Validator attached to a field. When validation fails, I want the red line to appear in the field, but I do not want the red icon to appear to the right of the field. How can I accomplish this? I don't see this functionality in the documentation. Thanks!
I also posted this on Sencha's forums but they are very slow: http://www.sencha.com/forum/showthread.php?175577-How-can-I-disable-the-TextField-validation-icon&p=718440#post718440
I got the answer from the Sencha forums.
Check out Field.setMessageTarget(String) - you'll want to pass in
"tooltip" (or, to just not draw that icon, anything but "side"). With
that set, it shouldn't even attempt to draw the icon.
http://www.sencha.com/forum/showthread.php?175577-How-can-I-disable-the-TextField-validation-icon&p=718440
What about converting the field in a DOM element, then navigate till the Red icon and apply a style to disable it?
Something like:
((El)passwordField.getElement().getParentElement().getChildNodes().getItem(2)).setStyleAttribute("display", "none");
You could have a CSS style like this :
.x-form-element img {
display: none;
}
or
.x-form-item img {
display: none;
}
All the images in a form element won't be displayed.
dateField.forceInvalid("error message which u want to pass"),.it will automaticaly show an exclamation mark on the right side of the date field