I have a div with the contenteditable attribute set to to true, however, it does not show a blinking cursor or update when I type text into it. I've added event listeners for focus, keydown, and keypress to see if the div is receiving them, AND IT IS!
How could it be that all the appropriate events are actually firing yet the content of the div is not appropriately updating itself? I'm not doing anything funky like preventing the default behavior of the events.
Also, I've gotten contenteditable working just fine several times before on different projects, so I'm fairly certain it's some bug being caused by the structure of this particular page's HTML. Again, the issue only occurs in Chrome and Safari; Firefox and IE8 are fine.
Okay, I figured out my problem. I had the css property '-webkit-user-select' set to none on an element way up the hierarchy of the div in question. Thus it was preventing the cursor from ever being positioned within my contentEditable div.
Interestingly, the corresponding '-moz-user-select' (which I also have set to none up the hierarchy) does not affect Firefox in the same way.
I'd like to share this code with you. It might help you out! You disable the user-select and callout for the whole site, and then override the contenteditable fields to allow user-select.
html,body{
-webkit-user-select: none;
-webkit-touch-callout: none;
}
*[contenteditable] {
-webkit-user-select: auto !important;
}
Related
I'm using Do Hyeon font and all browsers render fine except for Safari. It seems if text is too short or not upper case, safari ignores spaces. However, if I click or hover the text, it re-renders with space.
Does anyone know why this is happening and how can I solve this?
I already tried adding these css property but did not work.
text-rendering: optimizeLegibility;
-webkit-font-feature-settings: 'kern' 1;
(Second picture) When I selected text
I believe it was Safari issue but unfortunately, I could not find the reason why this is happening.
However, after testing some css properties, the one I am using for displaying ellipsis worked for this issue as well, so I will leave the code here in case someone is having the same issue.
display: -webkit-box;
-webkit-line-clamp: 10;
-webkit-box-orient: vertical;
max-height: 10rem;
Again, these properties are originally for ellipsis especially for safari:
https://stackoverflow.com/a/61515590/12332180 but propbably, this is related to modifing the text that is why it is working for my situation as well.
I have integrated DataTables into an ASP.NET site. Everything is working as expected, except the paging buttons.
The paging buttons are rendered but nothing happens when they are clicked. There is also no hover effect.
Changing page size works, and the paging buttons are re-rendered correctly for the new page size. I can't see any JS errors.
The DataTables version is 1.10.20 (no additional plugins). Also used are Bootstrap 4.3.1, jQuery 3.2.1 & jQuery SlimMenu.
To see the issue click here. This is a static HTML equivalent of a page rendered by ASP.NET ... I can't do anything about the table being in a form, the wierd IDs ... that is done by ASP.NET.
What am I missing?
Got the answer courtesy of Allan at datatables.net.
The pointer-events: none in the following CSS was killing the click on those buttons:
a:not([href]) {
color: #333;
pointer-events: none;
cursor: default;
}
The paging buttons have no href attribute so are being targeted by that rule. pointer-events: none prevents all click, state and cursor options on the specified HTML element, i.e. the click and mouse-over.
I am working on Infragistics 17.1, I want to disable the Infragistics WebDataGrid. So I used webDataGrid.Enable = False property.
This is working in Internet Explorer perfectly i.e. grid is in grey out and disabled state, but in chrome view is not in disabled state.
I have some findings like, after rendering in HTML the webdatagrid element have attribute disabled="disabled", because of this IE grid is looks in disabled state, but somehow its is not working for chrome.
Maybe somebody already faced this issue and have solution for this.
Thanks in Advance!
I have workaround for this issue something like below with css changes.
[disabled] {
pointer-events: none;
color: grey;
}
Not only for the WebDataGrid of Infragistics but for many other controls which having same problem this works. We can use more appropriate css selector to apply those properties to specify controls only.
I working on a project that involves a video player. I'm using the native tag on HTML. I want to have an image shown in the fullscreen mode. I can do so with the following CSS selector, but it only works on Chrome:
::-webkit-media-controls {
/*display:none !important;*/
background-repeat: no-repeat;
background-position: top;
background-image: url("../images/match_com.png");
}
How can I make this work on Firefox as well? There must be a equivalent of -webkit-media-controls for firefox.
There might not be a Firefox equivalent. This article discusses how to hide the fullscreen video controls in Webkit-based browsers, but fails to find a moz- prefixed equivalent:
http://css-tricks.com/custom-controls-in-html5-video-full-screen/
But, as it mentions, another thing you can do is fullscreen an outer element that contains the video element, rather than fullscreening the video element itself. Then you can control what the user sees. But I think this works best with video elements that don't have their own controls enabled, since the standard video controls include a fullscreen button that won't do what you want.
To fullscreen any element, use the requestFullscreen method. It works on all the current major browsers, although some of them may still require using a prefixed name (i.e. mozRequestFullscreen).
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
This question is similar to this one but I still cannot come up with a suitable solution.
On my site I am trying to implement the dojo Tooltip (not dialog Box as in the link above; click here to see Tooltip documentation). I would like to be able to change the zIndex of the Tooltip to whatever I need. I can only seem to get Dojo to work if I use a CDN such as http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js or //cdnjs.cloudflare.com/ajax/libs/dojo/1.9.3/dojo.js, so trying to alter the javascript of the tooltip file for Tooltip.js did not seem to do anything. Note: Tooltip.js was included locally as:
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"></script>
<script src="dojo/Tooltip.js"></script>
Using info from the link at the top of the page, I was able to come up with a hack solution. Assuming the default z-index for the Dojo tooltip is 1000, I changed the z-indices of all other divs (that were previously > 1000) to z-index < 1000. This solved the problem, and now the Dojo tooltip can be seen in front of these divs (previously was behind).
Any suggestions on how to alter the zIndex property of the Dojo tooltip without altering Tooltip.js?
I would recommend to override css rule according to your requirement.
Like by default css rule on dijit tooltip is as follow:
.dijitTooltip {
position: absolute;
z-index: 2000; // You can write your desired z-index
display: block;
left: 0;
top: -10000px;
overflow: visible;
}
Or you can try via JS
dojo.query(".dijitTooltip:visible").style("z-index", 'You desired value'); // <1.6
//>1.7
require(["dojo/query","dojo/dom-style"],function(query, domStyle){
domStyle(query(".dijitTooltip:visible"), "z-index", "You desired value");
});
Not sure if I fully understand your problem. But maybe this will help in changing the z-index of a dojo object programmatically using javascript:
dijit.byId('<Dojo ID of Tooltip>').attr("style","z-index:999");
I would also stay away from altering Tooltip.js.
For dojo 1.10 you could use dom-attr to set/change the style.
The code above will then look like that:
domAttr.set("mywidgetId","style","z-index:999");
Regards, Miriam
I would recommend using dojo/dom-style for this.
domStyle.set(tooltip.domNode, "zIndex", "999");
Do notice that FireFox will not accept "z-index" as a valid css property name, see http://www.w3schools.com/jsref/dom_obj_style.asp. Always camelcase the css property name.