It seems I'm not able to drag an element that has unset: all css property.
.my-component {
all: initial;
* {
all: unset;
}
}
I use these rules inside a chrome extension, on elements that are being injected in the user browser page (to prevent local style affecting my component). Unfortunately, elements are not draggable anymore.
Those elements have the draggable property on in html.
I tried pointer-events: auto;, -webkit-user-drag: auto;, user-select: all; but I still can't manage to make elements draggable.
There must be some properties I have to set back to normal.
If someone had an idea, I would highly appreciate any help on this topic.
Edit : see this codepen - https://codepen.io/thomaslh/pen/OgQNMz
Looks like you need to add 2 CSS properties. user-select and -webkit-user-drag
.el {
all: unset;
-webkit-user-drag: element;
user-select: none;
}
<div class="el" draggable="true">
drag
</div>
Related
I have the folowwing structure
<div class='offline'>some text <button class='delete'>Delete</button></div>
Is it possible to disable the div with pointer-events: none but KEEP the button active ?
I tried with
div.offline:not(.delete) {
pointer-events: none;
}
No success. Any idea ?
You can disable events on the parent and reenable them on the child.
.parent {
pointer-events: none;
}
.child {
pointer-events: auto;
}
<div class='parent'>
foo
<button class='child'>bar</button>
</div>
Given this:
div.offline:not(.delete) {
pointer-events: none;
}
You are targeting divs with class offline, which don't have class delete.
Since your sole div doesn't have a delete class, it is targeted.
To target all descendant elements of div.offline that don't have the delete class, you would do this:
div.offline :not(.delete) { //note the space before ":not"
pointer-events: none;
}
However, that excludes text nodes. So both "some text" and the delete button would still receive pointer events.
Your only option is to create a default style for the parent, which is overridden by the child:
div.offline {
pointer-events: none;
}
div.offline .delete {
pointer-events: auto;
}
The documentation for the pointer-events: none;:
none
The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants
have pointer-events set to some other value. In these circumstances,
mouse events will trigger event listeners on this parent element as
appropriate on their way to/from the descendant during the event
capture/bubble phases.
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
Note the emphasis added above.
So basically descendants should still have those events if you set them:
.offline .delete {
pointer-events: auto;
}
I can disable the content of my div using this
<div style='-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
' onselectstart='return false;'>
I have two contents inside my div, the first one is the
<input>
and the other is
<textarea>
When I drag my mouse, both can't be selected. But when I right click + select all. I can select the content of my textbox, but not the input box.
NOTE: I am using an openWYSIWYG editor for my textarea, I've also tried putting transparent div at top but got same result.
the question is, how can I totally disable the selection?
There is no standard behavior on the CSS user-select-attribute. So in Safari the the "select all" option or just selecting surrounding elements will still select the content in-between – as you've experienced.
Here are some more information: "css-tricks.com: User-Select"
Note, that this CSS does not prevent users from viewing the source of the page and copy the content from there. As stated by Chris it's more for the purpose to not select content accidentally.
The proper way to disable a form element is to set it's disabled="disabled" flag with the help of JavaScript. This method works well.
You can not add this attribute for div elements, but you can emulate the behaviour of the disabled element by setting the color of selected text the same as the background of div using CSS code like
::selection {
background: #xxxxxx;
}
::-moz-selection {
background: #xxxxxx;
}
where #xxxxxx is the background-color of the div element.
I have found an irritating bug in IE 8-10 that prevents a parent's active state being triggered. It appears that if a child of the parent element is the target of the click event the active state on the parent element is not triggered.
Here is a working example. If you click the text inside the <li> the element wont change colour. If you click inside an <li> anywhere other than on the <p> child the element will turn blue.
This is a problem as it pretty much renders the css :active pseudo state useless in IE if the element has any children.
Has anyone encountered this problem before, and even better found a way round it?
Here's an easy workaround: add a css rule to the paragraph.
Working example
CSS
ul { list-style: none; }
li { height: 50px; margin-bottom: 4px; background: red; }
li:active { background: blue; }
p:active { background: blue; height: 100%;}
I have fixed the issue by preventing pointer-events on the child element. This way the :active state is triggered directly on the parent and doesn't need to be propagated. The only downside of this solution is you cannot attach an event listener (not even a css `:hover selector) to the child anymore. So you have to move all your event listeners to the parent.
.child { pointer-events: none; }
Here is jsFiddle https://jsbin.com/govelabuca/1/edit?css,output
Just uncomment the last line in css and compare the result in IE and other modern browser
You could add another CSS selector for the <p> tag so your
li:active { background: blue; }
will become
li:active, li p:active { background: blue; }
I would suggest you would use javascript or jquery for that when you click a child element, perform the active state of of the parent.
I've stumbled upon this on IE11. I was writing a drag-n-drop styling logic using this approach suggested by Martin.
In my case I have a row with td cell elements and using :active for the parent tr does the job for other browsers. For IE, I've added a CSS rule to target the cells (tr.myRowClass > td:active) and modified the if condition in my custom JS logic executed during the mousemove event handler of the cells:
if (style.getPropertyValue('cursor') == 'auto' || document.querySelectorAll(":active").length > 0) {
The remaining task is to find the target element:
Determine which element the mouse pointer is on top of in Javascript
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
How do I prevent CSS inheritance?
Is there a way to declare the CSS property of an element such that it will not affect any of its children or is there a way to declare CSS of an element to implement just the style specified and not inherit any of the style declared for its parents?
A quick example
HTML:
<body>
<div id="container">
<form>
<div class="sub">Content of the paragraph
<div class='content'>Content of the span</div>
</div>
</form>
</div>
</body>
CSS:
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
Under normal circumstances one would expect the text block "Content of the paragraph" and "Content of the span" will both be 12px and bold.
Is there a property to include in the CSS above in the "div.content" block that will prevent it from inheriting the declaration in the "#container form div" block to limit the style to just "content of the paragraph" and spare "Content of the span" including any other children div?
If you are wondering why, well, I created a particular CSS file that gives all the forms on my project a particular feel and the div elements under the form all inherit the feel. No problem. But inside the form I want to use Flexigrid but flexigrid inherits the style and it just looks useless. If I use flexigrid outside the form and such it won't inherit the forms css, then it looks great. Otherwise it just looks terrible.
Unfortunately, you're out of luck here.
There is inherit to copy a certain value from a parent to its children, but there is no property the other way round (which would involve another selector to decide which style to revert).
You will have to revert style changes manually:
div { color: green; }
form div { color: red; }
form div div.content { color: green; }
If you have access to the markup, you can add several classes to style precisely what you need:
form div.sub { color: red; }
form div div.content { /* remains green */ }
Edit: The CSS Working Group is up to something:
div.content {
all: revert;
}
No idea, when or if ever this will be implemented by browsers.
Edit 2: As of March 2015 all modern browsers but Safari and IE/Edge have implemented it: https://twitter.com/LeaVerou/status/577390241763467264 (thanks, #Lea Verou!)
Edit 3: default was renamed to revert.
Can't you style the forms themselves? Then, style the divs accordingly.
form
{
/* styles */
}
You can always overrule inherited styles by making it important:
form
{
/* styles */ !important
}
CSS rules are inherited by default - hence the "cascading" name. To get what you want you need to use !important:
form div
{
font-size: 12px;
font-weight: bold;
}
div.content
{
// any rule you want here, followed by !important
}
I trying to hide the element before replacement by using the .sIFR-active class, set on the HTML element, to apply CSS rules to elements when sIFR is active. I set the visibility: hidden; and it is working fine in IE and Firefox. Not Safari.
Any idea?
.sIFR-alternate {
display: none;
}
The .sIFR-active class might be set on either the <html> or the <body> element. If your CSS rule is explicitly html.sIFR-active it won't trigger if it happens to be added to the <body>.