bug(MatButtomSheet): overlay-pane has static position

[aalzehla]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I want to add MatBottomSheet to my project, but i noticed that it shows in the middle of the screen, not popup from botton as in example in documentation. after investigation i found it the overlay pane has static position as following: <div id="cdk-overlay-4" class="bottomSheetPanelClass cdk-overlay-pane" style="max-width: 100%;position: static;margin-bottom: 0px;"></div>

I tried adding the panel class "bottomSheetPanelClass" as following: .bottomSheetPanelClass{ position: absolute; bottom: 0 !important; }

Also I tried using: ::ng-deep .cdk-overlay-pane:has(.bottomSheetPanelClass) but nothing work.

BTW, Imported material theme and used mat.core() in my styles.scss, everything is fine with material, the project is huge and material works perfectly but only this issue...

Could you please help me

Reproduction

Expected Behavior

the MatBottomSheet pops up from down

Actual Behavior

The BottomSheet show up in the middle of the screen same as dialogs

Environment

• Angular: 17.1.1
• CDK/Material: 16.1.13
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[crisbeto]

It's because you're missing the common structural styles. You should add @include mat.core() to your theme file.

[aalzehla]

Thank you @crisbeto for replay, I mentioned that I use @include mat.core() in my theme file. the issue still there

[crisbeto]

Ah sorry, I must've missed it in the original description. I suspect that some structural style is overwritten somewhere, but it's hard to tell without a reproduction. Can you post the code that you're using to open the bottom sheet?

[aalzehla]

Thank you @crisbeto Here is the code I open BottomSheet

advanceFilter(){
    this._bottomSheet.open(AdvanceFilterScreenComponent,{
      panelClass: "bottomSheetPanelClass"
    }).afterDismissed().subscribe(res=>{
      ///....
    });
  }

[crisbeto]

There isn't anything that stands out in the code snippet either. Can you check that nothing is interfering with the styles on the .cdk-overlay-container, .cdk-global-overlay-wrapper or .cdk-overlay-pane styles? They're the ones responsible for positioning.

[aalzehla]

This is the top of the styles.scss:

@use "@angular/material" as mat;
/* You can add global styles to this file, and also import other style files */
@font-face {
  font-family: "Neo-sans-arabic";
  font-style: normal;
  font-weight: 500;
  src: local("Neo-sans-arabic"), url("assets/fonts/NeoSansArabicMedium.ttf") format("ttf");
}

@import "@angular/material/theming";
@import "variables";

@include mat.core();

@import 'swiper/scss';
@import 'swiper/scss/navigation';
@import 'swiper/scss/pagination';

@import "themes/myc.scss";


@include ng-spp-theme($app-theme);


@import "../node_modules/bootstrap/scss/bootstrap.scss";



html,
body {
  height: 100%;
  overflow: hidden;
  --mdc-typography-font-family: 'Neo-sans-arabic';
  --mdc-filled-button-container-height:40px;

}
body {
  margin: 0;
  font-family: 'Neo-sans-arabic';
  --mdc-typography-font-family: 'Neo-sans-arabic';
  --mdc-typography-letter-spacing:normal;
  --mdc-filled-button-container-height:40px;
}

there is no override for overlay pane in the styles.css

the problem is that the cdk-overlay-pane uses style attribute not CSS class it seems to me that hard coded in the BottomSheet itself, look at the element style attribute:

<div id="cdk-overlay-22" class="cdk-overlay-pane bottomSheetPanelClass" style="max-width: 100%; position: static; margin-bottom: 0px;"><div tabindex="0" class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true">
    ....
</div>

[crisbeto]

Those inline styles are as expected. The bottom sheet is positioned using flexbox inside the cdk-overlay-container which is position: fixed.

[aalzehla]

OK, understand, thank you @crisbeto

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}