title: Floating label did not show the label on input focus
body: <p>I search on the internet and found one example on how to do floating label, so I just follow exactly from what provided from the example, but when I test it on my site, it didn't work exactly as it should be. Whenever the cursor is focus on the input, the label just disappear. But it works (when on focus and blur) when the label is outside of the input. Do I miss something?</p>
  
  <p>Here is the link that I follow:</p>
  
  <p><a href="http://jsfiddle.net/RyanWalters/z9ymd852/" rel="nofollow">Tutorial</a></p>
  
  <p><a href="http://www.bootply.com/mv2ImmuS1a#" rel="nofollow">JSFiddle Example</a></p>
  
  <p>Here is the code:</p>
  
  <p><strong>Index.cshtml</strong></p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="form-group input-group col-xs-12 col-sm-4 col-md-4 col-lg-4"&gt;
                  &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;&lt;/span&gt;
                  &lt;label class="control-label" for="txtUsername"&gt;Username&lt;/label&gt;
                  &lt;input id="txtUsername" class="form-control" type="text" /&gt;
              &lt;/div&gt;
              &lt;div class="form-group input-group col-xs-12 col-sm-4 col-md-4 col-lg-4"&gt;
                  &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-key"&gt;&lt;/i&gt;&lt;/span&gt;
                  &lt;label class="control-label" for="txtPassword"&gt;Password&lt;/label&gt;
                  &lt;input id="txtPassword" class="form-control" type="password" /&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"&gt;
                  &lt;button id="showOverlay" class="btn btn-default form-control" data-toggle="popover" data-content="Submit"&gt;Log In&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Site.css</strong></p>
  
  <pre><code>.control-label {
      font-size: 14px;
      font-weight: 400;
      opacity: .6;
      pointer-events: none;
      position: absolute;
      transform: translate3d(-340px, 8px, 0) scale(1);
      transform-origin: left top;
      transition: 300ms;
      z-index: 3;
      color: black;
  }
  
  .form-group.focused .control-label {
      transform: translate3d(-340px, 0, 0) scale(0.75);
  }
  
  .form-control {
      align-self: flex-end;
  }
  </code></pre>
  
  <p><strong>Site.js</strong></p>
  
  <pre><code>$('.form-control').on('focus blur', function (e) {
      $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length &gt; 0));
  }).trigger('blur');
  </code></pre>
  
  <p>Your answer much appreciated.</p>
  
  <p>Thank you.</p>