CODEWITHSUNDEEP
htmlangularbootstrap-5ng-bootstrap
Raul Elguezabal
Raul Elguezabal

Reputation: 81

is it possible to change the width of an offcanvas panel?

I am currently using the offcanvas component in my project, however I need to make the panel wider than the standard offcanvas panel. I would preferably like it to be 35% width. I have tried using the panelClass NgbOffcanvasOptions property but I can't seem to figure out how it works. If anyone could help explain how to use it or can think of a better way to go about it, it would help a lot.

Here is what the code for the offcanvas looks like in my html file:

<ng-template #content let-offcanvas class="off">
<div class="offcanvas-header">
  <button type="button" class="btn-close" aria-label="Close" (click)="offcanvas.dismiss('Cross click')"></button>
</div>
<div class="offcanvas-body">
    <p class="eyebrow-sm">Lorem ipsum dolor</p>
    <h1 class="heading-2">Lorem ipsum dolor</h1>
    <p class="body-lg-regular">Lorem ipsum dolor sit amet, 
        consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <h1 class="heading-2">Lorem ipsum dolor</h1>
    <p class="body-lg-regular">Lorem ipsum dolor</p>
    <h1 class="heading-2">Lorem ipsum dolor</h1>
    <p class="body-lg-regular">Lorem ipsum dolor sit amet, 
        consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</div>

and here is what i'm using for the offcanvas in my ts file:

export class NavbarComponent implements OnInit {

  closeResult = '';

  constructor(private offcanvasService: NgbOffcanvas) { }

  open(content: any) {
    this.offcanvasService.open(content, { position: 'end', panelClass: '' });
  }

  private getDismissReason(reason: any): string {
    if (reason === OffcanvasDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === OffcanvasDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on the backdrop';
    } else {
      return `with: ${reason}`;
    }
  }

  ngOnInit(): void {
  }

}

Upvotes: 7

Views: 13201

Answers (5)

lator
lator

Reputation: 345

You can simply add the Bootstrap 5 w-{value} width utility class.

<div class="offcanvas offcanvas-start w-75 show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
  <!-- Offcanvas content -->
</div>

Don't forget that the value is in percentage. (1 <= value <= 100)

Upvotes: 12

VikSil
VikSil

Reputation: 108

If you are using Bootstrap locally with Sass, then this would set the offcanvas width to 35% of parent element:

.offcanvas {
    --bs-offcanvas-width: 35%;
}

Upvotes: 0

BatteryAcid
BatteryAcid

Reputation: 8891

You can create a custom class with whatever width you'd like, and specify its name in the panelClass parameter for the open call's options:

this.offcanvasService.open(content, {  panelClass: 'details-panel', position: 'end'  });

.details-panel {
    width: 50% !important;
    background-color: red;
}

You have to add encapsulation: ViewEncapsulation.None to your component's options if you plan on putting the style in the component's style file. Otherwise, it won't see the class.

@Component({
    selector: 'ngbd-offcanvas-options',
    standalone: true,
    templateUrl: './offcanvas-options.html',
    encapsulation: ViewEncapsulation.None, //  <-----
})

Docs: https://ng-bootstrap.github.io/#/components/offcanvas/examples#options

Upvotes: 4

Michael
Michael

Reputation: 31

Set the bootstrap variable $offcanvas-horizontal-width to your desired width.

Upvotes: 3

Kunal Ahuja
Kunal Ahuja

Reputation: 21

add these changes in styles.css

//This changes the width for all the offcanvas in the app
.offcanvas{
     width:50% !important;
}  

// If you are using multiple offcanvas in your app, add this
.offcanvas.offcanvas-{position}{
     width:50% !important;
}
//position refers to the position of the offcanvas i.e 'start'|'end'|'top'|'bottom'

Upvotes: 1

Related Questions