use initial width for element not working in IE
Solution 1
Like you said, generally width: auto
will have a similar effect. Having the rules:
.my-selector {
width: auto;
width: initial;
}
Should cause it to use initial
if it's supported and auto
otherwise.
Solution 2
Using width: auto;
inline, inside the script solves the problem on Chrome, FIrefox and IE 11. Just not sure if there is a better way.
Related videos on Youtube
Rikard
Updated on January 21, 2020Comments
-
Rikard over 4 years
I have a graph plugin that inserts canvas and a legend
<table>
to its container. In this plugin thetable
has nowidth
defined and in my CSS there is a width for tables inside that container were my plugin gets inserted.So, the new div is inheriting
table{ width: 100%}
from the CSS and rendering wrong.I tried to use
width: initial;
, looks good on Chrome but IE doesn't like it check browser compatibilityI admit changing/forcing a inline CSS in the script/plugin since it has to work in any enviroment.
What is the best solution here?
-
BuddhistBeast over 10 yearsHave you tried just setting a minimum width? Does it work?
-
Rikard over 10 years@BuddhistBeast, didn't think about that! But tried that now and didn't work on Chrome either.
-
-
gtramontina almost 8 yearsAs a note,
initial
is a valid property value (developer.mozilla.org/en-US/docs/Web/CSS/initial). But (if you scroll down to "Browser compatibility" in the previous link), no IE version supports it. -
chharvey over 7 yearsthis is known as a fallback and is a very common coding pattern in CSS. also, using
width: auto
will not only have a similar effect, but it will have the exact same effect, becauseauto
is defined to be the initial value for thewidth
property.