So here's the deal, I've got some dynamically generated html going on where I'm assigning 1-6 scaled svgs as children of a . The span is inline with 2 other spans to give it that nice layout:
https://i.sstatic.net/mySYe.png
I want these "boxes" to all be the same width because they need to line up in a grid. However, due to the varying number of svgs (ranging from none to 6), their sizes differ.
The approach I took was defining the parent div's width as 100px irrespective of the svg content inside, but this doesn't seem to do the trick. Here's my current setup:
var html = '<div id = "innerCal">';
html += '<div class = "calCell"><span>[</span><span style = "width 100px; display: inline-block">';
html += svg; //varies
html += '</span><span>]</span><h2>'+key+'</h2></div>';
#innerCal {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -17px; /* Tweak this value for better browser compatibility */
overflow-y: scroll;
text-align: center;
}
.calCell {
display: inline-block;
width: 100px;
margin-bottom: -40px;
}
.calCell > span > svg {
display: inline-block;
transform: translate(0px, 30px);
}
.calCell > h2 {
text-transform: uppercase;
opacity: 0;
font-weight: 400;
}
When setting the width for the svgs, I do so like this:
svg += `<svg width = "20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 443"><defs><filter x="-50%" y="-50%" width="200%" height="200%" id="Blur${i}"><feGaussianBlur stdDeviation="${gauss}" /></filter><g id="Img${i}"><path class="cls-1" d="M202.76,281.72a67.53,67.53,0,0,0,68.67-42.57,66.32,66.32,0,0,0-21.66-76.4,60.38,60...
How can I ensure that the boxes are always the same width? I'm open to adjusting the svg width dynamically if needed. Currently, the svgs are stacking despite the display: inline-block property.