Parent container with percentage for padding not working in IE11
See original GitHub issueI 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:
- Created 6 years ago
- Comments:5 (5 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@andi-b this would make a good PR. I found some good docs on how to make a PR if you’re interested
@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