Search code examples
javascripthtmlalignmentcss-grid

The text inside the circle from ProgressBar.js won't center correctly inside my CSS Grid cell

Full working code here.

https://codepen.io/chen-luke/pen/gOweWKE

My CSS grid is made up of two columns

    .grid-template-areas:
        "name name"
        "rate diff_rate"
        "ratePie w-t-a"
        "help help"
        ". r-link";

Inside my ratePie cell is where I put my progress circle. The circle would display correctly, but the text "4/5" from the circle will not. What can I do to align the text in the center of the circle?

Solution

  • Remove autoStyleContainer: false from the text: configuration parameter. Alternatively, remove the entire text: parameter since it becomes unused.

    By including that setting you are telling ProgressBar that you want to style the <p> tag yourself - which you never actually do.

    The default text styles are designed to do exactly what you want.