0

Got a problem that offcanvas body scroll not works. Can't understand what I missed to. Maybe somebody can help me, thnx )))

Using Laravel 9, calling offcavnas by include:

...
        <div class="col-md-2">
            <div class="card">
                <div class="card-body">
                    <div>
                        <button type="button" class="btn btn-primary w-100 p-2" data-bs-toggle="offcanvas" data-bs-target="#canvas-daily" aria-controls="canvas-daily">Request new report</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('pages.reports.canvas', [
        'canvas_id' => 'canvas-daily',
        'canvas_header' => 'Daily Report',
        'show_select_servers' => true,
        'select_servers_multiple' => false,
        'show_select_dates' => true,
        'select_dates_time' => false,
        'select_dates_single' => false
    ])
...

offcanvas itself:

<div id="{{ $canvas_id }}" class="offcanvas offcanvas-end" aria-labelledby="offcanvas-label" data-bs-backdrop="true" data-bs-scroll="false">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvas-label">{{ $canvas_header }}</h5>
    </div>
    <div class="offcanvas-body">
        <form id="canvas-form-reports" action="{{ route('reports.basic.daily.store') }}" method="POST">
        ...
            <br /> 123 <br />
        ...
            <br /> 123 <br />
            <div class="row mt-5">
                <div class="col-md-12">
                    <button id="canvas-btn-request-report" type="submit" class="btn btn-primary w-100 p-2" onclick="ShowLoader(true);">Request report</button>
                </div>
            </div>
        </form>
    </div>
</div>

As result: page body is scrollable, canvas body - not. Because of data-bs-backdrop="true" data-bs-scroll="false" expected opposite result. Where I made mistake?

funtus
  • 19
  • 3

1 Answers1

0

My bad - problem was in bootstrap template. In my case scroll bar was over written css. So I just put offcanvas code outside div block that used scroll and everything works now.

funtus
  • 19
  • 3