Meteor + Ionic + Meteoric : Is Ionic's Floating Labels for Text Input supported in meteoric package?

Question

I am trying to use floating labels from meteoric package - https://atmospherejs.com/meteoric/ionic available @ http://ionicframework.com/docs/components/#forms-floating-labels. However, once I click inside the textbox, the floating labels do not appear. Somehow, the opacity of the span tag with the class input-label does not change its opacity from 0 to 1

I have created a Meteorpad @ http://meteorpad.com/pad/bn38rssH3CLdJbAaY/Ionic%20Floating%20Label However, I think Meteorpad still does not support scss and hence, the app is not working as expected on Meteorpad server. Perhaps, you can download it and run it locally. Please rename style.css to style.scss.

P.s.: An issue has also been added at meteoric github page - https://github.com/meteoric/meteor-ionic/issues/283

Answer 1

The meteoric package does support the css, but the 'floating labels' feature does require a little javascript to add and remove the class name. Simply add the following to the page with floating labels:

$('.item-floating-label>input').on('keyup', function(){
  $(this).val() ? $(this).prev().addClass('has-input') 
                : $(this).prev().removeClass('has-input'); 
});

I added this to the github page earlier as well.