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.

Parent container with percentage for padding not working in IE11

See original GitHub issue

I have a parent container that has no width, but 10% padding. Works fine in most browsers with exception of IE11. Anyway, I’ve narrowed it down to and fixed it with the following. Sorry I would do a pull request/submit a change, but haven’t done it before. Cheers.

helpers.getMaximumWidth = function(domNode) {
		var container = domNode.parentNode;
		var paddingLeft = helpers.getStyle(container, 'padding-left');
		var paddingRight = helpers.getStyle(container, 'padding-right');

		if (paddingLeft.indexOf('%') > -1)
		    paddingLeft = container.clientWidth / parseInt(paddingLeft, 10);
		else
		    paddingLeft = parseInt(paddingLeft, 10);

		if (paddingRight.indexOf('%') > -1)
		    paddingRight = container.clientWidth / parseInt(paddingRight, 10);
		else
		    paddingRight = parseInt(paddingRight, 10);
		
		var w = container.clientWidth - paddingLeft - paddingRight;
		var cw = helpers.getConstraintWidth(domNode);
		return isNaN(cw)? w : Math.min(w, cw);
	};

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
etimbergcommented, Aug 4, 2017

@andi-b this would make a good PR. I found some good docs on how to make a PR if you’re interested

0reactions
etimbergcommented, Jan 1, 2020

@benmccann I looked at this just now as well. Not sure why this fix changes anything, as the math should work out identically. I tested again in IE11 using the latest code from master. I set the padding on the canvas container to '10%'. The chart was identical in IE11 and FireFox so I’m calling this resolved

Read more comments on GitHub >

github_iconTop Results From Across the Web

Issue with CSS and IE11 with position relative - Stack Overflow
I cannot figure out why this code is not working. ... .box_size { width: 100%; } .container { padding: 0.2em 0.4em; width: 100%; ......
Read more >
Oh Hey, Padding Percentage is Based on the Parent ...
It's weird having top padding based on width, but that's how it works — but only sorta. The 50% is based on the...
Read more >
What Does "width: 100%" Do in CSS? - Impressive Webs
The issue is when you have a parent div set to 100% because you want it to dynamically stretch with the page, within...
Read more >
min() - CSS: Cascading Style Sheets - MDN Web Docs
Math expressions involving percentages for widths and heights on table columns, ... border, and padding, will be 100% of its parent's width.
Read more >
How to Set CSS Margins and Padding (And Cool Layout Tricks)
In most cases, this might not be a big deal. However, setting the element's margin in terms of percentages will allow you to...
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