CODEWITHSUNDEEP
javascripthtmlcss
Joshi
Joshi

Reputation: 631

The display block and none is changing the table indentation

I have the below code. The "With Inventory Data" row visibility is dependent on what we select in the dropdown of Product Type. If we select Linux from dropdown, the "With Inventory Data" row gets hidden. Changing it back to Windows in the dropdown leads to show the "With Inventory Data" row. But here the Yes, No radio button are going below the text "With Inventory Data". This needs to be positioned as it was positioned when the page is loaded. Please help 

var flag = 1;
            	function showHide() {
            		
            		if (flag == 1) {
            			document.getElementById('warning').style.display = "none";
            			document.getElementById('inventoryCol1').style.display = "none";
            			document.getElementById('inventoryCol2').style.display = "none";
            			flag=0;
            			
            		}
            		else {
            			document.getElementById('warning').style.display = "block";
            			document.getElementById('inventoryCol1').style.display = "block";
            			document.getElementById('inventoryCol2').style.display = "block";
            			flag=1;
            		}
            	}
            	function warningDisplay(myRadio) {
            		if(myRadio.value == "yes") {
            			document.getElementById('warning').innerHTML = "Target Build # should be \"55\" branch and above to select Inventory Data";
            		}
            		else {
            			document.getElementById('warning').innerHTML = "";
            		}
            	}
<html>
          <body style="background-color:green">            			
<table>
            				
            				<tr>
            					<td><label style="color: white; text-align: left;" id="osTypelable"><b>Product Type</b>&nbsp;&nbsp;</label></td>
            					<td><select  style="width:205px; height:25px" id="osTypeDropdown" onChange="showHide()" > 
            						<option value="win">Windows</option>
            						<option value="lin">Linux</option>
            						</select>
            					</td>
            				</tr>
            				
            					<td style="color: white;text-align: left; " id="inventoryCol1"><label ><b>With Inventory Data</b>&nbsp;&nbsp;</label></td>
            					<td style="color: white;font-size:13px;font-weight: bold;" width=200 id="inventoryCol2">
            						<label style="display:inline-block;"><input type="radio"  value="no" onClick="warningDisplay(this)" name="inv"/>&nbsp;No &nbsp; &nbsp; &nbsp; </label> 
            						<label style="display:inline-block;"><input type="radio" value="yes" onClick="warningDisplay(this)" name="inv"/>&nbsp;Yes</label>
            					</td>					
            				</tr>
            				<tr>
            						<td colspan="2"><b style="color: #DC143C;font-size:13; float:right" id="warning"> </b> </td>
            				</tr>
            				
            				<tr>
            					<td colspan='2' align="center"><input name="submit"
            						type="submit" class="login" value="Submit"></td>
            				</tr>
            				</table>
    </body>
    </html>

Upvotes: 1

Views: 1390

Answers (2)

Pepo_rasta
Pepo_rasta

Reputation: 2900

<td> have initialy display: table-cell

var flag = 1;
            	function showHide() {
            		
            		if (flag == 1) {
            			document.getElementById('warning').style.display = "none";
            			document.getElementById('inventoryCol1').style.display = "none";
            			document.getElementById('inventoryCol2').style.display = "none";
            			flag=0;
            			
            		}
            		else {
            			document.getElementById('warning').style.display = "block";
            			document.getElementById('inventoryCol1').style.display = "table-cell";
            			document.getElementById('inventoryCol2').style.display = "table-cell";
            			flag=1;
            		}
            	}
            	function warningDisplay(myRadio) {
            		if(myRadio.value == "yes") {
            			document.getElementById('warning').innerHTML = "Target Build # should be \"55\" branch and above to select Inventory Data";
            		}
            		else {
            			document.getElementById('warning').innerHTML = "";
            		}
            	}
<html>
          <body style="background-color:green">            			
<table>
            				
            				<tr>
            					<td><label style="color: white; text-align: left;" id="osTypelable"><b>Product Type</b>&nbsp;&nbsp;</label></td>
            					<td><select  style="width:205px; height:25px" id="osTypeDropdown" onChange="showHide()" > 
            						<option value="win">Windows</option>
            						<option value="lin">Linux</option>
            						</select>
            					</td>
            				</tr>
            				<tr>
            					<td style="color: white;text-align: left; " id="inventoryCol1"><label ><b>With Inventory Data</b>&nbsp;&nbsp;</label></td>
            					<td style="color: white;font-size:13px;font-weight: bold;" width=200 id="inventoryCol2">
            						<label style="display:inline-block;"><input type="radio"  value="no" onClick="warningDisplay(this)" name="inv"/>&nbsp;No &nbsp; &nbsp; &nbsp; </label> 
            						<label style="display:inline-block;"><input type="radio" value="yes" onClick="warningDisplay(this)" name="inv"/>&nbsp;Yes</label>
            					</td>					
            				</tr>
            				<tr>
            						<td colspan="2"><b style="color: #DC143C;font-size:13; float:right" id="warning"> </b> </td>
            				</tr>
            				
            				<tr>
            					<td colspan='2' align="center"><input name="submit"
            						type="submit" class="login" value="Submit"></td>
            				</tr>
            				</table>
    </body>
    </html>

Upvotes: 3

Ajay Narain Mathur
Ajay Narain Mathur

Reputation: 5466

Use visibility property instead of display.

var flag = 1;

function showHide() {

  if (flag == 1) {
    document.getElementById('warning').style.visibility = "hidden";
    document.getElementById('inventoryCol1').style.visibility = "hidden";
    document.getElementById('inventoryCol2').style.visibility = "hidden";
    flag = 0;

  } else {
    document.getElementById('warning').style.visibility = "visible";
    document.getElementById('inventoryCol1').style.visibility = "visible";
    document.getElementById('inventoryCol2').style.visibility = "visible";
    flag = 1;
  }
}

function warningDisplay(myRadio) {
  if (myRadio.value == "yes") {
    document.getElementById('warning').innerHTML = "Target Build # should be \"55\" branch and above to select Inventory Data";
  } else {
    document.getElementById('warning').innerHTML = "";
  }
}
#warning,
#inventoryCol1,
#inventoryCol2 {
  display: block;
}
<html>

<body style="background-color:green">
  <table>

    <tr>
      <td>
        <label style="color: white; text-align: left;" id="osTypelable"><b>Product Type</b>&nbsp;&nbsp;</label>
      </td>
      <td>
        <select style="width:205px; height:25px" id="osTypeDropdown" onChange="showHide()">
          <option value="win">Windows</option>
          <option value="lin">Linux</option>
        </select>
      </td>
    </tr>

    <td style="color: white;text-align: left; " id="inventoryCol1">
      <label><b>With Inventory Data</b>&nbsp;&nbsp;</label>
    </td>
    <td style="color: white;font-size:13px;font-weight: bold;" width=200 id="inventoryCol2">
      <label style="display:inline-block;">
        <input type="radio" value="no" onClick="warningDisplay(this)" name="inv" />&nbsp;No &nbsp; &nbsp; &nbsp;</label>
      <label style="display:inline-block;">
        <input type="radio" value="yes" onClick="warningDisplay(this)" name="inv" />&nbsp;Yes</label>
    </td>
    </tr>
    <tr>
      <td colspan="2"><b style="color: #DC143C;font-size:13; float:right" id="warning"> </b> 
      </td>
    </tr>

    <tr>
      <td colspan='2' align="center">
        <input name="submit" type="submit" class="login" value="Submit">
      </td>
    </tr>
  </table>
</body>

</html>

Upvotes: 0

Related Questions