CODEWITHSUNDEEP
javascripthtmlstyleswidth
Richard T
Richard T

Reputation: 4665

Resize of div is being ignored

I have a super-simple web page that loads data from a server into s as containers. The problem is that sometimes images are too tall, and overflow and cause layout problems. So, I was looking to resize the divs using:

target.style.height = height; // As short form of:
document.getElementById('someId').style.height=height;

But so far NOTHING I've tried has worked. Here's the html file:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body bgcolor="#E3FBFF" text="#000000" onload="loadImages();">
      <script type = "text/javascript">
        function loadImages()
        {
          ...Function omitted for brevity...
          But it gets to this line:
          document.getElementById(d0).style.height = height+10;
        }
  </script>
    <div id=d0></div>
    <hr>
    <div id=d1></div>
    <hr>
    <div id=d2></div>
    <hr>
    <div id=d3></div>
    <hr>
    </body>
    </html>

That's it!

I have found various articles like this one, or this one, but, they weren't helpful.

It occurs to me to mention that in my case I don't require the use of divs per se. I just need the images and related text to not overlap vertically (or horizontally). As it is, when the images load, it can be a real mess. ...How can I tell my divs to be full width with no overlay from the other divs? I tried using a class, using CSS, and more, all ignored.

I guess I was working under the improper assumption that divs, as block-oriented things, that even if you declare full width ("width=100%") can and will STILL overlap vertically depending on the contents placed in them.

Upvotes: 1

Views: 132

Answers (2)

Chris Li
Chris Li

Reputation: 2671

you didnt show what you assigned to 'height', but from your code i assume its an interger.

document.getElementById(d0).style.height = height+10;

style takes a string (ie 10px), so assigning number to it won't work, try the following

document.getElementById(d0).style.height = height+10+'px';

javascript will convert it to string for you
more on integer to string here What's the best way to convert a number to a string in JavaScript?

Upvotes: 2

Frish
Frish

Reputation: 1421

Add a unit to your height variable. As you are editing the CSS style of the element this is required. See: MDN

document.getElementById('someId').style.height=height becomes: document.getElementById('someId').style.height = height.toString() + 'px'

Upvotes: 2

Related Questions