JavaScript failing to adjust span width as intended

Question

JavaScript failing to adjust span width as intended

In an attempt to adjust the width of a span dynamically based on its content, I am facing a challenge. My application consists of multiple spans in rows and users can modify the content of these spans. To ensure uniformity in span width after content changes, I aim to set each span's width equal to the maximum width among all spans.

For instance:

spanWidths = [ '50px', '34px', '56px', '87px' ]

The desired conversion of these spans would be:

[ '87px', '87px', '87px', '87px' ]

https://i.sstatic.net/hXLKj.png

When inspecting the box model for the span:

https://i.sstatic.net/twno1.png

Despite setting the width to 87px on the span, inspection shows a strange value like 57.98px due to border, padding, and content considerations.

The CSS style for the span is as follows (with consistent use of box-sizing: border-box):

.annotation-speaker {
    display: inline-block;
    font-size: 14px;
    line-height: 25px;
    background-color: rgb(224, 239, 241, 0.5);
    height: 25px;
    padding: 0px 5px 6px 5px;
    margin-top: 5px;
    border-radius: 4px;
    font-weight: 500;
    letter-spacing: 0.7px;
    overflow: hidden;
    text-align: center;
}

I am uncertain about how to calculate the spanWidths array with updated widths after modifying span content.

This is my current approach:

const css = getComputedStyle($speakerBox); // $speakerBox refers to the span
const r = $speakerBox.getBoundingClientRect();

const w = $speakerBox.scrollWidth + parseInt(css.paddingLeft) + parseInt(css.paddingRight);

maxSpeakerTagWidth = Math.max(maxSpeakerTagWidth, w);

Both r.width and $speakerBox.scrollWidth provide different values, leaving me confused about which one to prioritize.

To set all spans to the same width as maxSpeakerTagWidth:

$speakerBox.style.width = maxSpeakerTagWidth + 'px';

However, this solution doesn't seem to work as expected!

javascript css

Answer 1

Answer №1

After tinkering around on JSFiddle (:P), I managed to come up with a solution that works perfectly there, but unfortunately, it's not behaving the same way in my project.

Check out my JSFiddle here

<html>
  <head>
    <style>
      .spanBox {
        font-size: 14px;
        line-height: 25px;
        background-color: rgb(224, 239, 241, 0.5);
        height: 25px;
        padding: 0px 5px;
        margin-top: 5px;
        border-radius: 4px;
        font-weight: 500;
        letter-spacing: 0.7px;
        text-align: center;
        display: inline-block;
        margin-left: 1em;
        box-sizing: content-box;
      }

      .input {
        display: block;
        margin-left: 1em;
      }
    </style>
  </head>
  <body>
    <!-- Just type in the input box press enter -->

    <span id="span1" class="spanBox">gg</span>
    <span id="span2" class="spanBox">gg</span>
    <span id="span3" class="spanBox">gg</span>
    <span id="span4" class="spanBox">gg</span>
    <span id="span5" class="spanBox">gg</span>

    <input onkeypress="change(event)" class="input" />
  </body>
  <script>
     let maxW = -1;
     const change = (e) => {
       if(e.keyCode === 13) {
          const val = e.target.value;

          const $span1 = document.getElementById('span1');

          $span1.textContent = `${val}`;

          calcMax();
       }
     }

     const calcMax = () => {
        maxW = -1;
        for(let i = 1; i <= 5; i++) {
            const $span = document.getElementById(`span${i}`);

            if($span.style.width === '') {
              const r = $span.getBoundingClientRect();

              maxW = Math.max(maxW, r.width);
            }
            else {
              $span.style.width = '1px';

              maxW = Math.max(maxW, $span.scrollWidth);
            }
        }
        setTimeout(() => update(), 100);
     }

     const update = () => {
       console.log("MAX ", maxW);

       for(let i = 1; i <= 5; i++) {
           const $span = document.getElementById(`span${i}`);

           $span.style.width = maxW + 'px';
       }
     }

     calcMax();

  </script>
<html>

Answer 2

After tinkering around on JSFiddle (:P), I managed to come up with a solution that works perfectly there, but unfortunately, it's not behaving the same way in my project.

Check out my JSFiddle here

<html>
  <head>
    <style>
      .spanBox {
        font-size: 14px;
        line-height: 25px;
        background-color: rgb(224, 239, 241, 0.5);
        height: 25px;
        padding: 0px 5px;
        margin-top: 5px;
        border-radius: 4px;
        font-weight: 500;
        letter-spacing: 0.7px;
        text-align: center;
        display: inline-block;
        margin-left: 1em;
        box-sizing: content-box;
      }

      .input {
        display: block;
        margin-left: 1em;
      }
    </style>
  </head>
  <body>
    <!-- Just type in the input box press enter -->

    <span id="span1" class="spanBox">gg</span>
    <span id="span2" class="spanBox">gg</span>
    <span id="span3" class="spanBox">gg</span>
    <span id="span4" class="spanBox">gg</span>
    <span id="span5" class="spanBox">gg</span>

    <input onkeypress="change(event)" class="input" />
  </body>
  <script>
     let maxW = -1;
     const change = (e) => {
       if(e.keyCode === 13) {
          const val = e.target.value;

          const $span1 = document.getElementById('span1');

          $span1.textContent = `${val}`;

          calcMax();
       }
     }

     const calcMax = () => {
        maxW = -1;
        for(let i = 1; i <= 5; i++) {
            const $span = document.getElementById(`span${i}`);

            if($span.style.width === '') {
              const r = $span.getBoundingClientRect();

              maxW = Math.max(maxW, r.width);
            }
            else {
              $span.style.width = '1px';

              maxW = Math.max(maxW, $span.scrollWidth);
            }
        }
        setTimeout(() => update(), 100);
     }

     const update = () => {
       console.log("MAX ", maxW);

       for(let i = 1; i <= 5; i++) {
           const $span = document.getElementById(`span${i}`);

           $span.style.width = maxW + 'px';
       }
     }

     calcMax();

  </script>
<html>

JavaScript failing to adjust span width as intended

Answer №1

Similar questions

Issues encountered while trying to implement HTML text within span tags

"Learn the process of extracting information from a database and exporting it to a CSV file with Angular 2

Styling div elements to match the dimensions of table rows in CSS

"Node.js: The Importance of Rest for Optimal Performance

Issue with button click functionality within Angular grid's Celltemplate

Encountering a 401 error while attempting to exchange Faceit OAuth authorization code for access token

Error encountered: Unable to locate module 'psl'

Ways to compel Capacitor Application to reload through code

Turn off the debugger statement using your web browser

Adjust `theme-color` as the class and theme of the page are switched

I am experiencing issues with launching chromium while running Puppeteer on Windows 11 using node js v19.4

In ReactJS, changing one setState property triggers a cascade of changes in other properties

What is the best way to handle errors generated by my jsdom.jqueryify callback function?

Caught up: TypeScript not catching errors inside Promises

Implement dynamic CSS color selection based on server-side data

Avoid overflow of a flex element within the <body> tag by ensuring its child with overflowing content takes up 100% of its width

The scroll function remains unchanged when using overflow-y scroll and border radius

Checking if the group of radio buttons has been selected using JQUERY

Modify the specified pattern with regex only if it does not appear in a particular location in the content

Discover an Easy Way to Scroll to the Bottom of Modal Content with Bootstrap 5 on Your Razor Page