CODEWITHSUNDEEP
javascripthtmlcssreactjs
afr
afr

Reputation: 19

Positioning CSS

I'm working in a project and I need some help. The following picture is the layout I need to create: Right.

This picture, is the layout I'm getting: Wrong layout

The steps (welcome, preparation) should be one under the other, just like the RightLayout.

So, here's my Main.js code that calls the NewAccordion function:

          if (procedures[step]){
            return (
              <NewAccordion
                key={`${index}-${step}`}
                index={index}
                opened={currentStepIndex === index}
                procedure={procedures[step]}
                commandSender={sendViewerMessage}
              />
            );
          } else return "";
        })}

The following code is the part of my NewAccording function that is wrong:

      <article className="angel__flow">
        <a
          data-toggle="collapse"
          onClick={() => setShow(!show)}
          className={`angel__flow__button ${show ? "active" : ""}`}
          aria-expanded="false"
          aria-controls="collapseThree"
        >     
          {t(procedure.title[i18n.language])}
          <span class="angel__flow__button__number">{index+1}</span>  
        </a>
      </article>

The next code is the classname in css:

.angel__flow {
    display: block;
    width: 33.333333333333%;
    float: left;
    height: calc(100vh - 64px);
    text-align: center;
    overflow-x: scroll;
    padding: 8px;
    box-sizing: border-box;
}

So, guys, I really don't know what's wrong. I would really appreciate if any of you could help me. I'm sorry for my bad english, I'm from Brazil.

Upvotes: 1

Views: 61

Answers (1)

Niloy
Niloy

Reputation: 606

Can you try like this:

  <div className="angel__flow" style="display:flex; flex-direction: column">
        <a
          data-toggle="collapse"
          onClick={() => setShow(!show)}
          className={`angel__flow__button ${show ? "active" : ""}`}
          aria-expanded="false"
          aria-controls="collapseThree"
        >     
          <span>{t(procedure.title[i18n.language])}</span>
          <span class="angel__flow__button__number">{index+1}</span>  
        </a>
      </div>

Upvotes: 1

Related Questions