When using -webkit-transform: translateX(0%) on a parent container the file name "label" text disappears from the standard <input type="file"> element in Chrome. In Safari the text is also hidden but upon file selection the icon for the file is displayed.
http://jsfiddle.net/9sZxv/
Merely adding and removing a class such as:
.transX
{
-webkit-transform: translateX(0%);
}
To the parent div in:
<div id="test1">
<input type="file">
</div>
Will cause the text No file chosen, or the file name if a file is selected to disappear.
Tested with- Win7: Chrome 19 and Safari 5.1
Is there a fix or workaround? The file select element isn't friendly to CSS styling and there isn't any element to reference just the text part directly so I am at a lost on how to approach this issue.
If you apply a zoom to the input box in Chrome you can see that it is moving the text underneath:
http://jsfiddle.net/9sZxv/4/
This is definitely a hack, but you can move the file input button down to the same level as the text with this css:
.transX input::-webkit-file-upload-button {
-webkit-transform: translateY(26px);
}
And then set the file input to have a negative top to make it look normal.
.transX
{
position: relative;
overflow: hidden;
height: 22px;
-webkit-transform: translateX(20px);
}
.transX input
{
padding-bottom: 26px;
top: -26px;
position: absolute;
}
Here's an example: http://jsfiddle.net/9sZxv/2/
If that doesn't work, you could try making your own file input using the opacity trick described here: http://www.quirksmode.org/dom/inputfile.html
Related
So I have a range input with the css rules shown below. The goal is to have only the thumb of the range respond to pointer events. Works fine in Chrome and Safari. But in ie-11 and Edge, the entire input stops working. I know that pointer-events is experimental, but I also know it is supported in both of those browsers, but maybe not for pseudo-elements?
input[type="range"] {
pointer-events: none;
}
input[type="range"]::-webkit-slider-thumb {
pointer-events: auto;
}
input[type="range"]::-ms-thumb {
pointer-events: auto;
}
First, please refer to the following sample:
<style>
.bottom {
background: yellow;
width: 600px;
height: 200px;
}
.top {
width: 600px;
height: 200px;
position: absolute;
top: 0;
left: 0;
/*pointer-events: none;*/
}
.test{
/*pointer-events: none;*/
}
div{
display:block;
}
</style>
<div>
<!-- bottom div -->
<div class="bottom">
<br>
<input type="range"/>
<br>
<input type="range" class="test"/>(pointer-events: none)
<br>
</div>
<!-- top div -->
<div class="top">
</div>
</div>
In this sample, because the top div is on the top of the range element, so we can't select range (using IE, Microsoft Edge and Microsoft Edge(Chromium)).
After adding the pointer-events: none; in the top class, they are able to select.
Then, if we add the pointer-events: none; for the second range element, in IE browser and Microsoft Edge (chromium), the second range input can't be selected. But in Microsoft Edge (Microsoft Edge 41.16299.1480.0), it is still can be selected. It seems that this is the Edge browser default behavior or issue, I will feedback this issue. So, you could consider to use this method to add top div.
Second, since the new Microsoft Edge is chromium based, you could try to install the new Microsoft Edge and use it.
Besides, I think there have another choice, you could use JQuery script to find the range input elements and use the disabled property to enable/disable it.
$("input[type='range']")[1].disabled = true; //disable
I have found the technique to customize file input element through putting a regular button in "front of it" and make the file input element with opacity: 0. Like this:
#wrapper {
position: relative;
overflow: hidden;
}
#button-on-top {
width: 200px;
padding: 10px;
}
#file-input-below {
position: absolute;
top: 0;
left: 0;
width: 200px;
padding: 10px;
}
<div id="wrapper">
<button id="button-on-top">Upload</button>
<input type="file" id="file-input-below">
</div>
But why does it actually work that when you click the button "above", the click goes to the real file input button and activates it? Normally, when there's an element "below" another, it doesn't register a click.
Such as with different kinds of overlays where buttons underneath cannot be clicked?
Thank you for an explanation in advance.
HTML files are rendered from top to bottom, so your input field is rendered later. That means if you put absolute to your button the input field slides under it.
But if you put your button below your button will slide under your input field.
If you still want to make it work put to your button an index-z of 1
#button-on-top {
z-index: 1;
}
and your input field should have an lower z-index then your button if you want to make your button clickable
#file-input-below {
z-index: -1;
}
This is the HTML
<li id="nav1" class="navs"><a unselectable="on" draggable="false" class="Navigation" href="http://youtube.com">YouTube</a></li>
This is the CSS
.navs:after {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: #0d0d0d;
opacity: 0.5;
transform: scaleY(0);
transform-origin: 0 100%;
transition: all .2s ease-out;
}
.navs:hover:after{
transform: scaleY(1);
}
.navs:active:after{
background: #FFFFFF;
}
I think the reason why i can't click the button is because when i click the button, the overlay forms. I do not want to remove the overlay though. Is there any way to click through the overlay?
Option one
You can give your element a higher z-index. This will move your button above the overlay, so you will be able to click it
Option two
You can disable all mouse events on your overlay using pointer-events:none; so the click event will 'fall through' it and the button will register it
Edit: Use pointer-events when you can, let z-index be your backup plan. If you fall back to it, I suggest that you don't use it inline, but write a specific selector for it in your CSS.
use span instead of before and after,
something like
<a href="my link"><img class="" src="my_image" alt="">
<span class="rig-overlay"></span>
<span class="rig-text">
<span>name</span>
<span>function</span>
</span>
</a>
the span will not cover the clickable region
It could be many different things...
Definitely try to check if you've used any z-index properties for other elements that are the parents of the element.
I encountered the exact same problem and I fixed it by troubleshooting:
what I did was pull up a javascript file and console log the target className of where I was clicking (can be done by:
window.addEventListener('click' , (e) => {
const target = e.target.className;
console.log(target);
})
)
Once I did that, click on the button that doesn't seem to be working. Make sure to add a class to your button before this and check if the class is displayed properly. Sometimes, in my case, I had to move the console out of the window.
From this, I found my SVG Animation was actually taking up invisible space that covered the button. All I had to do to fix this problem was give the SVG a z-index of -1.
Hope this helped! I know I took a long time to find a solution so I hope my solution can help others too.
Note: Also check your pointer events (make sure it isn't set to none) for the button and other elements
I am trying to position a rotated headline next to some text. Statically it works very easy with absolute positioning (left picture). I have, however, difficulties when the page gets resized and the positioning fails (right picture).
Current CSS (can be changed):
.headline {
white-space: nowrap;
position: absolute;
top: 185px;
left: -20px;
transform: rotate(270deg);
}
Current HTML structure (can be changed):
<header>
<h1 class="headline">Über mich</h1>
</header>
<div class="text">
<p class="introduction">....</p>
</div>
How can I position the element so that I always stays 20px next to the paragraph?
Could someone link me to existing patterns how to solve this?
A solution with JS (and jQuery) would an option, I would, however, obviously prefer CSS.
Had the same issue. Managed to solve it like this in pure CSS :
.parent {
position: relative;
}
.child {
position: absolute;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right;
left: 30px; /* change this value to match needs */
top: 30px; /* change this value to match needs */
}
The solution was a combination of Diego's answer and Smamatti's comment:
I had to use transform-origin:bottom and width:0. That was working rather quickly, the big problem I had was positioning the text independently to the length of the text. I've only managed to do this by using javascript.
.header
{
margin: 0;
width: 0;
white-space: nowrap;
position: absolute;
text-align: left;
transform-origin: bottom;
margin-top: 280px;
transform: rotate(270deg);
}
Javascript (to ensure compatibility to variables text length):
function adjustSideHeader() {
//check if the headline is visible
if($('h1.headline').length > 0)
{
var headline = $('h1.headline')[0];
var stringLength = headline.textContent.length;
//add style tag to support media queries
document.querySelector('style').textContent +=
"h1.headline { margin-top: " + (stringLength*23.5) + "px; -webkit-transition: margin-top 2s; transition: margin-top 2s;}"
}
}
// fire it when document is loaded
$(document).ready(setTimeout(adjustSideHeader, 300));
Result:
Have you tried moving
<h1 class="headline">Über mich</h1>
inside
<div class="text">?
and set
.text {
position: relative;
}
so that the position is relative to to "text" div. After that you might want to move the Über mich text to the left by reducing it's left value.
Have you tried use position:relative and the margin property?, I suppose it would be something like this:
.headline {
white-space: nowrap;
position: relative; //changed
margin-top: 185px; //changed
margin-left: -20px; //changed
transform: rotate(270deg);
}
*Note: I think you should move the headline inside the paragraph
I have an answer that may be late but worked wonderfully for me.
Normally your text will have a class or id and it will be position:absolute, and positioning values after it, like so:
.TextClass{
position:absolute;
top:50%;
left:55%;
transform:rotate(-90deg);
etc.
However, when you rotate, the positioning becomes relative (as mentioned above).
I found out that by simply putting the rotated text inside a parent div, you can position the (unrotated, position absolute) parent div as much as you want, and then rotate the text (which will be position:relative) inside the parent div, like so:
.divname{
position:absolute;
top:50vh;
left:50vw;
}
.TextClass{
position:relative;
transform:rotate(-90deg);
}
I've run into a rather strange problem. I have a div that is rotatable via CSS3. The div has a front div child and back div child, with the back div having -webkit-transform: rotateY( 180deg ) set.
The problem that once the parent element is rotated to display the back side of the div, it will only detect clicks of child elements on exactly one side of the div, specifically the second half of the div or right side. The front side div detects clicks on the entire face of element. Also, the z-indexes are fine. I assume that the issue may be due to the rotation and the browser displaying one half of the side "closer"?
The code that this is breaking is extremely complex, so I created a test file to demonstrate the problem below. I'm using a jQuery plugin I wrote for the 3D transformations, which can be found here https://github.com/pwhisenhunt/jquery.transform/blob/master/jquery.transform.js.
Edit: After experimentation, the clicking of the button element is only registering from 100-200px and not from 0-100px. In other words, it is in fact only registering on the second half of the div.
Any help is very much appreciated!
<html>
<head>
<style>
.element{
width:200;
height:200;
-webkit-perspective: 800;
-webkit-transform-style: preserve-3d;
}
.element figure {
display: block;
height: 100%;
width: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
border:1px solid yellow;
}
.element .front {
-webkit-border-radius:8px;
padding: 0px;
margin: 0px;
background-color:yellow;
z-index: 9870;
}
.element .back {
-webkit-border-radius:8px;
padding: 0px;
margin: 0;
-webkit-transform: rotateY( 180deg );
z-index: 0;
border: 1px solid red;
background-color:green;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://raw.github.com/pwhisenhunt/jquery.transform/master/jquery.transform.js"></script>
<script>
$(function(){
var temp = false;
$(".element").click(function(){
if(temp == false){
$(this).transform("setAnimationDuration", 1).transform("rotateY", 180);
$(this).unbind("mouseenter mouseleave");
button = $(document.createElement('div')).attr("id", "button").css({ width: 200, height: 50, backgroundColor:"blue" });
button.click(function(){
console.log("Clicking");
});
temp = true;
$(this).append(button);
}
})
})
</script>
</head>
<body>
<div class="element">
<figure class="front"></front>
<figure class="back"></front>
</div>
</body>
</html>
A JSFiddle Example of the Problem - Can be found HERE!
I know this reply is a bit too late for most of us here, but I ran into this problem earlier today, and none of the replies helped me solve it.
Solution by #kristiankeane made the other half non-clickable. I was using a container for the wrapper as well. Turns out, it's an odd bug in webkit, and I was able to fix it and make 100% of the element clickable by changing transform: rotateY(180deg) to transform: rotateY(-180deg)
It's really odd, and I don't know how it worked, but it did. I hope this helps someone!
I had this exact same issue, was able to fix it by slightly changing the parent rotation when flipped - I changed
`.flip-holder.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}`
to
`$.flip-holder.flipped {
-webkit-transform: rotateY(180.5deg);
-moz-transform: rotateY(180.5deg);
transform: rotateY(180.5deg);
}`
and the entire backface (plus overflowed elements positioned absolutely) were now clickable, and the browser did not render the extra 0.5deg of rotation so text and images are clear.
Translate both front and back just a little bit and they won't overlap.
Example:
.element .front {
-webkit-transform: translateZ(1px);
}
.element .back {
-webkit-transform: rotateY(180deg) translateZ(1px);
}
it seems that you are missing a container (in much the same way I was missing it).
see the official documentation
it's not the outer element being flipped, but a wrapper inside it. that in turn causes one of two divs to be displayed (and the transition to occur)
If your flip card structure is like this:
<div class="flipcard">
<div class="flipcard-front">
</div>
<div class="flipcard-back">
</div>
</div>
then add this to your CSS:
.flipcard:hover {
pointer-events: none;
}
.flipcard-back:hover {
pointer-events: auto;
}
could It be (and I'm just speculating) that you should use a live or delegate event bind instead of the regular. I'm speculating the click event maybe 'remembers' some how the original div position without the rotating.
After all tricks as rotate to back and rotate to 180.5 and other...
problem fixed only the following way:
When the rotation ends - create new element, clone html from rotated element, and insert new element instead of old