Input textboxs are moving when clicked

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.

General advise: tables should not be used for layout. https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html — JimL, Sep 21 '15 at 08:19
you can go to the site and view source. The css is here http://77.240.19.15/~play1sueprapp/WPC/css/bootstrap.min.css and my custom css http://77.240.19.15/~play1sueprapp/WPC/css/style.css — phuwin, Sep 21 '15 at 10:41
@JimL Thanks man. That's good to know. Say goodbye to Table and now I am working again on the grid system and nested grid with bootstrap. — phuwin, Sep 21 '15 at 11:34

score 0 · Accepted Answer · answered Sep 22 '15 at 08:44

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.

Hi, I already changed everything. I did not use table for layout anymore. I think table is the main issue with the old html. Thank you so much for taking a look and giving me tips. — phuwin, Sep 22 '15 at 10:20

Input textboxs are moving when clicked

1 Answers1