CODEWITHSUNDEEP
angularbootstrap-4angular-ui-bootstrapng-bootstrap
codelove
codelove

Reputation: 11

ngb timepicker override fieldset css styles

I am using ngbootstrap in my application and for time control am using ngb time picker, when i used it, it comes wrapped with fieldset by default, any suggestions on how to not show time picker with fieldset around it. This is how i am seeing it with fieldset Time Control Image with fieldset and in developer tools it shows that ngbtimepicker has fieldset in it ngbtimepicker html here

Below is my html code

 <ngb-timepicker ngb-timepicker (ngModelChange)="onTimeChange($event)" [seconds]="true" 
  [hourStep]="hourStep" [minuteStep]="minuteStep" [secondStep]="secondStep"></ngb-timepicker>

I am trying to achieve this click here

Any Suggestions?

Upvotes: 1

Views: 913

Answers (2)

Alan Jair Tapia Luna
Alan Jair Tapia Luna

Reputation: 1

To customize css atributes from a ng bootstrap component, you need to use:

    ::ng-deep ngb-timepicker fieldset{
      border: none !important;
    }

Upvotes: 0

IAfanasov
IAfanasov

Reputation: 4993

looking into ng-bootstrap time picker sources, I see no opportunity to remove the fieldset tag. Most likely it is needed for accessibility reasons. I suppose you can only change the visual appearance of the fieldset. Looking into the pictures provided, I suppose you need to remove border from the fieldset. The solution would look somewhat like 

fieldset {
   border: none;
}

Depending on your app, you might consider use different css selector.

Upvotes: 0

Related Questions