ngx-admin icon indicating copy to clipboard operation
ngx-admin copied to clipboard

Mobile screen issue with prod build

Open Saumya-NebCodes opened this issue 3 years ago • 12 comments

After taking a clone of the master branch and running npm build --prod run the dist folder with http-server dist the UI on the mobile screen gets distorted as unwanted scrolling occurs vertically and horizontally here are the login page and dashboard page.

ngx-admin Screenshot from 2021-11-18 11-07-43

Saumya-NebCodes avatar Nov 18 '21 05:11 Saumya-NebCodes

I also facing this issue. Please help with the solution.

IshtSharma avatar Nov 23 '21 08:11 IshtSharma

same here, please help

matzrm avatar Nov 25 '21 13:11 matzrm

me too, please help

hefujie1988 avatar Dec 13 '21 07:12 hefujie1988

Darn. Anyone got any ideas?

tommy4111 avatar Dec 29 '21 16:12 tommy4111

Any solution?

ruanolucas avatar Dec 30 '21 15:12 ruanolucas

Looks like optimization: true breaks mobile view. I don't know why.

tommy4111 avatar Dec 31 '21 11:12 tommy4111

Good news. You can add the following workaround to your style.scss (at the bottom) to fix it:

min-width: initial!important;

I believe bootstrap is overriding this somewhere. Maybe dev can find another way to fix it.

christomorrow avatar Dec 31 '21 12:12 christomorrow

Good news. You can add the following workaround to your style.scss (at the bottom) to fix it:

min-width: initial!important;

I believe bootstrap is overriding this somewhere. Maybe dev can find another way to fix it.

@christomorrow Hi thx for your trick, in which class do i need to put this Line in the style.scss ?

lorenzochaudessolle avatar Feb 17 '22 23:02 lorenzochaudessolle

@lorenzochaudessolle it needs to go in body, at the bottom of your style.scss or inside @mixin nb-overrides() in your _override.scss you need to add the following :

  body {
    min-width: initial!important;
  }

hope this resolves your issue

anantrp avatar Feb 26 '22 20:02 anantrp

https://github.com/akveo/ngx-admin/issues/5926 I need help, too

danielmachado1980 avatar Mar 22 '22 11:03 danielmachado1980

Hi folks I note that changing this property in DevTools, that works accordingly. image1 image2 But I don't know how to fix it. Any suggestion?

danielmachado1980 avatar Mar 22 '22 18:03 danielmachado1980

@lorenzochaudessolle it needs to go in body, at the bottom of your style.scss or inside @mixin nb-overrides() in your _override.scss you need to add the following :

  body {
    min-width: initial!important;
  }

hope this resolves your issue

Hi, in my case I tried to put the body min-width on both styles.scss and _overrides.scss but did not work. Anyway your comment pointed me to a dirty and simple solution: I changed the index.html file forcing the style on the body tag:

<body style="min-width: initial !important;">

Thank you!

simonemarra avatar Mar 23 '22 13:03 simonemarra