Removing the blue focus border of the diagram

GoJS
1

Hello,

Would there be a way to remove the blue border of the diagram that appears as soon as it has the focus?

Thanks in advance,
Marc.

2

That’s not part of GoJS but applies to all HTML elements. I was going to suggest an obvious solution, but in doing a web search I came across: http://www.outlinenone.com/ which has a better suggestion.

3

Ha ha, thanks for this!

I actually just want to change the color of the focus from blue to something less in your face. Which element do I have to apply this to? Only to the

used as the basis for the diagrammer?

Thanks,
Marc.

4

Diagram.focus() calls focus() on the main Canvas element inside the Diagram’s Div element. However, this might change in the future.

5

OK. I think the “don’t do it” advice was probably the best one…
Thanks again,
Marc.

6

Resurrecting this thread.

Did something change in recent releases? Setting outline:none on specifically the <canvas> element does not seem to work anymore.

Anyone figure out how to remove the blue border?

7

In which version did it work for you, and in which version does it not?

Which browser does it fail in? Do you see the same behavior in other browsers? On which platforms?

8

I was using the latest. For example if you go to Basic GoJS Sample and add a CSS rule:

canvas { outline: none; }

It does not work. Though, now after writing this, I noticed the canvas blue border goes away, but the individual Node blue border does not go away. I am guessing THAT blue border is actually a Node selected property of some sort and the original thread was referencing only the actual canvas border?

In which case, I think I need to edit the: selectionAdorned to false.

Thanks!

9

Resurrecting this thread once more.

I am using GoJS 1.7.1

From GoJS documentation

"You can remove the outline while the Diagram is in focus. This is a CSS effect, not a GoJS effect, and can be removed by removing the CSS outline from all canvas elements inside the Diagram div:

/* affect all canvas elements inside myDiagramDiv /
#myDiagramDiv canvas {
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); / mobile webkit */
}"

I am apply the above solution, but still ,there is a blue border around text editor in diagram.

So you have any other suggestion to remove the blue border?

1 Like
10

Just as the previous posts in this topic pointed out, are you referring to HTML focus on the HTML DIV or CANVAS element, or about the GoJS selection Adornment around each selected Node?

Changing the former requires CSS; changing the latter requires either setting Part.selectionAdorned to false or setting Part.selectionAdornmentTemplate. GoJS Selection -- Northwoods Software

11

Part.selectionAdorned:false is working.

Thanks

12

Same issue.
I’m using GoJS version 1.7.

#myDiagramDiv canvas {
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); / mobile webkit */
}"

I added above one but blue border of canvas still appears.
Why?

13

I just tried it in four different browsers, and it worked for me.

1 Like
14

Now this case doesn’t work:

canvas {
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

!important don’t helped.

I checked result in chrome.

15

It’s unwise to have such a general CSS rule.

But when I try it, it works correctly in Chrome. It’s not a problem in Firefox to begin with.