Buttons under each other in div-CodePudding

i created div for some buttons in a kind of sidebar. But I am not quite sure how do I get them under each other...

My previous solution were 2 divs under eachother but then it was not that could regarding the various display sizes that the buttons are directly under each other...

Any idea?

#sideBar {
  position: fixed;
  right: -29px;
  top: 52vh;
  display: inline-grid;
}

#feedbackBtn {
  z-index: 1000;
  transform: rotate(270deg);
}

#helpBtn {
  z-index: 1000;
}

<div id="sideBar">
  <Button id="feedbackBtn" onClick={onButtonClick} design="Emphasized">
          Feedback
        </Button>

  <Button id="helpBtn" icon="sys-help" onClick={onButtonClickHelp} design="Default"></Button>
</div>

Image

CodePudding user response：

You could remove the display: inline-grid property from #sideBar, e.g.

#sideBar {
  position: fixed;
  right: 0px;
  top: 52vh;
  transform: rotate(270deg);
  z-index: 1000;
}

<div id="sideBar">
  <button id="feedbackBtn">Feedback</button>
  <button id="helpBtn">Help</button>
</div>

CodePudding user response：

you can use

      transform-origin: top left;

on rotate element to give him a display "shape" in the dom part it will push the help button under him

#sideBar {
      position: fixed;
      right: 0;
      top: 52vh;
      flex-direction:column;
    }

    #feedbackBtn {
      transform: rotate(270deg);
      transform-origin: top left;
      margin-right: -45px;
    }

    #helpBtn {
      z-index: 1000;
    }
    
#sideBar div {
  display:flex;
  justify-content: right;
}

  <div id="sideBar">
    <div>
      <Button id="feedbackBtn" onClick={onButtonClick} design="Emphasized">
        Feedback
      </Button>
    </div>

    <div>
      <Button id="helpBtn" icon="sys-help" onClick={onButtonClickHelp} design="Default">help</Button>
    
    </div>
  </div>

CodePudding user response：

I think you only need the sideBar CSS, Using the attribute below you could make it stick to the right and the button will behave like normal.

Note that

I move the z-index to sidebar because all the button inside of it should be on top of all element right? so you could put it on the sidebar, it doesn't have to be on the child
I move the transform to sidebar so you basically the thing that's rotating is the "container" of the sidebar, you can imagine it as a normal container with two button side by side, and then you rotate it, that's why the button is actually still side by side, not on top of each other

sorry for bad English

#sideBar {
  position: fixed;
  transform: rotate(270deg);
  z-index: 1000;
  right:-10px;
  top: 52vh;
}

<div id="sideBar">
  <Button id="feedbackBtn" onClick={onButtonClick} design="Emphasized">
          Feedback
        </Button>

  <Button id="helpBtn" icon="sys-help" onClick={onButtonClickHelp} design="Default">Help</Button>
</div>