Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Dynamically moving a fixed position button?

Trying to figure out the semantics behind why this works.

In this admin dashboard there’s a settings button that is fixed to the right side of the UI.

https://www.akveo.com/ngx-admin/pages/layout/stepper

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

If we click the settings button the settings panel expands and this moves the button.

However if we look at the right css position (With the developer tools) it is still set to 0 after the button is moved.

Just curious how this works? My understanding is the fixed positioning works relative to the viewport, so I was expecting the button to stay in place and the panel to cover it …

>Solution :

when the button is clicked, a class called ‘expanded’ gets added to the ‘ngx-toggle-settings-button element’

this ‘expanded’ class contains the rule ‘transform: translateX(-16rem);’ which moves the element and the button inside 16rem units in the negative x-axis

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading