-1

Question: Application should render in center of the screen when user view my ionic mobile application on the desktop browser.

attempt 1 : I tried using wrapper div on it with width fixed in my case max-width:732px; and margin: 0 auto; but ionic don't allow us to append div over app screen goes blank.

attempt 2 : Used width for inner element like (header, footer, ionic-view ) and tried align that in center but header .bar class breaks header as it is positioned element with this fix also didn't work expected;

attempt 3 : Used position and try to align with width:calc(50% - 732px); still header breaks;

my understanding : ionic-view .scroll-content is positioned element, it create new element for scroll so won't be fix with margin, text-align, wrapper or inner element

expectation : Is there any way to fix this issue? i want my application to look like this resolution independent in center of the screen: https://jsfiddle.net/HarishBoke/26a6dbbu/1/

Any help is much appreciated advance. Thanks in Advance.

Harish Boke
  • 557
  • 3
  • 16

1 Answers1

0

You can run your ionic application using:

  • ionic serve (normal desktop view)
  • ionic serve --lab (This will show you the mobile views of your ionic application based on the platforms you set)
Dinesh Sundaraneedi
  • 402
  • 1
  • 5
  • 18