Place position fixed item inside d-flex to right hand size-CodePudding

I am trying to make a alphabetic navigation bar at the right hand side of screen. The purpose of this bar is to navigate to the correct country code base on the alphabet select by the user.

I am trying to achieve this by the wrapping country code option and the navigation bar inside a div with "d-flex flex-row" and set the position of the navigation bar to fixed. (To make the option and navigation bar next to each other)

But I notice the navigation bar keep positioned on the left hand side of screen instead of right hand side. Is anyone have any idea to solve this?

Really Appreciated!!!

Here is the screenshot of the output:

Here is the code:

HTML

<div >
      <div >
        <country-code-category prefix="A" id="countryStartWithA" />
        <country-code-category prefix="B" id="countryStartWithB" />
        <country-code-category prefix="C" id="countryStartWithC" />
      </div>

      <div >
        <a href="#countryStartWithA">A</a>
        <a href="#countryStartWithB">B</a>
        <a href="#countryStartWithC">C</a>
      </div>
    </div>

CSS

.style-shortcut-navigation {
  display: flex;
  flex-direction: column;
  font-size: 10.25px;
  color: $text-blue;
  height: 100vh;
  position: fixed;
  width: 100%;
  max-width: 10px;
}

.style-shortcut-navigation > a {
  text-decoration: none;
}

CodePudding user response：

At a quick glance i would guess your issue lies with assigning the "position: fixed" in css. The fixed position assignment overrides a lot of the behaviours and just places it somewhere on the screen.

Possible solutions: (just experiment with what works best for you) assigning the fixed position with values, or setting position to sticky

Fixed position with values

    .style-shortcut-navigation {
        display: flex;
        flex-direction: column;
        font-size: 10.25px;
        color: $text-blue;
        height: 100vh;
        position: fixed;
        top: 0; /*Or whatever offset from the top of the page you need*/
        right: 0; /*Or whatever offset from the right of the page you need*/
        width: 100%;
        max-width: 10px;
    }

Sticky position

    .style-shortcut-navigation {
        display: flex;
        flex-direction: column;
        font-size: 10.25px;
        color: $text-blue;
        height: 100vh;
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 0; /*Or whatever offset from the top of the page you need*/
        right: 0; /*Or whatever offset from the right of the page you need*/
        width: 100%;
        max-width: 10px;
    }

For more info on how position values behave, check out w3schools.

CodePudding user response：

parentSelector (the drop down list) {
    position: relative;
}
 
.style-shortcut-navigation or .d-flex.flex-row {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
}

it could be that width is 100% so it doesnt have room to go right, add smaller width like "auto" or text-align: right or align-items: flex-end on .style-shortcut-navigation