dan983 dan983 - 1 month ago 6
HTML Question

Why is HTML Table (TD) height being changed after adding FORM with a Link

I am currently adding a Form with a Link to a table.

The code works as expected however the link position is at the top of the cell.

This is causing the other cells height to change as a result.

Code as Follows:

[PHP]

echo '<td"><form id=\'form\' method="POST" action="test.php">
<input type=\'hidden\' name=\'test\' value=\'test\' />
<input type=\'hidden\' name=\'test2\' value=\'test2\' />
<a id="myLink" title="Click to do something" href="#"
onclick="submitLink(\'form\');return false;">click here</a>
</form></td>';


...
[JavaScript]

<script>
function submitSessionForm(sessionID){
//Submit Form
document.getElementById(sessionID).submit();
}
</script>


Why is the cell height changed? The Form height doesn't seem to be causing the issue (As when inspecting the element the TD is causing the row height to change.

Any advice would be appreciated.

Answer

By default, the form element adds a margin-bottom of 1em.

So, add

form {
  margin-bottom: 0;
}

By the way, why not use " for the attributes. Then you don't need those \' everywhere (not that this is any of my business).

<?php
echo '<td>
  <form id="form" method="POST" action="test.php">
    <input type="hidden" name="test" value="test" />
    <input type="hidden" name="test2" value="test2" />
    <a id="myLink" title="Click to do something" href="#" onclick="submitLink(\'form\'); return false;">click here</a>
  </form>
</td>';
...
?>