title: md-switch jumps position on input click
body: <p>I'm using Angular-Material's md-switch to style a checkbox, but I'm facing a weird problem.
  From standard, the md-switch is using relatively a lot of space in a column, so I wrote some custom css to adjust it to my table cell.</p>
  
  <pre><code>md-switch {
      margin: 0px;
      height: 0px;
      line-height: 0px;
  } 
  
  md-switch .md-bar {
          background-color: #d0cece; /* set not selected bar color */
  }
  
  md-switch.md-checked .md-bar {
          background: rgb(160,209,90); /* Old browsers */
          background: -moz-linear-gradient(top, rgba(160,209,90,1) 0%, rgba(117,166,66,1) 100%); /* FF3.6-15 */
          background: -webkit-linear-gradient(top, rgba(160,209,90,1) 0%,rgba(117,166,66,1) 100%); /* Chrome10-25,Safari5.1-6 */
          background: linear-gradient(to bottom, rgba(160,209,90,1) 0%,rgba(117,166,66,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0d15a', endColorstr='#75a642',GradientType=0 ); /* IE6-9 */
  }
  
  
  md-switch .md-thumb {
          color: rgb(158,158,158); /* not selected switch color */
              line-height: 0px;
  
  }
  
  md-switch.md-checked .md-thumb {
          background: rgb(255,255,255); /* Old browsers */
          background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(234,234,234,1) 100%); /* FF3.6-15 */
          background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Chrome10-25,Safari5.1-6 */
          background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */
          border: 1px solid #CBCBCB;
  
  }
  
  md-switch[disabled] .md-thumb {
          background-color: rgb(255,255,255); /* disabled switch color */
  }
  
  .md-switch-td {
      margin-top: 0px;
  }
  
  md-switch .md-container {
      height: 0px;
  }
  
  #md-switch {
      width: 4.3333333%;
  }
  
  md-switch[disabled], md-switch[disabled] .md-container {
      cursor: not-allowed;
  }
  </code></pre>
  
  <p>at default the md-switch is using:</p>
  
  <pre><code>margin: 16px,
  line-height: 28px;
  height: 30px
  </code></pre>
  
  <p>When entering a page with md-switch on it, the switch is placed out of table cell as shown on this picture:</p>
  
  <p><a href="https://i.stack.imgur.com/aJPl3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aJPl3.jpg" alt="enter image description here"></a></p>
  
  <p>When another input is clicked, ex the Description input, the switch jumps back into its intended position:</p>
  
  <p><a href="https://i.stack.imgur.com/y7nx4.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y7nx4.jpg" alt="enter image description here"></a></p>
  
  <p>I've tried watching the md-switch element in Chrome Developer tool to see if its class changes, when an input is touched, but md-switch's class stays the same:</p>
  
  <pre><code>class="ng-pristine ng-untouched ng-valid"
  </code></pre>
  
  <p>Anyone who have experienced the same problem or have an idea to a solution?</p>
  
  <p>Thanks in advance!</p>