question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow attribution flag to resize with font-size

See original GitHub issue

The 🇺🇦 flag does currently not scale with font-size changes unlike the rest of the attribution.

width: 1em and height: auto should be sufficient in allowing the flag to resize with font-size changes.

Though em is not supported in IE 6-9, so perhaps something like the following is required:

var ukrainianFlag = '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="12" height="8"
+ viewBox="0 0 12 8
">
.leaflet-control-attribution svg {
	display: inline !important;
+	width: 1em;
+	height: auto;
	}

The CSS takes precedence over the presentational attributes, allowing the flag to resize in relation to font-size in browsers that support em units.

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:10 (10 by maintainers)

github_iconTop GitHub Comments

1reaction
Falke-Designcommented, Apr 24, 2022

run npm run watch and then open /debug/map/map-mobile.html

1reaction
sumitsaurabh927commented, Apr 19, 2022

I’ll get started in this! Thanks for assigning me!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Dynamically change the size of the font size based on text length
I'd probably want to start with a maximum font size and while the text is too big to fit the container, shrink the...
Read more >
Dynamic Font Resizing | JET Developer Cookbook - Oracle
Click the header gear button to open the settings dialog and change the font size. Dynamic Font Resizing.
Read more >
Options - Froala
The Font Size button from the WYSIWYG editor's toolbar is replaced with a dropdown showing the actual font size value for the current...
Read more >
Resize font - Free technology icons - Flaticon
Resize font. Super Basic Straight Outline ... Free for personal and commercial use with attribution. More info ... Font size icon. Add to...
Read more >
Image Transformations for Developers - Cloudinary
Cloudinary allows you to easily transform your images on the fly to any ... Resize and crop your images to the required dimensions...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found