Trying to shift my React button based on numerical values (##px) doesn't work?

Question

Trying to shift my React button based on numerical values (##px) doesn't work?

102 views Asked by Yajax At 21 November 2024 at 06:56

So I'm trying to display my button more to the right. However, no matter what I try, I can't get it to move it beyond only a few positions. To generalize the million things I've been attempting and the outputs, the button displayed is always either:

when I have the opening tag, <div className="container">, the button is pretty far on left side
Or if I try as my opening tag as just <div> or <div className="btn-top-right">, the button is completely on the left side
The button here is positioned on the right, but a little too far for me. (https://i.stack.imgur.com/7dvJb.png)

Here's my current javascript/html + CSS:

<div className="container">
  <button className="btn btn-primary btn-top-right float-end">CPU</button>
</div>

where I also tried <div> and <div className="btn-top-right> for the opening tag in the above^ code snippet.

.btn-top-right {
    position: absolute;
    top: 20px;
    right: 50px;
  }

.btn-top-right {
  position: absolute;
  top: 20px;
  right: 50px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

<div class="container">
  <button class="btn btn-primary btn-top-right float-end">CPU</button>
</div>

As you can see above, right is set to 50px, but no matter what value I try, it won't move. Any thoughts?

Original Q&A

There are 3 answers

Nimish G j On 11 July 2023 at 17:09

Use position:relative; in the parent element for the absolute property to work you need to have the parent element in relative position or alternatively you can use fixed position on the button

try this:

<div className="container">
    <button className="btn btn-primary btn-top-right float-end">CPU</button>
</div>

.btn-top-right {
    position: absolute;
    top: 20px;
    right: 50px;
  }

.container{
   position:relative;
}

Md. Rakibul Islam On 11 July 2023 at 17:25

It is working perfectly. Please put any value and check. You can move it anywhere you want.

.btn-top-right {
    position: absolute;
    top: 20px;
    left: 50px;
    /* put any value and it will move wherever you want */
}

  <!-- Bootstrap CSS v5.2.1 -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
 
    
  <div class="container">
      <button class="btn btn-primary btn-top-right float-end">CPU</button>
  </div>

**Mark Schultheiss** · Accepted Answer · 2023-07-11 17:55:31

You might have to account for built-in bootstrap styles on the container.

Here are two examples of two different container types and how I used the padding on the container-fluid for example to put the padding to 0 using ps-0 then put a margin on the button to move it from the left. Might need some specifics but as the first example shows be careful of the position since it might get outside of the container which may not be the desired behavior.

.custom-button {
  border: solid pink 1px;
  box-sizing: border-box;
  background-color: #00FF0011;
}

.custom-button .btn-custom {
  position: relative;
  left: 50px;
  top: 20px;
  border: solid blue 2px;
}

.custom-button-two {
  border: solid orange 1px;
  box-sizing: border-box;
  background-color: #0000FF11;
}

.custom-button-two .btn-custom {
  margin-left: 20px;
  margin-top: 20px;
  border: solid blue 2px;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

</head>

<body>
  <div class="container custom-button">
    <button class="btn btn-primary btn-custom">CPU</button>
  </div>
  <div class="mt-5 ps-0 container-fluid custom-button-two">
    <button class="btn btn-secondary btn-custom">CPU</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
</body>

</html>

TechQA.

Trying to shift my React button based on numerical values (##px) doesn't work?

There are 3 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in REACTJS

Related Questions in BOOTSTRAP-5

Related Questions in REACT-BUTTON

Popular Questions

Popular Tags

Trending Questions