CODEWITHSUNDEEP
javascripthtmlcss
Poggins
Poggins

Reputation: 41

Trying to get table height = 100% in Chrome

I'm trying to make a table that expands when clicked, so it starts off as one row, then two, then three etc, but stay at 100% height. This works fine in FF, IE and Opera, but when I added the third row in Chrome it now starts off as 50% opposed to 100%.

I've looked around for ages, and as it's for a revision plan for an exam in a few days I'm running out of time a bit haha.

So yeah, if anyone could offer any help that'd be super helpful and much appreciated.

(I guess I shouldn't post all my code, so I'll try shorten it to only the relevant bits without the style tags and what not- if anyone wants me to post the rest I can)

  function toggleSub() {
if( document.getElementById("hideSub").style.display=='none' ){
document.getElementById("hideSub").style.display = '';
}else{
document.getElementById("hideSub").style.display = 'none';
document.getElementById("hideNeuro").style.display = 'none';
document.getElementById("hideAtypicalBlank").style.display = 'none';
document.getElementById("hideAtypical").style.display = 'none';
}
}
function toggleNeuro() {
if( document.getElementById("hideNeuro").style.display=='none' ){
document.getElementById("hideNeuro").style.display = '';
document.getElementById("hideAtypicalBlank").style.display = 'none';
}else{
document.getElementById("hideNeuro").style.display = 'none';
if(document.getElementById("hideAtypical").style.display == '')
document.getElementById("hideAtypicalBlank").style.display = '';
}
}
function toggleAtypicalBlank() {
if( document.getElementById("hideAtypicalBlank").style.display=='none' && 
document.getElementById("hideNeuro").style.display=='none'){
document.getElementById("hideAtypicalBlank").style.display = '';
}else{
document.getElementById("hideAtypicalBlank").style.display = 'none';
}
}
function toggleAtypical() {
if( document.getElementById("hideAtypical").style.display=='none' ){
document.getElementById("hideAtypical").style.display = '';
}else{
document.getElementById("hideAtypical").style.display = 'none';
}
}


  table#table3{
  margin:0;
  padding:0;
  height:100%;
  border:none
}


<table border="1" id="table3" width="100%">
<tr>
    <th colspan="2"><span onClick="toggleSub();">Drug Therapy</span></th>
</tr>
<tr id="hideSub" style="display:none;" >
    <td width="50%"><span onClick="toggleNeuro();">Neuroleptics</span> </td>
    <td width="50%"><span onClick="toggleAtypical();toggleAtypicalBlank()">Atypical</span> </td>
</tr>
<tr>
    <td id="hideNeuro" style="display:none;">blah blah blah </td>
    <td id="hideAtypicalBlank" style="display:none;"> </td>
    <td id="hideAtypical" style="display:none;">blah blah blah </td>
</tr>

Upvotes: 4

Views: 1393

Answers (3)

Max
Max

Reputation: 4646

It seen that if you put a style in for the table row and give it a height of 100%, it will work. So another way to do this would be to give each table row a height in a percentage and then change the height respectively with your JS. I can post the code for this if you want.

Upvotes: 0

Alohci
Alohci

Reputation: 83006

It seems that for Chrome, you need to make the table row display:none as well as the table cells.

At this JSFiddle, I've set the third table row to display:none at start up, and added the function updateRow3 to set the third row to display:none or not depending on whether any of its table cells are visible.

Upvotes: 1

mazlix
mazlix

Reputation: 6313

http://jsfiddle.net/mazlix/FLpFR/ works for me in both chrome and firefox, could you let me know if it gives you problems. Are you using the latest version of chrome?

Upvotes: 1

Related Questions