ng-bootstrap TimePicker微调框轮廓可见

Question

I'm trying to understand why my ngb-timepicker's spinners outlines are visible, I suspect it's something with the css but frankly I do not understand enough on this field. A way to fix that would be appreciated. (even if the solution includes hiding it through css, which again I don't understand enough to do on my own)

Example code:

Html:

<div mat-dialog-content>
    <ngb-timepicker [(ngModel)]="data.time" ></ngb-timepicker>
</div>

css is empty and I only use on TS the regular

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

I'm using both Angular material which imports

@import '../node_modules/@angular/material/prebuilt-themes/indigo-pink.css';

on styles.css and ng-bootstrap uses bootstrap 4.0 css which imports on index.html, is there a possibility a conflict between them might cause this?

Answer 1

There is actually a bug with the border of buttons in the timepicker when you use bootstrap 4.0.0-beta.2 and ng-bootstrap 1.0.0-beta.5 .

ng-bootstrap only use the class btn-link to customize these buttons. It work with bootstrap 4.0.0-beta , but not with beta.2 .

There is already a fix which will be available on the next release of ng-bootstrap.