search

creativetimofficial / ct-paper-dashboard-pro-angular

8 stars 10 forks source link

[Bug] Angular 13 - UI header misaligned #42

Closed mrseanr closed 2 years ago

mrseanr commented 2 years ago

Version

1.5.0

Reproduction link

https://github.com/creativetimofficial/ct-paper-dashboard-pro-angular

Operating System

Mac OS Monterey

Device

2021 Macbook Pro (M1 Pro Chipset)

Browser & Version

Chrome v. 101.0.4951.41

Steps to reproduce

  1. download zip
  2. extract to folder
  3. open vs code
  4. npm install
  5. ng s
  6. open chrome
  7. browse to "http://localhost:4200"

    What is expected?

    All UI elements aligned properly

    What is actually happening?

    On the M1-Pro Macbook Pro the UI elements are misaligned

Solution

Additional comments

This issue appears to only affect the M1 (or M1-pro) variants. If I build this on my 2016 Macbook Pro (Intel chipset) - with the same chrome version - the bug doesn't appear. Additionally - this doesn't appear to happen on Safari (v.15.4) on the same machine

mrseanr commented 2 years ago

Screen Shot 2022-04-29 at 9 01 33 AM Screenshot from Chrome

mrseanr commented 2 years ago
Screen Shot 2022-04-29 at 9 10 53 AM

Screenshot from Safari (v.15.4)

mrseanr commented 2 years ago

It appears to be a CSS issue. the "main-content" styling Screen Shot 2022-04-29 at 3 24 06 PM .

rarestoma commented 2 years ago

Hi @mrseanr,

Thank you for working with our products.

To fix this issue please go to src/assets/scss/paper-dashboard/_navbar.scss and on line 74, where &.navbar-absolute style is written, addtop: 0;:

    &.navbar-absolute{
        position: absolute;
        top: 0;
        width: 100%;
        padding-top: 10px;
        z-index: 1029;
    }

Please let me know if it works.

Best regards, Rares

mrseanr commented 2 years ago

Thank you @rarestoma - That worked.