Vertically Stacking Transformed Text Using Sass Css And Flexbox

Using FlexBox and Sass, I am trying to create stacked vertical bars as shown in the images pasted below. What I am expecting is the vertical text to take up the one-columned row, c

Solution 1:

If you look in the inspector, you can see that the original height of the container isn't being effected by the transform and that's why this is happening. I can't think of a way around it without measuring the new height after the transform with js.

I'm not sure what browsers you need to support, but text-orientation / writing-mode will do, mostly, what you need without js.

.skills-bar { writing-mode: sideways-lr; // only supported in FF, use 'vertical-lr' for more support text-orientation: upright; float: left; }

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation

Solution 2:

In order to measure the divs after the css transform, I used getBoundingClientRect().

With a few lines of jquery, I got what I needed:

$(document).ready(function(){
  var skills = $(".skills-bar")
  $.each(skills, function(i, div) {
    console.log(div);
    var dimensions = div.getBoundingClientRect();
    console.log(dimensions);
    $(this).css("width", dimensions.width).css("height", dimensions.height);
  });
});