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;
}
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'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'm setting the selection background color via CSS:
::selection {
background:#cc0000;
color:#fff;
}
::-moz-selection {
background:#cc0000;
color:#fff;
}
On most browsers when the focus is somewhere else (like an IFrame), the selection color will stay the same, e.g.:
but on Firefox it won't:
You can see this in action on jsFiddle here.
How can I get Firefox to set the selection color in this case? Is this a bug?
How can I get Firefox to set the selection color in this case?
Unfortunately, there doesn't appear to be a way to do so.
Is this a bug?
Nobody (including Mozilla themselves?) can say for sure; this was never specified while ::selection was still in the CSS3 spec. I can't find any information on MDN or bug reports on bugzilla.mozilla.org on this either. but I did find this bug report, which has apparently been left unresolved since being reported in 2010.
This may be clarified in the future, e.g. if ::selection returns in UI 4.
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
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.