Question

我正在开展一个项目。您可以访问页面here 这是发生错误的小位

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

当我点击应用程序中的输入文本框时，整个组都会移动。谁知道为什么？起初我以为这是因为数据切换工具提示。我尝试修复向元素添加容器主体，但它只是不起作用。我认为这不是因为工具提示，因为我甚至删除了工具提示的东西，但它仍然无法正常工作。谢谢你的阅读！欢迎任何答案，提示或建议。

Answer 1

我在chrome中尝试过，并且在点击时没有看到任何偏移。这可能是由于css发布。请注意，当您在其中单击，外部，更改值等时，angular会修改输入的类。某些修改的类是： ng-pristine，ng-dirty，ng-valid，ng-invalid，ng-touching（可能还有更多）。

如果您的css具有更改元素大小的定义，例如活动对象的不同边框，则可能会产生此类效果。

跟踪问题的一种方法是使用chrome并执行以下操作： 1.右键单击该字段，然后选择检查elemenet＆＃39; 2. DevTools窗口打开，现在单击进入和退出输入元素并查看更改了哪些类，DevTools为您设置动画的动画，您将获得视觉提示。 3.查看可能影响布局的定义。

单击时，输入文本框正在移动

1 个答案: