Buttons under each other in div

user_18171421 0
Viewed 166

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

css html
2 Answers

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>

user_52687320

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>

user_103216970
Related