feat: Option to place the app in the middle of the screen when running on browser

[RRGT19]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

When the application is running in the browser and on large monitors, the visual aspect leaves much to be desired due to the large width.

An example of the content in the center of the screen could be Expedia, where they have the content perfectly centered and it is easier to read and manipulate regardless of the size of your monitor. Also, booking is a good example.

Describe the Use Case

Apart from having our mobile application published on the platforms, we also want to take advantage of the same code to deploy the application in web mode and offer our users the same experience.

By default, the ion-split-pane and the content inside theion-router-outlet is very wide, mainly the ion-router-outlet. On 2k/4k monitors the experience and usability is very low, or at least for us.

I have seen that several developers have the same question and/or requirement and they try to do the famous workaround, but it doesn't work properly.

Apparently, it is a requirement among many of the developers who use Ionic and want to run the application in a browser.

Describe Preferred Solution

Instead of trying to center the content myself, the famous workaround, I'd like an option that turns this mode on, perhaps by adding a class somewhere or some configuration in the IonicModule.

Describe Alternatives

No response

Related Code

I have tried to do it myself with this CSS on global.scss. It seems to work perfectly, but I'm not sure if it will have implications with any Ionic component.

body {
  background-color: black;
}

ion-app {
  margin: 0 auto;
  max-width: 75rem;
}

Demo here: https://github.com/RRGT19/ionic-demo-full-screen

The CSS is on global.scss

Additional Information

No response

[liamdebeasi]

Hey there,

Ionic Framework is targeted for mobile applications, so adding desktop support is out of scope for the project. That being said, the CSS you are using is the approach I would recommend. You are modifying the ion-app container which all of your content will be rendered inside of. As a result, pretty much all components should account for that adjusted width.

One thing that might look a little weird are Card Modals on iOS since we scale the presenting view when opening a modal. Other than that, everything should work as intended. I am going to close this, but let me know if you have questions.

[RRGT19]

Hi @liamdebeasi

Thank you for always being available to help us.

We want to use the App in browser mode to avoid going into web development completely from scratch. Right now, we have a problem that we haven't been able to fix via CSS.

The ion-select of type popover appears to not correctly recognize the width and height that app-root has.

Options appear very low on the screen, and sometimes very far to the right. It is never central and just below the ion-select. I hope you don't mind taking a look, maybe there is some other CSS property in app-root that we need to adjust. We have tried several things, but none have worked.

Demo: https://github.com/RRGT19/ionic-demo-full-screen/tree/feature/tablet

Take a look at the index.html and the global.scss file.

Other types of ion-select seems to work properly, for example the action-sheet interface and the default style. But popover is not.

Thanks again for the support.

[liamdebeasi]

Popover's position is calculated using getBoundingClientRect() which provides size and position information relative to the viewport.

Popover also assumes that the app container matches the dimensions of the viewport. Since your app container does not match the dimensions of the viewport, you'll need to offset the popover position by however much you altered the app container by.

You can use popover's --offset-y CSS Variable to adjust the popover up or down based on your needs. For example, doing the following brings the popover closer to the trigger button:

ion-popover {
  --offset-y: -88px;
}

I determined this value by calling getBoundingClientRect on the .tablet element and using the top result.

[RRGT19]

@liamdebeasi

Thanks a lot for the recommendation. I can see the information of document.getElementsByClassName("tablet")[0].getBoundingClientRect(); to get the values to set the offset.

However, depending on the width of the viewport, how long or how short the ion-select options are, it behaves differently. The offset configured to resolve 1 case does not apply to all the others. For example, if the select is at the top of the screen (first element in ion-content), it works fine. But if the select is at the bottom, it doesn't work very well and even goes off screen instead of showing above the ion-select.

I was thinking that maybe it's better to try not to go against an established behavior and just change the interface of the ion-select to type alert when the platform is browser. Seems like a valid sacrifice given the different scenarios.

Thanks again for all your help so far.

[ionitron-bot[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.