Remove initial text from ngb-timepicker

Question

I am using this: https://ng-bootstrap.github.io/#/components/timepicker/examples

Copy pasted the following code:

<ngb-timepicker [(ngModel)]="time"></ngb-timepicker>

The result should be like this:

But it is different in a sense that annoying texts appear:

How to remove them? The api documentation doesn't mention anything about this.

Answer 1

those elements have class sr-only. It is a bootstrap class. According to docs:

Use screenreader utilities to hide elements on all devices except screen readers

Looks like the styles you use in the project. You might miss some css from bootstrap or some nasty things overrides the .sr-only styles.

Answer 2

In my case, the bootstrap css wasn't properly applied in my Angular project. I had to add following line in the global styles.css.

@import url("https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css");

Answer 3

The solution is the next:

<ngb-timepicker [(ngModel)]="time" [spinners]="false"></ngb-timepicker>

Those are called "spinners" and are set as "true" by default. Hope it works for you!

Answer 4

fast resolve

styles: [`
    .visually-hidden{
    display: none !important;
}