Skip to content
Advertisement

How do I keep this text content centered in a flexbox container? Because when text is added with DOM manipulation it moves off the screen

I have a project in CS class where we have to clone an app that we use on a daily basis. I chose cashapp. I have a flexbox container holding the balance value, and I want the balance text to be responsive and shit itself to always be centered in the middle of the screen. I’ve achieved this with justify-content: center, however when I add text it doesn’t responsively shift itself to stay centered. Also if you run the snippet you might want to resize it to 720 x 1520 b/c that is the resolution of the android Im making this for. Any suggestions? Dont flame me if the code issn’t clean this is my first highschool CS class

document.getElementById('backspace').addEventListener('click', backspace)
let fired_button
let moneyval = document.getElementById('money')
$("button").click(function() {
  fired_button = $(this).val();
  let emptyArray = []
  emptyArray.push(moneyval.textContent)
  console.log(emptyArray)
  for (var i = 0; i < emptyArray.length; i++) {
    if (emptyArray[0] == "$0") {
      moneyval.textContent = "$" + fired_button
    } else {
      moneyval.textContent += fired_button
    }

  }

});


function backspace() {
  console.log(moneyval.textContent)
  let string = moneyval.textContent
  string = string.substring(0, string.length - 1);
  moneyval.textContent = string


}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {
  background-color: blue;
  font-family: 'Inter';
  width: 720px;
  height: 1520px;
}

#camera,
#search,
#profile {
  background-color: blue;
  color: black;
  border: 0;
}

.camera {
  margin-left: 15px;
}

.search {
  margin-left: 8px;
}

.head-section {
  position: absolute;
  top: 60px;
}

.head-right {
  position: absolute;
  right: 40px;
  top: 60px;
}

.money {
  color: rgba(255, 255, 255, 0.87);
  font-size: 150px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  line-height: 182px;
  position: absolute;
  width: 198px;
  height: 182px;
  margin: 0;
}

.usd {
  position: absolute;
  width: 146.4px;
  height: 61px;
  background: blue;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.02);
  border-radius: 43px;
  color: white;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 25px;
  line-height: 30px;
  border-style: none;
}

.numberpad {
  position: absolute;
  width: 850px;
  height: 540px;
  left: -45px;
  top: 730px;
}

.row1 {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 35px;
}

.row2 {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 35px;
}

.row3 {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 35px;
}

.row4 {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 35px;
}

.row1,
.row2,
.row3,
.row4 {
  margin-top: 80px;
}

button {
  border-style: none;
  background-color: blue;
  color: white;
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
}

.subcta {
  border-style: solid;
  position: absolute;
  top: 1300px;
}

.sub-cta {
  display: flex;
  position: absolute;
  width: 750px;
  height: 124px;
  left: -2px;
  top: 1260px;
  justify-content: space-evenly;
}

.sub-button {
  border-style: solid;
  border-radius: 1.3em;
  padding: .3em;
  background-color: black;
  border-color: #0CC337;
  width: 293px;
  height: 88px;
}

.balance-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  text-align: center;
  position: absolute;
  width: 720px;
  height: 219px;
  left: -20px;
  top: 323px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <div class="head-section">
    <button id="camera"> <a href="#"><img src="/images/image 1.png" alt=""></a></button>
    <button id="search"> <a href="#"><img src="/images/image 2.png" alt=""></a></button>
  </div>

  <div class="head-right">
    <button id="profile"><img src="/images/image 3.png" alt=""></button>
  </div>
  <div class="balance-container">
    <h1 id="money" class="money">$0</h1>
  </div>

  <div>

  </div>

  <section class="numberpad">
    <div class="row1">
      <button class="numpad" name="1" id="1" value="1">1</button>
      <button name="2" id="2" value="2">2</button>
      <button name="3" id="3" value="3">3</button>
    </div>

    <div class="row2">
      <button name="4" id="4" value="4">4</button>
      <button name="5" id="5" value="5">5</button>
      <button name="6" id="6" value="6">6</button>
    </div>

    <div class="row3">
      <button name="7" id="7" value="7">7</button>
      <button name="8" id="8" value="8">8</button>
      <button name="9" id="9" value="9">9</button>
    </div>

    <div class="row4">
      <button name="." id="." value=".">.</button>
      <button name="0" id="0" value="0">0</button>
      <button id="backspace"><</button>
    </div>
  </section>

  <section class="sub-cta">
    <div>
      <button class="sub-button">Request</button>
    </div>

    <div>
      <button id="pay" class="sub-button">Pay</button>
    </div>


  </section>

  <script src="/main.js"></script>
</body>

</html>

Advertisement

Answer

Flexbox doesn’t organize the absolute positioned items. As a best practise, you should avoid absolute positioning in order to achieve responsive layout in most cases.

As I understand from your question, I have achieved what you want to do like that:

1. I removed all the absolute positioning
2. I removed explicit width styles of the body, .numberpad, .subcta, .sub-cta and .numberpad
3. Wrapped all these elements with <main> tag (except body)
4. Styled <main> with display: flex and align-items: center

Check it here:

document.getElementById('backspace').addEventListener('click', backspace)
let fired_button
let moneyval = document.getElementById('money')
$("button").click(function() {
  fired_button = $(this).val();
  let emptyArray = []
  emptyArray.push(moneyval.textContent)
  console.log(emptyArray)
  for (var i = 0; i < emptyArray.length; i++) {
    if (emptyArray[0] == "$0") {
      moneyval.textContent = "$" + fired_button
    } else {
      moneyval.textContent += fired_button
    }

  }

});


function backspace() {
  console.log(moneyval.textContent)
  let string = moneyval.textContent
  string = string.substring(0, string.length - 1);
  moneyval.textContent = string


}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {
  background-color: blue;
  font-family: 'Inter';
  height: 1520px;
}

#camera,
#search,
#profile {
  background-color: blue;
  color: black;
  border: 0;
}

.camera {
  margin-left: 15px;
}

.search {
  margin-left: 8px;
}

.head-section {
  position: absolute;
  top: 60px;
}

.head-right {
  position: absolute;
  right: 40px;
  top: 60px;
}

.money {
  color: rgba(255, 255, 255, 0.87);
  font-size: 150px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  line-height: 182px;
  position: absolute;
  width: 198px;
  height: 182px;
  margin: 0;
}

.usd {
  position: absolute;
  width: 146.4px;
  height: 61px;
  background: blue;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.02);
  border-radius: 43px;
  color: white;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 25px;
  line-height: 30px;
  border-style: none;
}

.numberpad {
  position: relative;
  width: 850px;
  height: 540px;
}

.row1 {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 35px;
}

.row2 {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 35px;
}

.row3 {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 35px;
}

.row4 {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 35px;
}

.row1,
.row2,
.row3,
.row4 {
  margin-top: 80px;
}

button {
  border-style: none;
  background-color: blue;
  color: white;
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
}

.subcta {
  border-style: solid;
  position: relative;
}

.sub-cta {
  display: flex;
  position: relative;
  width: 750px;
  height: 124px;

  justify-content: space-evenly;
}

.sub-button {
  border-style: solid;
  border-radius: 1.3em;
  padding: .3em;
  background-color: black;
  border-color: #0CC337;
  width: 293px;
  height: 88px;
}

.balance-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  text-align: center;
  position: relative;
  width: 720px;
  height: 219px;
}

main {
    width:100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <div class="head-section">
    <button id="camera"> <a href="#"><img src="/images/image 1.png" alt=""></a></button>
    <button id="search"> <a href="#"><img src="/images/image 2.png" alt=""></a></button>
  </div>

  <div class="head-right">
    <button id="profile"><img src="/images/image 3.png" alt=""></button>
  </div>
  <main>
      <div class="balance-container">
        <h1 id="money" class="money">$0</h1>
      </div>
      <div>
      </div>
      <section class="numberpad">
        <div class="row1">
          <button class="numpad" name="1" id="1" value="1">1</button>
          <button name="2" id="2" value="2">2</button>
          <button name="3" id="3" value="3">3</button>
        </div>
        <div class="row2">
          <button name="4" id="4" value="4">4</button>
          <button name="5" id="5" value="5">5</button>
          <button name="6" id="6" value="6">6</button>
        </div>
        <div class="row3">
          <button name="7" id="7" value="7">7</button>
          <button name="8" id="8" value="8">8</button>
          <button name="9" id="9" value="9">9</button>
        </div>
        <div class="row4">
          <button name="." id="." value=".">.</button>
          <button name="0" id="0" value="0">0</button>
          <button id="backspace"><</button>
        </div>
      </section>
      <section class="sub-cta">
        <div>
          <button class="sub-button">Request</button>
        </div>
        <div>
          <button id="pay" class="sub-button">Pay</button>
        </div>
      </section>
  </main>

  <script src="/main.js"></script>
</body>

</html>
User contributions licensed under: CC BY-SA
2 People found this is helpful
Advertisement