Circular progress bar position

Question

There is a circular progress bar. This bar prints the number of days remaining, taking the day difference. But I'm having trouble adjusting the position of this bar.

I am trying to do;

What I've been able to do so far;

html

<div className={'circularremainingtime__container only-desktop' + circularColor}>
  <div className="remainingday">
    <p>{endDate.getDate()}</p>
    <p>{endDateMonth}</p>
  </div>
  <AS.CircularProgress
    className="circularprogress"
    style={style}
    variant="determinate"
    value={persentage}
    thickness={3}
  />
  <p>{circularText}</p>
</div>

css

.circularremainingtime__container.only-desktop {
  width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 1.5em;

  & > p {
    margin: 0;
    font-weight: 600;
    margin-top: 0.5em;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--palette-red-300);
  }

  & > div {
    padding: var(--padding);
  }
  .circularprogress {
    color: var(--palette-red-300);
  }

  .remainingday {
    //position: absolute;
    color: #004dcf !important;
    padding-top: 5px;
    
    p{
      margin: 0;
      text-align: center;
      color: #004dcf !important;
      font-size: 8px;
      font-weight: bolder;
    }

    p:first-child{
      font-size: 13px;
      text-align: center;
    }
  }
}

When I set the remainingday class to absolute, I can get the image I want. But when I swipe the screen, the dates don't change at all. That's why I commented that line.

Answer 1

You need to use position: absolute; top:0px; position: absolute; top:0px; for . circularprogress . circularprogress in your style because what you are doing is rendering the element next to the div, that's why it is showing below that.

Cheers.