Changing height of element when event is fired (javascript)

Question

I want to change the height of at element when I have a click event. The height is set to auto, but when the event is fired I want to draw the chart with a different height..

My HTML looks like:

<table class="col-sm-12">
                         <tr>
                             <td>
                                 <div class="col-sm-12" style="height: 300px; overflow: auto !important; text-align:left" id="errorTable">
                                 </div>
                             </td>
                             <td>
                                <table class="col-sm-12">
                                    <tr> <td style="height:300px; width:100%" id="Chart"></td></tr>
                                    <tr> <td id="errorDetails" style="height:100%; width: 100%"></td></tr>
                                </table>
                             </td>
                        </tr>
                     </table>

and part of the javascript:

document.getElementById('Chart').setAttribute("style", "height:75");
 document.getElementById('Chart').style.height = "75px";

Have tried everything, but nothing works...

Now I have found out that when i predefined the height of ID= "chart" to 100% then I am able to change if afterwards. But this does not work for me. I need to set the size of the height of the Chart to 300px in the start and then change it. But i does not work....

What you tired to do? Please add your code into snippet, So someone has quickly fixed your issue — jaydeep patel, Aug 13 '18 at 09:11
the first won't work because the unit is missing but the second one should work fine — Temani Afif, Aug 13 '18 at 09:12
Any reason for using tables and nested tables when it looks as if your also using some sort of grid system? Tables should only be used for tabular data and not for layout — Pete, Aug 13 '18 at 09:48

Shijil Narayanan · Answer 1 · 2018-08-13T11:00:15.407

When you try to apply height to td tags it wont get applied. For more details on this click here

So you may have to put a div inside your td tag and apply height to it.

HTML

<table class="col-sm-12">
   <tr>
      <td>
         <div class="col-sm-12" style="height: 300px; overflow: auto !important; text-align:left" id="errorTable">
         </div>
     </td>
     <td>
       <table class="col-sm-12">
           <tr>
             <td >
              <div id="Chart" style="height:300px; width:100%">
              </div>
             </td>
          </tr>
          <tr>
            <td>
              <div id="errorDetails" style="height:100%; width: 100%">
              </div>
            </td>
          </tr>
       </table>
    </td>
   </tr>
</table>

Javascript

document.getElementById('Chart').style.height = "75px";

Here is a working jsfiddle

Changing height of element when event is fired (javascript)

1 Answers1