Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to prevent hidden element to be shown when focused in Chrome?

I have a strange problem today, in Chrome, when I focus on an element that is absolutely positioned out of its overflow hidden container, it gets visible in Chrome browser (Mac).

I've made a fiddle to illustrate the problem : http://jsfiddle.net/GHgtc/

Html

    <div id="container">
        <a id="inner-button" href="#">You can see me !</a>
    </div>

Css

#container{
    display: block;
    background: blue;
    width: 200px;
    height: 30px;
    position: relative;
    overflow: hidden;
}

#inner-button{
    display: block;
    background: red;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 5px;
    right: -20px;
}

Thanks for your help !

Cheers !

like image 624
Yukulelix Avatar asked Apr 18 '13 19:04

Yukulelix


People also ask

How do you turn off the focus element?

To disable focus on a specific element, set the tabIndex property on the element to a value of -1 . The tabIndex property can be used to specify that an element cannot be focused using keyboard navigation. Here is the HTML for the examples in this article. Copied!

How to make a html element invisible?

To both hide an element and remove it from the document layout, set the display property to none instead of using visibility .

How do you inspect element in focus?

Hit F8 . Now you can move your mouse around, inspect the DOM, whatever. The element will stay there.

How do you show hidden inspect element?

There's a powerful tool concealed in your browser called Inspect Element. Right-click on any webpage, click Inspect, and you can see the structure of that site: its source code, pictures, CSS, fonts and icons, Javascript code, and more. You can also access this tool by pressing Ctrl+Shift+I (For Mac, Cmd+Option+I).


1 Answers

Use tabindex="-1" on your "inner-button". That will prevent focus. http://jsfiddle.net/GHgtc/2/

<input placeholder="focus on me then press tab" type="text">
<div id="container">
    <a id="inner-button" tabindex="-1" href="#">You can see me !</a>
</div>

UPDATE:

I realized there is another possible solution to your issue while working on some focus issue of my own. You can use z-index:-1 if the focus you need is to be triggered later via javascript event.

#inner-button{
    display: block;
    background: red;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 5px;
    right: -20px;
    z-index:-1;
}

http://jsfiddle.net/GHgtc/3/

That will keep it focusable but hidden. And you can make it visible back with z-index:0 dynamically.

like image 150
hexalys Avatar answered Sep 20 '22 21:09

hexalys