Blue border on jScrollPane div

Question

Live example: http://www.legodata.com/kc/kc.html

I've got a border display issue with jScrollPane, would you know which css rule to use to remove this border?

when clicking inside it, it displays a blue border around the jScrollPane div, it disappears (sometimes) when clicking outside the jScrollPane div.

It looks like this:

alt text

Here is the current CSS:

background-color: transparent;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
bottom: auto;
color: #999E92;
display: block;
float: right;
font-family: VerdanaArial, Helvetica, sans-serif;
font-size: 16px;
height: 802px;
left: auto;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
right: auto;
top: auto;
visibility: visible;
width: 200px;
z-index: 1;

I can reproduce this issue in Chromium and Safari (not tested in other places).

it's not possible from your css you give to answer you. I live example would help more — Sotiris, Nov 22 '10 at 11:26

score 21 · Answer 1 · answered Jan 23 '12 at 21:01

21

When you initialize jScrollPane, use the parameter:

hideFocus: true

For ex:

$('.scroll-pane').jScrollPane(
{
   autoReinitialise: true,
   hideFocus: true
});

answered Jan 23 '12 at 21:01

Michael

400
3
12

score 14 · Accepted Answer · answered Nov 22 '10 at 14:40

14

Try adding outline: none; to your css

answered Nov 22 '10 at 14:40

Dave Kiss

10,289
11
53
75

2

this worked for me $(element).jScrollPane({ hideFocus:true }); – Srinivas Rathikrindi Mar 02 '16 at 15:36

score 3 · Answer 3 · answered Nov 22 '10 at 15:20

outline: none; will work, but please be aware that this is a default browser behavior in Chrome, FF and Safari and will make it hard for partially sighted people to navigate your site. Make sure to add it only to non-navigable elements on your page.

Press

Option+tab

to see the navigational structure of your site shown to screen-readers, etc. And this will also show where the outline shows up on your other elements! :)

score 1 · Answer 4 · answered Nov 11 '11 at 12:14

1

All you have to do is to add the following line in your CSS.

.jScrollPaneContainer{
    outline: 0 none;
}

answered Nov 11 '11 at 12:14

vivek

1,944
1
17
26

Blue border on jScrollPane div

4 Answers4