html - Input textboxs are moving when clicked -


i working on project. can access page here here small bit 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 clicked input text boxes in app, whole group moves. knows why? @ first thought because of data-toggle tooltip. tried fix adding container body element not work. think not because of tooltip because removed tooltip stuffs still not work. thank reading! answers, tips or suggestions welcome.

i tried in chrome , saw no offsets when clicking in. might due css issuses. note angular modifies input's class when click in it, outside, change value etc. of classes modified are: ng-pristine, ng-dirty, ng-valid, ng-invalid, ng-touched (there more).

if css has definition changes element size, example different border active object, might generate such effect.

one way track issue use chrome , following: 1. right click field , select 'inspect elemenet' 2. devtools window opens, click in , out of input element , see classes changed, devtools animate changes , have visual cue. 3. see definitions might affecting layout.


Comments

Popular posts from this blog

java - Date formats difference between yyyy-MM-dd'T'HH:mm:ss and yyyy-MM-dd'T'HH:mm:ssXXX -

c# - Get rid of xmlns attribute when adding node to existing xml -