Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Border of div bound to routerlink directive?

I have encountered an issue where divs using routerLink get bordered with blue when clicked. I think I am missing something very obvious, possibly even a configuration I have in my browser or some missed css styling, so a polite explanation of the fix would be appreciated if so.

I've put together a basic demo of the issue here - https://github.com/DavidStreid/routingIssue. The code snippet creating this issue is at src/app/allGreetings.component.html and I put it below. Just download and "npm install; npm start" from the root, /routingIssue, to see the issue by clicking on the different greetings. I'm seeing this in chrome.

        <div *ngFor="let greeting of greetings" 
            class="col-xs-12 col-md-6 col-lg-4">
            <div class="paddingDiv"
                [routerLink]="greeting.routerLink">
                        <h3 class="greetingType">{{greeting.title}}</h3>    
            </div>
        </div>

EDIT: Here's an updated version from unitario's suggestion where I still see the blue border -

        <a *ngFor="let greeting of greetings" 
            class="col-xs-12 col-md-6 col-lg-4">
            <a class="paddingDiv"
                (click)="onSelect(greeting)">
                        <h3 class="greetingType">{{greeting.title}}</h3>    
            </a>
        </a>

SOLUTION: From Shota Papiashvili. The outline comes from the focus selector. I don't want the border so I eliminated it and added another focus style -

    .paddingDiv:focus {
        outline: 0;
        background-color: black;
    }
like image 815
David Streid Avatar asked Apr 16 '17 17:04

David Streid


People also ask

Does routerLink work on Div?

Yes it can be attached to div tag, your route is probably wrong try add / in front of route.

What does routerLink directive do?

Linking Routes in HTMLTo add links to one of the routes, use the routerLink directive in HTML. This directive accepts an array. The first parameter is the name of the route, and the second parameter is the parameters that you want to pass with the route.

What is difference between routerLink and href?

Href is the basic attribute provided by Html to navigate through pages which reloads the page on click. routerLink is the attribute provided by angular to navigate to different components without reloading the page.

Can we pass object in routerLink?

RouterLink for dynamic dataDynamic data or user-defined objects can be passed from Angular version 7.2 using the state object stored in History API. The state value can be provided using the routerLink directive or navigateByURL.


2 Answers

its css outline property, this is very important for accessibility, you can read more at: http://www.outlinenone.com/

if you still want to do it just add

.paddingDiv:focus {
  outline: 0;
}

to your css

like image 163
Shota Papiashvili Avatar answered Sep 20 '22 18:09

Shota Papiashvili


Not sure which version of the router your are using but since version 3 you cannot use routerLink on any other elements than a or button.

If you need to use it in a div then use a click event together with Router and navigate.

like image 31
unitario Avatar answered Sep 20 '22 18:09

unitario