CODEWITHSUNDEEP
cssreactjs
user_27
user_27

Reputation: 31

how to align Button to the right of the window

I am trying to align the login button to the Top right of the page.

I have Logo on left corner of the page and need to keep Login button to top right. when I am trying to do with padding-left the alignment is changing when I see in another screen size.

I am building this in React JS

   <Box >
  <Grid className="custom-home__header" >
    <Box padding={{ vertical: "s" }}>
      <Grid>
        <Box>
          <img
            className="photo"
            src={image}
            alt=" Logo"
          />
        </Box>
      </Grid>

    </Box>

    <Box className="style" padding={{ vertical: "m" }} >
      <Grid
        className="custom-home__header" >
        <Box className="style" >
          <Button className="style"
            variant="primary"
            onClick={(e) => {
              e.preventDefault();
              const {
                REACT_APP_AUTH_URL,
                REACT_APP_CLIENT_ID,
              } = process.env;
              const authUrl = new URL(
                `${REACT_APP_AUTH_URL}/login` || ""
              );
              authUrl.searchParams.append("response_type", "token");
              const stateValue = uuidv4();
              storeAccessTokenState(stateValue);
              authUrl.searchParams.append("state", stateValue);
              authUrl.searchParams.append(
                "client_id",
                REACT_APP_CLIENT_ID || ""
              );
              authUrl.searchParams.append(
                "scope",
                "profile openid"
              );
              authUrl.searchParams.append(
                "redirect_uri",
                encodeURI(`${window.location.href}callback`)
              );
              window.location.href = authUrl.href;
            }}
          >
            Login
          </Button>

        </Box>

CSS :

.custom-home__header {
  background-color: $color-background-home-header;
}

.login{
padding-left: 620px;
}

How can I do this? login screen

please see the screen shot login screen, I need to align login button to right corner

Upvotes: 0

Views: 1486

Answers (1)

Taha Khan
Taha Khan

Reputation: 162

Update: Now that you've posted your CSS you can use position to move the button to the top right

.login{
  position: absolute;
  top:10px;
  right:10px;
}

Depending upon where you'd like to place you can set the position of the button i.e:

Place button on top right relative to the container position: absolute;

Or on top right fixed to the top and right relative to the window position: fixed;.

top: 0px; sets your element to the top

right: 0px; sets your element to the right

Setting it on top right of the page will keep it in a fixed position regardless of your page scroll.

.topRightOfContainer {
  position: absolute;
  top: 10px;
  right: 10px;
}

.FixedOntopRightOfPage {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1;
}

div {
  position: relative;
  height: 200px;
  border: 1px solid black;
  margin-top: 20px;
}

button {
  padding: 10px;
  border: none;
  background-color: #999900;
  color: white;
}
<button class="FixedOntopRightOfPage">Button Fixed on Top Right of Page</button>
<div>
  A Container
</div>
<div>
  Another Container
  <button class="topRightOfContainer">Button on Top Right of Container</button>
</div>

Upvotes: 2

Related Questions