Input textboxs are moving when clicked - html

Question

I am working on a project. You can access to the page here
Here is the small bit where the error happens
<div class="col-sm-6 responsive-table">
<table>
<caption>Page template</caption>
<tr >
<td class='leftCol'>Easy</td>
<td ><input ng-model='page.easy' ng-model='wordpress' min=0 type='number' class='form-control numberInput' ></td>
</tr>
<tr >
<td >Medium</td>
<td ><input ng-model='page.medium' type='number' min=0 class='form-control numberInput'></td>
</tr>
<tr >
<td class='leftCol'>Hard</td>
<td ><input ng-model='page.hard' type='number' min=0 class='form-control numberInput'></td>
</tr>
</table>
</div>
<div class="col-sm-6 responsive-table">
<table>
<caption>Frontpage template</caption>
<tr >
<td class='leftCol'>Easy</td>
<td><input ng-model='frontpage.easy' type='number' min=0 class='form-control numberInput'></td>
</tr>
<tr >
<td >Medium</td>
<td><input ng-model='frontpage.medium' type='number' min=0 class='form-control numberInput'></td>
</tr>
<tr >
<td class='leftCol'>Hard</td>
<td><input ng-model='frontpage.hard' type='number' min=0 class='form-control numberInput'></td>
</tr>
</table>
</div>
</div>
When I clicked the input text boxes in the app, the whole group moves. Anyone knows why?
At first I thought it would be because of data-toggle tooltip. I tried to fix with adding container body to the element but it just does not work. I think it is not because of the tooltip because I even removed the tooltip stuffs but it still does not work.
Thank you for reading! Any answers, tips or suggestions is welcome.

Answer 1

I tried it in chrome and saw no offsets when clicking in. This might be due to css issuses. Note that angular modifies the input's class when you click in it, outside, change value etc. Some of the classes that are modified are:
ng-pristine, ng-dirty, ng-valid, ng-invalid, ng-touched (there are probably more).
If your css has a definition that changes the element size, for example a different border for an active object, it might generate such effect.
One way to track the issue would be to use chrome and do the following:
1. Right click the field and select 'inspect elemenet'
2. The DevTools window opens, now click in and out of the input element and see what classes are changed, the DevTools animate the changes for you and you will have a visual cue.
3. See what definitions might be affecting the layout.