CODEWITHSUNDEEP
javascriptcssdomlayoutwidth
Michael Scott Asato Cuthbert
Michael Scott Asato Cuthbert

Reputation: 3638

Determine maximum width a DOM element might grow to be?

I'm interested in querying the maximum size that a DOM element in a browser might grow to be. It is well known that an empty DOM element (without styling) has .clientWidth of 0, but adding text/images/etc. to the element might cause its width to grow. Take for instance the DOM element thisOne in the structure below:

<table style="padding: 20px; border-spacing: 100px">
   <tr>
       <td></td>
       <td>
            <div id="thisOne"></div>
       </td>
   </tr>
</table>

Currently #thisOne.clientWidth === 0 but if I append a large amount of text to it, its width will grow and grow, but not until it reaches document.body.clientWidth because of the columns, padding classes, etc. I am wondering how I can figure out the current maximum width of the object without doing something like:

const thisOne = document.getElementById('thisOne');
thisOne.style.visibility = 'hidden';  // do not display to user.
thisOne.innerHTML = 'blah '.repeat(2000);
const maxWidth = thisOne.clientWidth;
thisOne.innerHTML = '';
thisOne.style.visibility = 'visible';

JQuery based answers are fine, though knowing a pure HTML/JS version would be better.

(In case anyone's wondering, I'm planning on placing an SVG of music notation into the div, but I want it to have nice wrapping onto additional lines by giving the renderer a width to fit before adding it)

Upvotes: 5

Views: 636

Answers (2)

George
George

Reputation: 2026

Seems like the easiest way would be to get the width of the parent e.g. element.parentNode().clientWidth

a div will grow only to it's parent element. unless, of course, white-space: nowrap is specified.

EDIT: this doesn't work

Upvotes: 0

S&#233;bastien
S&#233;bastien

Reputation: 1697

What you can do is to set the width of the table to 100% (so it takes all the available space of the container). Set the desired width of the other columns (<td>), either fixed or %. And set the width of the column containing #thisOne to 100%, it will span to the remaining space available (<div> is a block, so it will use the whole width by default).

<table style="padding: 20px; border-spacing: 100px; width: 100%">
   <tr>
       <td style="width: 100px"></td>
       <td style="width: 100%">
            <div id="thisOne"></div>
       </td>
   </tr>
</table>

Now, #thisOne will take all the available space and you can get it's width with #thisOne.clientWidth.

If you don't want #thisOne to take the whole width by default (i.e., when it's empty), you can simply not set his container td width to 100% and do it by code before you get the #thisOne.clientWidth (but you will have to get the clientWidth in a setTimeout because the browser needs to compute the layout before the clientWidth is changed).

As 小聪聪到此一游 pointed out, you can also use display: flex and flex-grow to achieve the same goal.

<div style="display: flex">
    <div style="flex-grow: 0"></div>
    <div style="flex-grow: 1" id="thisOne"></div>
</div>

Upvotes: 4

Related Questions