Open js-pankaj-rana opened 6 months ago
I have two stepper and every stepper has a CarouselComponent, when I move one step two second step, the UI get broken.
package details
"ngx-owl-carousel-o": "^16.0.0", "bs-stepper": "^1.7.0",
Step 1 Image
Step 2 image
export class StepperOneComponent implements OnInit, OnDestroy { @ViewChild('owlCarOne') owlCarouselOne: CarouselComponent; public customOptions: OwlOptions = { mouseDrag: false, touchDrag: false, pullDrag: false, ... } }
export class StepperTwoComponent implements OnInit, OnDestroy { @ViewChild('owlCarTwo') owlCarouselTwo: CarouselComponent; public customOptions: OwlOptions = { mouseDrag: false, touchDrag: false, pullDrag: false, ... } }
<div id="stepper1" class="bs-stepper pt-4" #stepperRef> <div class="bs-stepper-header"> <div class="step" data-target="#test-l-1"> <button class="step-trigger"> <span class="bs-stepper-circle">1</span> <span class="bs-stepper-label">Personal Information</span> </button> </div> <div class="line"></div> <div class="step" data-target="#test-l-2"> <button class="step-trigger" [disabled]="disableStepper2"> <span class="bs-stepper-circle">2</span> <span class="bs-stepper-label">Eligibility</span> </button> </div> </div> <div class="bs-stepper-content"> <div id="test-l-1" class="content"> <app-stepper-one></app-stepper-one> </div> <div id="test-l-2" class="content"> <app-stepper-two></app-stepper-one> </div> </div>
StpperOne HTML template
<owl-carousel-o [options]="customOptions" #owlCarOne> <ng-template carouselSlide> <div class="card"> some content </div> <div> <button class="btn btn-primary btn-large" (click)="slideNext()" >Prev</button> <button class="btn btn-primary btn-large" (click)="slidePrev()">Next</button> </div> </ng-template> <ng-template carouselSlide> <div class="card"> some content </div> <div> <button class="btn btn-primary btn-large" (click)="slideNext()" >Prev</button> <button class="btn btn-primary btn-large" (click)="slidePrev()">Next</button> </div> </ng-template>
Stepper One HTML template
Stepper Two HTML template
<owl-carousel-o [options]="customOptions" #owlCarTwo> <ng-template carouselSlide> <div class="card"> some content </div> <div> <button class="btn btn-primary btn-large" (click)="slideNext()" >Prev</button> <button class="btn btn-primary btn-large" (click)="slidePrev()">Next</button> </div> </ng-template> <ng-template carouselSlide> <div class="card"> some content </div> <div> <button class="btn btn-primary btn-large" (click)="slideNext()" >Prev</button> <button class="btn btn-primary btn-large" (click)="slidePrev()">Next</button> </div> </ng-template> </owl-carousel-o>
I have two stepper and every stepper has a CarouselComponent, when I move one step two second step, the UI get broken.
package details
Step 1 Image
Step 2 image
html template of stepper (parent of carousel components)
StpperOne HTML template
Stepper One HTML template
Stepper Two HTML template