bug: IonPopover size "auto" does not match content

[Facj]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

According to the documentation, IonPopover width will match popover content if type "auto" is selected in size attribute.
However, it forces width to 250px, the default size described in popover-md-width and does not adapt to wider content.

Expected Behavior

IonPopover width should adapt to content width when attribute size = "auto".

Steps to Reproduce

I have created a minimal app with three different pages that can be accessed using buttons in Home page. All of them include IonPopover or IonSelect with popover interface. Popover width does not match wide content in any of them.

Page1 includes a popover that can be opened using a button.
Page 2 include a form with IonSelect fields with popover interface.
Page 3 is the same as Page 2 but the form in nested inside a more complex page content, that matchs closely my real app.

Code Reproduction URL

https://github.com/Facj/ionpopover-issue

Ionic Info

$ ionic info

Ionic:

Ionic CLI : 6.6.0 (C:\Users\fcastro.NORVENTO\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/react 7.2.1

Utility:

cordova-res : not installed
native-run : 1.7.2

System:

NodeJS : v16.15.1 (C:\Program Files\nodejs\node.exe)
npm : 9.4.2
OS : Windows 10

Additional Information

There are quite a few related questions in Ionic forum (1, 2, ) and Stackoverflow (1, 2, 3 ) trying to set IonPopover size. Users are looking for CSS-based solutions, which would not be necessary if IonPopover size "auto" would actually match content width.

[liamdebeasi]

Thanks for the report. Can you clarify how you are trying to set the size of the popover? By default ion-popover uses a width of 250px. However, you can set --width: auto on the ion-popover host to have the popover be sized relative to the size of the child content.

I tried setting the following CSS in your app, and the popover was sized based on the size of its content:

ion-popover {
  --width: auto;
}

[Facj]

Thanks! It does work as you say.

I was doing nothing to enforce popover size based on content. Reading the documentation, I assumed auto width was the default and, therefore, I thought this was a bug.

The actual behavior does make sense but the documentation is not clear.

[liamdebeasi]

I agree that this is confusing. I opened a PR to clarify this: #27894

I am going to close this since this is not a bug in Ionic, but let me know if you have any questions.

[Facj]

Thanks for your help!

Going over the popovers in my code, I have realized --width: auto is not correctly applied when the list of options is long and scroll is needed. I have updated my minimal example to include a long list of options in Page2.

[liamdebeasi]

Seems to be working on my end:

Setting --width: auto causes the popover to have a width of ~265px. Without the --width: auto it reverts back to its platform default of 250px.

[Facj]

On my end, there is a scroll in the popover and it seems to avoid the --width: auto enforcement.

Is it possible that your screen is big enough to fit all the options so no scroll is needed? Could you test a smaller screen size?

[liamdebeasi]

The truncation is likely happening because of the scrollbar. I don't know if width: auto takes into account the scrollbar width across platforms.

[Facj]

Yes, it looks like the scrolllbar is the cause of the truncation.

It seems like width: auto is not applied anymore when the scrollbar appears because width is back to 250px.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.