Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

134
Visualizações
how to divide the dynamic array values so maintain 100% width result for css

Here is the array [2, 44, 7, 38]. It's the string length of my table cells, so the table width is 100%. Now table will have 4 columns as the same as the length of the array. Now I want to convert this array into width percentage as more big values will get more place in the table. I need the js method to convert an array that has dynamic length and inside it, dynamic values but it should give % to more which value is big.Explain by image

almost 4 years ago · Santiago Trujillo
2 Respostas
Responde à pergunta

0

If I understand the question correctly, the aim is to produce an array of widths in units appropriate to a UI (like px) that are proportional to the input string lengths.

The way to do this is to normalize the string lengths -- divide each by the sum of the lengths -- then apply those proportions to the new units.

const array = [2, 44, 7, 38];
const sum = array.reduce((acc, i) => acc+i, 0);
const normalized = array.map(i => i/sum);

// applied to, say, 600 px
const totalWidth = 600;
const widths = normalized.map(n => n*totalWidth);
console.log(widths)

In functional form:

// answer an array of values proportional to lengths summing to totalWidth
function widthsFromLengths(lengths, totalWidth) {
  const sum = lengths.reduce((acc, i) => acc+i, 0);
  const normalized = lengths.map(i => i/sum);
  return normalized.map(n => n*totalWidth);
}

Note that if the goal is to proportionally fit text rendered in a variable width font, the input strings can/should first be converted to widths via an idea like the one given here.

almost 4 years ago · Santiago Trujillo Relatório

0

Let us take a look at this snippet

function calculateWidth(arr, container) {
  let nodes = container.children;
  let sum = arr.reduce(function(a, b) {
    return a + b;
  }, 0);
  if (nodes.length > arr.length) {
    alert("Not enough elements in the array");
    return;
  } else {
    for (let i = 0; i < nodes.length; i++) {
      nodes[i].style.width = 100 * arr[i] / sum + "%";
    }
  }
}

const arr = [2, 44, 7, 38];
let container = document.getElementsByClassName("container")[0];
calculateWidth(arr, container);
.container {
  width: 100%;
  height: 20px;
  display: flex;
}

.container * {
  height: 100%;
  outline: 2px ridge royalblue;
}
<div class="container">
  <p>he</p>
  <p>i love your help please help kindly</p>
  <p>okokokokokokok</p>
  <p>i love your help please help kindly</p>
</div>

The magic happens in the function calculateWidth.

It will receive an array as arr and a node element that elements inside it would be width-ifying :) as "container".

The nodes variable would have the elements, that are the children of arr. & sum` would be, well, sum of the numbers in the arr.

if the size of the arr is less than nodes', then the operation would be cancelled otherwise, in a for loop, the width of the elements in nodes would be calculated and assigned.

almost 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda