How to initiate dynamically added elements such as floating label inputs

[omicr0n]

So I was just getting ready to ask how you do this then all of a sudden it dawned on me what to try and it worked so figured I'd still post in here in case someone else is looking for the solution to this problem since it doesn't appear to be in here anywhere and I couldn't find anything about it anywhere in the docs less I missed that memo.

But when injecting elements specifically to what this script styles such as the floating label technique and methods used to give inputs there "material" design if you inject your elements after $('body').bootstrapMaterialDesign(); then the input label won't float when you click it to make active and start typing and will just overlay on top of what your typing.

I tried calling $('body').bootstrapMaterialDesign(); again after injecting my elements on the page but that didn't change anything. After digging around and getting ready to ask how you handle this case that's when I noticed the 'body' selector this method is being called on so tried calling .bootstrapMaterialDesign(); on my new element(s) specifically and BAM they started functioning properly as floating label inputs.

Example

var newElementContainer = $('<div class="form-group bmd-form-group"></div>');
var newElementLabel = $('<label for="myInjectedInput" class="bmd-label-floating">Some Floating Label</label>');
var newElementItem = $('<input type="text" class="form-control" id="myInjectedInput">');

newElementContainer.append(newElementLabel);
newElementContainer.append(newElementItem);

// newElementItem.bootstrapMaterialDesign();  <-- calling this here or anywhere before the element 
// and/or the container it's in has been appended to the pages body wont work

$('#someForm').append(newElementContainer);

newElementItem.bootstrapMaterialDesign();

// or initiate it by the elements ID $('#myInjectedInput').bootstrapMaterialDesign();
// or add a class to all your injected inputs and initiate them all at once when your done using 
// the class selector $('.myInjectedInputs').bootstrapMaterialDesign();

So yeah... I don't know if this is all documented somewhere and/or the use of .bootstrapMaterialDesign(); or if that info is reserved for the pro version but there you go.

[groovemen]

Helllo @omicr0n,

Thank you for your interest in working with our products and also we appreciate your help in solving this issue.

All the best,
Stefan

[annhorne]

This is amazing! Thank you @omicr0n for this solution. I'm busy building an application where I need to create some form fields dynamically; noticed that the floating label was no longer working on the added fields. Your solution fixed the problem for me! Yay!

[frumentius]

Hi @omicr0n @groovemen, Greetings. I've tried this solution on dynamically added elements of toggle button and checkbox and unfortunately it did not work. Have You tested it on toggle button and checkbox? Any suggestion to make it work?

[frumentius]

I have found the solution, for me I should be using $.material.init(); instead of .bootstrapMaterialDesign();

[shubham-chhimpa]

So I was just getting ready to ask how you do this then all of a sudden it dawned on me what to try and it worked so figured I'd still post in here in case someone else is looking for the solution to this problem since it doesn't appear to be in here anywhere and I couldn't find anything about it anywhere in the docs less I missed that memo.

But when injecting elements specifically to what this script styles such as the floating label technique and methods used to give inputs there "material" design if you inject your elements after $('body').bootstrapMaterialDesign(); then the input label won't float when you click it to make active and start typing and will just overlay on top of what your typing.

I tried calling $('body').bootstrapMaterialDesign(); again after injecting my elements on the page but that didn't change anything. After digging around and getting ready to ask how you handle this case that's when I noticed the 'body' selector this method is being called on so tried calling .bootstrapMaterialDesign(); on my new element(s) specifically and BAM they started functioning properly as floating label inputs.

Example

var newElementContainer = $('<div class="form-group bmd-form-group"></div>');
var newElementLabel = $('<label for="myInjectedInput" class="bmd-label-floating">Some Floating Label</label>');
var newElementItem = $('<input type="text" class="form-control" id="myInjectedInput">');

newElementContainer.append(newElementLabel);
newElementContainer.append(newElementItem);

// newElementItem.bootstrapMaterialDesign();  <-- calling this here or anywhere before the element 
// and/or the container it's in has been appended to the pages body wont work

$('#someForm').append(newElementContainer);

newElementItem.bootstrapMaterialDesign();

// or initiate it by the elements ID $('#myInjectedInput').bootstrapMaterialDesign();
// or add a class to all your injected inputs and initiate them all at once when your done using 
// the class selector $('.myInjectedInputs').bootstrapMaterialDesign();

So yeah... I don't know if this is all documented somewhere and/or the use of .bootstrapMaterialDesign(); or if that info is reserved for the pro version but there you go.

@omicr0n it will not works in all situation.

instead of calling .bootstrapMaterialDesign(); on that particular element you can call it on all element of that type

$("input").bootstrapMaterialDesign();