CODEWITHSUNDEEP
javascripthtmljquerycss
Bob
Bob

Reputation: 169

How can i adjust the span height of neighboring spans according to highest span

How can i adjust every violet colored span to the ones i the same row so that whenever there is more containt in one <span>, those on the same row strech vertically also.

height = auto does work but it does not solve the issue of the span in same rows.

I went for the <span>, maybe i should've build it with <td> and <tr>

Here is the code snippet with HTML CSS and JS

const weekdays = ['Monday', 'Tuesday', 'Wednasday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

let planningsection = document.createElement("div");
planningsection.className = "planning";

let days = document.createElement("div");
days.className = "jours";

planningsection.appendChild(days);
$("#plannings_one")[0].appendChild(planningsection);

weekdays.map(e => {
  // Création d'un span
  let day = document.createElement("span");
  day.className = "jour_one";
  let dayText = document.createTextNode(e);

  // On insere dans chaque span un jour et le span dans la div jours
  day.appendChild(dayText);
  days.appendChild(day);
})

let section = document.createElement("section");
section.className = "callender_one";

planningsection.appendChild(section);

for (planning = 0; planning < 7; planning++) {

  let colonne = document.createElement("div");
  colonne.className = "horaire_one";
  colonne.id = ("col" + planning);

  for (i = 0; i < 26; i++) {
    let span = document.createElement("span");
    span.className = "dispo_one_rpv";
    // On rajoute un identifiant à la case en fonction de la colonne
    span.id = (colonne.id + i);
    // let plageText = document.createTextNode("Dispo / id: " + span.id);
    let plageText = document.createTextNode("");
    span.appendChild(plageText);
    colonne.appendChild(span);

    section.appendChild(colonne);
  }
}
let box = $("#col110")[0];
newText = document.createTextNode("Hello This is a text to show what it is happening right now");
box.appendChild(newText);
#main-section {
  display: flex;
  flex-direction: row;
}

.plage_rpv {
  border: solid 1px grey;
  width: 150px;
  line-height: 2.5;
  height: 50px;
  font-size: medium;
  text-align: center;
}

.horaire {
  border: solid 1px grey;
  width: 150px;
  line-height: 2.5;
  height: 44px;
  text-align: center;
}

#plannings_one {
  width: 100%;
  /* overflow-x: scroll; */
}

.dispo_one_rpv {
  /* line-height: 2.9; */
  height: 50px;
  font-size: 10px;
  border: solid 1px #bb12e8;
  text-align: center;
}

.callender_one {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.horaire_one {
  display: flex;
  flex-direction: column;
  width: 14.32%;
}

.jours {
  display: flex;
}

.jour_one {
  width: 14.32%;
  line-height: 2.5;
  text-align: center;
  border: solid 1px grey;
  height: 44px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <main class="planning-main_rpv">
    <section id="main-section">
      <div id="horaire">
        <div class="horaire">Horaires</div>
        <div class="plage_rpv">08:00 - 08:30</div>
        <div class="plage_rpv">08:30 - 09:00</div>
        <div class="plage_rpv">09:00 - 09:30</div>
        <div class="plage_rpv">09:30 - 10:00</div>
        <div class="plage_rpv">10:00 - 10:30</div>
        <div class="plage_rpv">10:30 - 11:00</div>
        <div class="plage_rpv">11:00 - 11:30</div>
        <div class="plage_rpv">11:30 - 12:00</div>
        <div class="plage_rpv">12:00 - 12:30</div>
        <div class="plage_rpv">12:30 - 13:00</div>
        <div class="plage_rpv">13:00 - 13:30</div>
        <div class="plage_rpv">13:30 - 14:00</div>
        <div class="plage_rpv">14:00 - 14:30</div>
        <div class="plage_rpv">14:30 - 15:00</div>
        <div class="plage_rpv">15:00 - 15:30</div>
        <div class="plage_rpv">15:30 - 16:00</div>
        <div class="plage_rpv">16:00 - 16:30</div>
        <div class="plage_rpv">16:30 - 17:00</div>
        <div class="plage_rpv">17:00 - 17:30</div>
        <div class="plage_rpv">17:30 - 18:00</div>
        <div class="plage_rpv">18:00 - 18:30</div>
        <div class="plage_rpv">18:30 - 19:00</div>
        <div class="plage_rpv">19:00 - 19:30</div>
        <div class="plage_rpv">19:30 - 20:00</div>
        <div class="plage_rpv">20:00 - 20:30</div>
        <div class="plage_rpv">20:30 - 21:00</div>
      </div>
      <div id=plannings_one>

      </div>
    </section>
  </main>
</body>

</html>

Upvotes: 3

Views: 91

Answers (1)

Pranav Rustagi
Pranav Rustagi

Reputation: 2721

Explanation :

For CSS, just replace height property with min-height for the same value in .dispo_one_rpv.

For JavaScript, notice that I have added two functions calc_max() and set_heights(). Whenever you append textNode inside the box element, update the ind variable like :

ind = $(box).index() + 1;

and call function calc_max(). It will automatically calculate the element with maximum height, and set the height of all the elements in the entire row to the calculated value.

const weekdays = ['Monday', 'Tuesday', 'Wednasday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

let planningsection = document.createElement("div");
planningsection.className = "planning";

let days = document.createElement("div");
days.className = "jours";

planningsection.appendChild(days);
$("#plannings_one")[0].appendChild(planningsection);

weekdays.map(e => {
  let day = document.createElement("span");
  day.className = "jour_one";
  let dayText = document.createTextNode(e);

  day.appendChild(dayText);
  days.appendChild(day);
})

let section = document.createElement("section");
section.className = "callender_one";

planningsection.appendChild(section);

for (planning = 0; planning < 7; planning++) {

  let colonne = document.createElement("div");
  colonne.className = "horaire_one";
  colonne.id = ("col" + planning);

  for (i = 0; i < 26; i++) {
    let span = document.createElement("span");
    span.className = "dispo_one_rpv";
    span.id = (colonne.id + i);
    let plageText = document.createTextNode("");
    span.appendChild(plageText);
    colonne.appendChild(span);

    section.appendChild(colonne);
  }
}
let box = $("#col110")[0];
newText = document.createTextNode("Hello This is a text to show what it is happening right now");
box.appendChild(newText);

var ind = $(box).index() + 1;

function calc_max() {
  let max_height = $('#horaire div:eq(' + ind + ')').height();
  $('.horaire_one span:nth-child(' + ind + ')').each(function() {
    if ($(this).height() > max_height) {
      max_height = $(this).height();
    }
  });
  
  set_heights(max_height);
}

calc_max();

function set_heights(height){
  $('#horaire div:eq(' + ind + ')').height(height);
  $('.horaire_one span:nth-child(' + ind + ')').height(height);
}
#main-section {
  display: flex;
  flex-direction: row;
}

.plage_rpv {
  border: solid 1px grey;
  width: 150px;
  line-height: 2.5;
  height: 50px;
  font-size: medium;
  text-align: center;
}

.horaire {
  border: solid 1px grey;
  width: 150px;
  line-height: 2.5;
  height: 44px;
  text-align: center;
}

#plannings_one {
  width: 100%;
  /* overflow-x: scroll; */
}

.dispo_one_rpv {
  /* line-height: 2.9; */
  min-height: 50px;
  font-size: 10px;
  border: solid 1px #bb12e8;
  text-align: center;
}

.callender_one {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.horaire_one {
  display: flex;
  flex-direction: column;
  width: 14.32%;
}

.jours {
  display: flex;
}

.jour_one {
  width: 14.32%;
  line-height: 2.5;
  text-align: center;
  border: solid 1px grey;
  height: 44px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <main class="planning-main_rpv">
    <section id="main-section">
      <div id="horaire">
        <div class="horaire">Horaires</div>
        <div class="plage_rpv">08:00 - 08:30</div>
        <div class="plage_rpv">08:30 - 09:00</div>
        <div class="plage_rpv">09:00 - 09:30</div>
        <div class="plage_rpv">09:30 - 10:00</div>
        <div class="plage_rpv">10:00 - 10:30</div>
        <div class="plage_rpv">10:30 - 11:00</div>
        <div class="plage_rpv">11:00 - 11:30</div>
        <div class="plage_rpv">11:30 - 12:00</div>
        <div class="plage_rpv">12:00 - 12:30</div>
        <div class="plage_rpv">12:30 - 13:00</div>
        <div class="plage_rpv">13:00 - 13:30</div>
        <div class="plage_rpv">13:30 - 14:00</div>
        <div class="plage_rpv">14:00 - 14:30</div>
        <div class="plage_rpv">14:30 - 15:00</div>
        <div class="plage_rpv">15:00 - 15:30</div>
        <div class="plage_rpv">15:30 - 16:00</div>
        <div class="plage_rpv">16:00 - 16:30</div>
        <div class="plage_rpv">16:30 - 17:00</div>
        <div class="plage_rpv">17:00 - 17:30</div>
        <div class="plage_rpv">17:30 - 18:00</div>
        <div class="plage_rpv">18:00 - 18:30</div>
        <div class="plage_rpv">18:30 - 19:00</div>
        <div class="plage_rpv">19:00 - 19:30</div>
        <div class="plage_rpv">19:30 - 20:00</div>
        <div class="plage_rpv">20:00 - 20:30</div>
        <div class="plage_rpv">20:30 - 21:00</div>
      </div>
      <div id=plannings_one>

      </div>
    </section>
  </main>
</body>

</html>

Upvotes: 1

Related Questions