Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix compact attribution style when using global CSS that sets box-sizing: border-box; #12982

Merged
merged 1 commit into from
Nov 30, 2023

Conversation

simondriesen
Copy link
Contributor

@simondriesen simondriesen commented Nov 21, 2023

Fixes #10585

Recording 2023-11-21 220744

Summary

  • For front-end developers it's common practice to globally set the CSS box-sizing property to border-box for all elements. Like w3schools.com writes: "Applying this to all elements is safe and wise".
  • The CSS of the attribute control is written assuming box-sizing is set to content-box, causing developers that have globally set box-sizing: border-box to have the visual bug as seen in the GIF above.
  • My solution would be specifying the CSS property box-sizing value for .mapboxgl-ctrl-attrib so global user preferences don't influence the styling of the compact attribution control.
  • This approach was already taken for .mapboxgl-ctrl-scale so I would say it's a consistent solution.

Steps to Trigger Behavior

  1. Setup a map with an compact attribution control.
  2. Define the following CSS anywhere in your application:
* {
  box-sizing: border-box;
}

Launch Checklist

  • Make sure the PR title is descriptive and preferably reflects the change from the user's perspective.
  • Add additional detail and context in the PR description (with screenshots/videos if there are visual changes).

@simondriesen simondriesen requested a review from a team as a code owner November 21, 2023 22:10
@CLAassistant
Copy link

CLAassistant commented Nov 21, 2023

CLA assistant check
All committers have signed the CLA.

Copy link
Contributor

@stepankuzmin stepankuzmin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch, thanks @simondriesen!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Info button not aligned correctly with box-sizing: border-box
3 participants