Moving first item of flex box independently to top of the page?-CodePudding

I want to move the Case Code Element to the top right of the screen but it is stuck inside of the flexbox and I cant seem to figure out how to move it independently. The display flex is being added to the .sidenav in javascript. position: absolute doesn't seem to work?

Image of what I've currently got:

function openNav() {
  console.log("opennav");
  document.getElementById("mySidenav").style.display = "flex";
}

function closeNav() {
  console.log("closenav");
  document.getElementById("mySidenav").style.display = "none";
}

.sidenav .action-object {
  display: block;
  margin-bottom: 10px;
  margin-right: auto;
  margin-left: auto;
  color: white;
  background: none;
  font-size: 24px;
}

.sidenav {
  display: flex;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 120;
  top: 0;
  left: 0;
  background-color: blue;
  overflow-x: hidden;
  /*padding-top: 60px;*/
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<div id="mySidenav" >
  <!--<a href="javascript:void(0)"  onclick="closeNav()">&times;</a>-->
  <h1 >Case Code</h1>
  <button  data-action="goto" data-info="home" onclick="closeNav()">Home</button>
  <button  data-action="goto" data-info="search" onclick="closeNav()">Search</button>
  <button  data-action="goto" data-info="evidence" onclick="closeNav()">People</button>
  <button  data-action="goto" data-info="people" onclick="closeNav()">Evidence</button>
  <button  data-action="goto" data-info="tools" onclick="closeNav()">Tools</button>
  <button  data-action="goto" data-info="questions" onclick="closeNav()">Questions</button>
</div>

CodePudding user response：

I just added this. seems work.

.sideNavCaseCode {
  margin-left: auto;
  margin-bottom: auto;
}

function openNav() {
  console.log("opennav");
  document.getElementById("mySidenav").style.display = "flex";
}

function closeNav() {
  console.log("closenav");
  document.getElementById("mySidenav").style.display = "none";
}

.sidenav .action-object {
  display: block;
  margin-bottom: 10px;
  margin-right: auto;
  margin-left: auto;
  color: white;
  background: none;
  font-size: 24px;
}

.sidenav {
  display: flex;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 120;
  top: 0;
  left: 0;
  background-color: blue;
  overflow-x: hidden;
  /*padding-top: 60px;*/
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.sideNavCaseCode {
  margin-left: auto;
  margin-bottom: auto;
}

<div id="mySidenav" >
  <!--<a href="javascript:void(0)"  onclick="closeNav()">&times;</a>-->
  <h1 >Case Code</h1>
  <button  data-action="goto" data-info="home" onclick="closeNav()">Home</button>
  <button  data-action="goto" data-info="search" onclick="closeNav()">Search</button>
  <button  data-action="goto" data-info="evidence" onclick="closeNav()">People</button>
  <button  data-action="goto" data-info="people" onclick="closeNav()">Evidence</button>
  <button  data-action="goto" data-info="tools" onclick="closeNav()">Tools</button>
  <button  data-action="goto" data-info="questions" onclick="closeNav()">Questions</button>
</div>

CodePudding user response：

Thanks everyone for the replies i managed to get it working by using position absolute, top: 0 and right: 0 with a 15px of right padding to get the result i was after:

final product

CodePudding user response：

I think you might be missing parts of your html. My answer may be incomplete as I'll need to see the full structure of the page..

Still, if you want the .sideNavCaseCode to be in the right corner of your page. For that, you can do:

.sideNavCaseCode { display: flex; justify-content: flex-end; }

Let me know if this is of any help. If not, we'll try again!

CodePudding user response：

You can use margin-bottom to auto. there are two ways to do it that i know of u can have different class name for the certain object or you can first child pseudo element if you have the same class name

* { box-sizing: border-box } body { margin: 0 } h1 { margin: 0 }

.sidenav {
  background-color: blue;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction:column;
  height:100vh;
}

.sideNavCaseCode {
  margin-bottom:auto;
}

.action-object {
  border: 1px solid currentColor;
  display: block;
  color: currentColor;
  background: none;
  font-size: 12px;
  margin:1px
}

<div id="mySidenav" >
  <!--<a href="javascript:void(0)"  onclick="closeNav()">&times;</a>-->
  <h1 >Case Code</h1>
  <button  data-action="goto" data-info="home" onclick="closeNav()">Home</button>
  <button  data-action="goto" data-info="search" onclick="closeNav()">Search</button>
  <button  data-action="goto" data-info="evidence" onclick="closeNav()">People</button>
  <button  data-action="goto" data-info="people" onclick="closeNav()">Evidence</button>
  <button  data-action="goto" data-info="tools" onclick="closeNav()">Tools</button>
  <button  data-action="goto" data-info="questions" onclick="closeNav()">Questions</button>
</div>

CodePudding user response：

OP, here is an updated answer. If you want "Case Code" to always be at the top even when scrolling like in the small snippet then use position: fixed like I've shown with .sideNavCaseCode2

* { box-sizing: border-box } body { margin: 0 } h1 { margin: 0 }

.sidenav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;

  background-color: blue;
  color: white;
  min-height: 100vh;
  padding: 30px;
  position: relative;
}

.sideNavCaseCode {
  position: absolute;
  inset: 15px 15px auto auto;
}
.sideNavCaseCode2 {
  position: fixed;
  inset: 15px auto auto 15px;
}

.action-object {
  color: currentColor;
  background: none;
  font-size: 24px;
}

<div id="mySidenav" >
  <!--<a href="javascript:void(0)"  onclick="closeNav()">&times;</a>-->
  <h1 >Case Code</h1>
  <h1 >Fixed Postion</h1>
  <button  data-action="goto" data-info="home" onclick="closeNav()">Home</button>
  <button  data-action="goto" data-info="search" onclick="closeNav()">Search</button>
  <button  data-action="goto" data-info="evidence" onclick="closeNav()">People</button>
  <button  data-action="goto" data-info="people" onclick="closeNav()">Evidence</button>
  <button  data-action="goto" data-info="tools" onclick="closeNav()">Tools</button>
  <button  data-action="goto" data-info="questions" onclick="closeNav()">Questions</button>
</div>