Question 39238 in Ubuntu Question posted in
The official Ubuntu documentation can be found here.

When I hide an element and show another one, other divs move. How to stop this? – Ubuntu

I have made a page with a div that gets replaced by a different div when a button is clicked. Both of them have similar properties but when I click the button some other elements move. For some reason, when the div that replaces the first div’s height is smaller than the page height, no other divs are moved, but when the div height is larger than the page, it does move other elements

Nothing moves when the middle section fits on the page:
I will show you what I mean here:Nothing moves when the middle section fits on the page

When the middle section doesn’t fit on the page some elements are moved left:
When the middle section doesn't fit on the page some elements are moved left

Please open in full screen to see:

function showResults() {
  document.getElementById("inputSection").style.display = "none";
  document.getElementById('hideButton').style.display = "none";
  document.getElementById("Calories").style.display = "block";
  document.getElementById("Protein").style.display = "block";
  document.getElementById("Carbs").style.display = "block";
}
@import "calorie-calculator.css";
.banner {
  /* Banner Styles */
  width: 100%;
  color: black;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 24px;
  float: left;
  text-decoration: none;
  cursor: pointer;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.noselect {
  /* No Highlighting */
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

.banner-head-1 {
  /* Home Header */
  float: left;
  overflow-wrap: normal;
  margin-left: 200px;
  margin-right: 200px;
  text-decoration: none;
  color: black;
  display: block;
}

.banner-head-2 {
  /* Food Header */
  float: left;
  overflow-wrap: normal;
  margin-left: 55px;
  text-decoration: none;
  color: black;
  display: block;
}

.banner-head-3 {
  /* Exercise Header */
  float: left;
  overflow-wrap: normal;
  margin-left: 55px;
  text-decoration: none;
  color: black;
  display: block;
}

.banner-head-4 {
  /* Calculators Header */
  float: left;
  overflow-wrap: normal;
  margin-left: 55px;
  text-decoration: none;
  color: black;
  display: block;
}

.banner-head-5 {
  /* Calculators Header */
  float: left;
  overflow-wrap: normal;
  margin-left: 55px;
  text-decoration: none;
  color: black;
  display: block;
}

.dropdown {
  /* Dropdown Content */
  cursor: pointer;
  color: black;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 24px;
  display: none;
  position: absolute;
  width: 100%;
  float: left;
  text-decoration: none;
  padding-right: 80px;
  margin: 0px;
  border: 0px;
}

.noDecoration {
  /* No Text Decoration */
  text-decoration: none;
  color: black;
}

.dropdown-content {
  display: none;
  padding-left: 20px;
}

.banner-logo {
  height: 40px;
  border: 10px solid white;
  border-radius: 12px;
  margin-top: 5px;
}

.banner-logo-responsive {
  margin-left: 150px;
  height: 43px;
  margin-top: 5px;
  margin-bottom: 5px;
  border: 10px solid white;
  border-radius: 12px;
  margin-left: 350px;
}

.mobile-logo {
  height: 80px;
  padding: none;
  border: 10px white solid;
  border-radius: 8px;
}

.main-section {
  padding-top: 79px;
  padding-left: 500px;
  width: 903px;
  font-family: 'Anton', sans-serif;
  display: block;
  object-fit: cover;
}

.background {
  float: left;
  position: fixed;
  top: 0px;
  left: 0px;
}

.wholeArea {
  position: absolute;
  height: auto;
  top: 0;
  right: 0;
}

.title {
  font-size: 60px;
  color: #132c54;
  padding-bottom: 10px;
}

.description {
  font-size: 25px;
  color: #2569c8;
  line-height: 29px;
  margin-bottom: 8px;
}

.inputText {
  font-size: 30px;
  color: #132c54;
  background-color: white;
}

.inputField {
  font-size: 30px;
  color: #132c54;
  border-color: #132c54;
  border-width: 4px;
  border-style: solid;
  outline-color: #132c54;
  border-radius: 6px;
}

.noDecoration {
  /* No Text Decoration */
  text-decoration: none;
  color: #132c54;
}

.selectInput {
  width: 413px;
  color: #132c54;
  outline-color: #132c54;
  outline-width: 0px;
  border-color: #132c54;
  border-width: 4px;
  border-style: solid;
  border-radius: 6px;
}

.textInput {
  width: 400px;
  display: inline;
  color: #132c54;
  outline-color: #132c54;
  outline-width: 0px;
  border-color: #132c54;
  border-width: 4px;
  border-style: solid;
  border-radius: 6px;
  padding-left: 3px;
}

.selectOption {
  font-size: 30px;
  color: #132c54;
}

.buttonStyle {
  font-size: 35px;
  color: #132c54;
  background-color: white;
  outline-color: #132c54;
  outline-width: 0px;
  border-color: #132c54;
  border-width: 4px;
  border-style: solid;
  border-radius: 6px;
}

.buttonToggleStyle {
  font-size: 25px;
  color: #132c54;
  background-color: white;
  outline-color: #132c54;
  outline-width: 0px;
  border-color: #132c54;
  border-width: 4px;
  border-style: solid;
  border-radius: 6px;
  margin-right: 20px;
}

.radioStyle {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: top;
}

.leftColumnBox {
  position: absolute;
  margin-right: 100px;
  width: auto;
  height: auto;
}

.leftColumnBox2 {
  position: absolute;
  margin-top: 321px;
  margin-right: 100px;
  width: auto;
  height: auto;
}

.rightColumnBox {
  position: absolute;
  margin-right: 100px;
  width: auto;
  height: auto;
}

.rightColumnBox2 {
  position: absolute;
  margin-top: 321px;
  margin-right: 100px;
  width: auto;
  height: auto;
}

.leftColumn {
  width: auto;
  height: auto;
  margin-top: 81px;
  margin-left: 100px;
  margin-right: 100px;
  float: left;
  position: fixed;
  display: inline;
  top: 0px;
  left: 0px;
}

.rightColumn {
  width: auto;
  height: auto;
  margin-top: 81px;
  margin-left: 100px;
  margin-right: 400px;
  float: left;
  position: fixed;
  display: inline;
  top: 0px;
  right: 0px;
}

.advertImage {
  border: 10px white solid;
  border-radius: 6px;
  width: 300px;
  height: auto;
}

.resultsSection {
  display: none;
  position: inherit;
}

.radioArea {
  height: 45px;
  width: 700px;
  display: block;
}

.inputArea {
  height: 50px;
  width: 700px;
  display: block;
}

.labelText {
  width: 150px;
  display: inline-block;
}

.resultsText {
  line-height: 38px;
}

.resultsHeaderText {
  line-height: 40px;
  padding: 0px;
  border: 0px;
  margin: 0px;
  margin-bottom: 10px;
}

.hideInput {
  display: block;
}

.mainBorder {
  border: 20px solid white;
  border-radius: 12px;
  background-color: white;
}

.titleBorder {
  border: 20px solid white;
  border-bottom: none;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background-color: white;
}

.descBorder {
  border: 20px solid white;
  border-top: none;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  background-color: white;
}

.tabContent {
  display: none;
  margin-bottom: 8px;
}

.tabSwitch {
  margin-bottom: 8px;
}

@media screen and (min-width: 1920px) {
  /* Responsive */
  .main-section {
    padding-top: 79px;
    padding-left: 27%;
    padding-right: 0px;
    width: 47%;
  }
}

@media screen and (max-width: 1920px) {
  .main-section {
    padding-top: 79px;
    padding-left: 27%;
    padding-right: 0px;
    width: 47%;
  }
}

@media screen and (min-width: 1920px) {
  /* Responsive */
  .banner-head-1 {
    /* Home Header */
    margin-left: 170px;
    margin-right: 200px;
  }
  .banner-head-2 {
    /* Food Header */
    margin-left: 55px;
  }
  .banner-head-3 {
    /* Exercise Header */
    margin-left: 55px;
  }
  .banner-head-4 {
    /* Calculators Header */
    margin-left: 55px;
  }
  .banner-head-5 {
    /* Calculators Header */
    margin-left: 55px;
  }
}

@media screen and (max-width: 1920px) {
  .banner-head-1 {
    /* Home Header */
    margin-left: 170px;
    margin-right: 200px;
  }
  .banner-head-2 {
    /* Food Header */
    margin-left: 55px;
  }
  .banner-head-3 {
    /* Exercise Header */
    margin-left: 55px;
  }
  .banner-head-4 {
    /* Calculators Header */
    margin-left: 55px;
  }
  .banner-head-5 {
    /* Calculators Header */
    margin-left: 55px;
  }
}
<!DOCTYPE html>
<html>

<head>
  <script src="./script/banner.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./style/banner.css">
  <link rel="stylesheet" href="./style/calorie-calculator.css">
  <link rel="stylesheet" href="./style/css-reset.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
</head>
<div id="background" class="background"></div>
<span class="wholeArea">
<table class="banner noselect"> <!-- Banner -->
      <tr>
          <th class="banner-head-1"><a href="./index.html" class="noDecoration banner-logo">img</a></th>
          <th class="banner-head-2"><a href="./food-tracker.html" class="noDecoration banner-logo">img</a></th>
          <th class="banner-head-3"><a href="./articles.html" class="noDecoration banner-logo">img</a></th>
          <th class="banner-head-4"><a href="./calculators.html" class="noDecoration banner-logo">img</a></th>
          <th class="banner-head-5"><a href="./exercise-tracker.html" class="noDecoration banner-logo"></a>img</th>
      </tr>
</table>
<div class="main-section noDecoration">
<div>    <!-- Title -->
  <p class="title titleBorder">CALORIE CALCULATOR</p>    <!-- Title -->
  <p class="description descBorder">This calculator will estimate how many calories your body needs to consume based on your weight, height and age and other factors. This is also a guide to maintain, gain or lose weight</p><!-- Description -->
</div>
<div class="mainBorder calculatorSection" id="inputSection">    <!-- Calculator -->
    <div class="radioArea" style="padding-bottom: 5px;" id="input1">
      <label class="inputText noDecoration labelText">Units</label>
      <a href="./calorie-calculator.html">
         <input type="radio" class="inputField radioStyle" onclick="window.location='./calorie-calculator.html'">
         <label class="inputText noDecoration">Metric</label>
      </a>
     <a href="./calorie-calculator-imperial.html">
          <input type="radio" class="inputField radioStyle" onclick="window.location='./calorie-calculator-imperial.html'">
          <label class="inputText noDecoration">Imperial</label><br>
      </a>
    </div>
    <div class="radioArea" id="input2">
      <label for="gender" class="inputText labelText">Gender</label>
      <input type="radio" id="Male" name="gender" value="5" class="inputField radioStyle">
      <label for="Male" class="inputText">Male</label>
      <input type="radio" id="Female" name="gender" value="-165" class="inputField radioStyle">
      <label for="Female" class="inputText">Female</label><br>
    </div>
    <div class="inputArea" id="input3">
      <label for="Input1" class="inputText labelText">Age</label>
      <input type="number" id="Input1" class="inputField textInput" placeholder="12-80"><br>
    </div>
    <div class="inputArea" id="input4">
      <label for="Input2" class="inputText labelText">Height</label>
      <input type="number" id="Input2" class="inputField textInput" placeholder="100cm - 200cm"><br>
    </div>
    <div class="inputArea" id="input5">
     <label for="Input3"class="inputText labelText">Weight</label>
     <input type="number" id="Input3" class="inputField textInput" placeholder="30kg - 120kg"><br>
    </div>
    <div class="inputArea" id="input6">
      <label for="exerciseInput"class="inputText labelText">Exercise</label>
      <select id="exerciseInput" class="inputText selectInput">
        <option class="inputText selectOption">Exercise</option>
        <option value="noExercise" id="noExercise" class=" selectOption">Inactive</option>
        <option value="lightExercise" id="lightExercise" class=" selectOption">Light Activity</option>
        <option value="moderateExercise" id="moderateExercise" class=" selectOption">Moderate Activity</option>
        <option value="activeExercise" id="activeExercise" class=" selectOption">Active</option>
        <option value="veryActiveExercise" id="veryActiveExercise" class=" selectOption">Very Active</option>
        <option value="extraActiveExercise" id="extraActiveExercise" class=" selectOption">Extra Active</option>
     </select>
    </div>
    <button class="buttonStyle" onclick="showResults();" id="hideButton">ADD</button>
</div>

<div id="Calories" class="tabContent mainBorder">
  <div class="resultsHeaderText">Calories</div>
  <div class="resultsText">Extreme Weight Gain(1kg/week) - <span id="extremeGain1" class=""></span></div>
<div class="resultsText">Weight Gain(0.5kg/week) - <span id="averageGain1" class=""></span></div>
<div class="resultsText">Mild Weight Gain(0.25kg/week) - <span id="mildGain1" class=""></span></div>
<div class="resultsText">Maintain Calories - <span id="maintain1" class=""></span></div>
<div class="resultsText">Mild Weight Loss(0.25kg/week) - <span id="mildLoss1" class=""></span></div>
<div class="resultsText">Weight Loss(0.5kg/week) - <span id="averageLoss1" class=""></span></div>
<div class="resultsText">Extreme Weight Loss(1kg/week) - <span id="extremeLoss1" class=""></span></div>
</div>

<div id="Protein" class="tabContent mainBorder">
  <div class="resultsHeaderText">Protein</div>
  <div class="resultsText">Extreme Weight Gain(1kg/week) - <span id="extremeGain2" class=""></span></div>
  <div class="resultsText">Weight Gain(0.5kg/week) - <span id="averageGain2" class=""></span></div>
  <div class="resultsText">Mild Weight Gain(0.25kg/week) - <span id="mildGain2" class=""></span></div>
  <div class="resultsText">Maintain Calories - <span id="maintain2" class=""></span></div>
  <div class="resultsText">Mild Weight Loss(0.25kg/week) - <span id="mildLoss2" class=""></span></div>
  <div class="resultsText">Weight Loss(0.5kg/week) - <span id="averageLoss2" class=""></span></div>
  <div class="resultsText">Extreme Weight Loss(1kg/week) - <span id="extremeLoss2" class=""></span></div>
</div>

<div id="Carbs" class="tabContent mainBorder">
  <div class="resultsHeaderText">Carbs</div>
  <div class="resultsText">Extreme Weight Gain(1kg/week) - <span id="extremeGain3" class=""></span></div>
  <div class="resultsText">Weight Gain(0.5kg/week) - <span id="averageGain3" class=""></span></div>
  <div class="resultsText">Mild Weight Gain(0.25kg/week) - <span id="mildGain3" class=""></span></div>
  <div class="resultsText">Maintain Calories - <span id="maintain3" class=""></span></div>
  <div class="resultsText">Mild Weight Loss(0.25kg/week) - <span id="mildLoss3" class=""></span></div>
  <div class="resultsText">Weight Loss(0.5kg/week) - <span id="averageLoss3" class=""></span></div>
  <div class="resultsText">Extreme Weight Loss(1kg/week) - <span id="extremeLoss3" class=""></span></div>
</div>

</div>
<div class="leftColumn">
  <div class="leftColumnBox"><img src="./img/advert-1.png" class="advertImage"></div>
  <div class="leftColumnBox2"><img src="./img/advert-2.png" class="advertImage"></div>
</div>
<div class="rightColumn">
  <div class="rightColumnBox"><img src="./img/advert-3.png" class="advertImage"></div>
  <div class="rightColumnBox2"><img src="./img/advert-4.png" class="advertImage"></div>
</div>
</span>

</html>
Tags:

2

Answers


  1. 0

    Instead of visibility: hidden, use display: none.

    Instead of visibility: visible, use display: block.

    Login or Signup to reply.
  2. 0

    Use visibility :

    visibility: visible

    visibility: hidden

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search