PDA

View Full Version : Hide dotted focus rect on toolbar button



grubi
24 Sep 2009, 11:54 AM
Hi.

I'm currently trying to find a way to hide the dotted rectangle which is shown when clicking at a toolbar button with the mouse. My attempts doing this via css (outline:none) don't seem to work, so I wanted to try another approach by adding a call to blur() in the mousdown event. However I was not able to successfully add a mousedown event handler to a toolbar button.

Anyone able to show how to do this.

Thanks a lot.

grubi.

GoneIn20Seconds
24 Sep 2009, 12:45 PM
I am assuming that you are using Firefox, and I don't think the focus rectangle can be removed from a button, at least not with CSS.

I think you have to modify the setting on the browser itself, but that doesn't mean you'll be able to modify the setting on other user's computers.

Personally, the dotted outline used to bug me, but until I saw this post I have forgotten that it was still around. Maybe it only bugs you because you are trying to develop a beautiful UI. Users probably wont even notice it.

jnicora
24 Sep 2009, 12:56 PM
a {outline: none;}


that globally removes the outline

grubi
24 Sep 2009, 1:15 PM
a {outline: none;}
that globally removes the outline

That's what I tried, but it did not work (at least with IE).
AFAIK a tbbutton is rendered as a html button element. Maybe that's the reason it did not work. What should work is to call the blur() method on mousedown but this is not an available extjs event and so I don't know how to add the event to the native dom object.

Any suggestions?

Thanks.

jnicora
24 Sep 2009, 1:36 PM
my css solution is for FF only. For IE it gets trickier. You have to bind focus events and trigger a blur call. The biggest problem with this is that dom elements are inserted after the initial DOM ready, so you have to apply this method against anything newly inserted. Anyway, I didn't test this, but it should work.



var removeOutline = function(root){ // root = Ext.Element
var root = root || Ext.getBody();
root.select("a").each(function(el){
el.on("focus", el.dom.blur);
});
};
Ext.onReady(function(){
removeOutline();
});

jnicora
24 Sep 2009, 1:46 PM
my css solution is for FF only. For IE it gets trickier. You have to bind focus events and trigger a blur call. The biggest problem with this is that dom elements are inserted after the initial DOM ready, so you have to apply this method against anything newly inserted. Anyway, I didn't test this, but it should work.



var removeOutline = function(root){ // root = Ext.Element
var root = root || Ext.getBody();
root.select("a").each(function(el){
el.on("focus", el.dom.blur);
});
};
Ext.onReady(function(){
removeOutline();
});


just thinking out loud here. to make sure newly added elements get this focus listener, you could override boxComponents render method and include a call to this removeOutline passing in the components body element as the root. i havent really thought it all out, just discussing.

grubi
25 Sep 2009, 3:40 AM
To answer my own question:

The only possibility I found to succeed is to add a call to blur() in the onfocus event of the button. Note: Toolbar buttons are HTML <button> elements and no <a> elements. So all css based solutions do not work here.

The solution I found is:

// call this handler in the afterlayout event of the toolbar to
// disable the dotted focus rect on all contained buttons.

onAfterLayout = function(tb)
{
tb.getEl().select('button').on('focus', function(){this.blur();});
}

Animal
25 Sep 2009, 4:25 AM
You're going to a lot of trouble to defeat the browser's necessary accessibility measures.

What happens to people who use keyboard navigation?

grubi
25 Sep 2009, 6:27 AM
@Animal:

In general I completely agree with you, however using this special app without mouse does not make any sense at all.

Tom23
25 Sep 2009, 7:05 AM
IE has a special hideFocus attribute. Try this:


.ext-ie button {
outline: expression(this.hideFocus=1);
}Mozilla:


button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: none;
}

d4rk knight
26 Nov 2009, 11:30 AM
Hi,

I have a problem with the button focus in IE8.

When I use keynav to select the button, there are nothing like focus style. I mean, there is nothing to show the user that the button is selected.

Does anybody has the same problem?

It will be very helpful any clue.

Thanks