Joshi Joshi - 4 months ago 10
HTML Question

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>




Answer

<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>