Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Overlapping labels on fields, added after ajax request

Yvonne Findeis priority asked 5 years ago


We have a single-page-application, that load new inputs after user actions by ajax requests.The loaded html-code-snippets will added by jQuery html()-method.New inputs are overlapped by the labels. It seems, that these inputs not correct initialized by mdb.

Snippet

Sorry, the snippet was broken. I have corrected it.


Yvonne Findeis priority answered 5 years ago


Hi Bartłomiej,
thank you for your answer.
Yes, currently I wrote my own quick fix. It will run on $(document).ready().

$("input.form-control").each(function (index, input) { 
    var $this = $(input); 
    var $labelAndIcon = $this.siblings('label, i'); 
    var hasValue = $this.val().length; 
    var hasPlaceholder = $this.attr('placeholder'); 
    if (hasValue || hasPlaceholder) { 
            $labelAndIcon.addClass('active'); 
    }
 });

Unfortunately, this does not completely solve my problem. After field lose focus, the label overlaps the field again.

For general fix I would like prefer an initialisation method, such as exists on selects and waves-effects:

// Material Select Initialization
$('.mdb-select').materialSelect();

Waves.init();

Best regards,

Yvonne Findeis
Senior Software Engineer
Cegeka Deutschland GmbH


Bartłomiej Malanowski staff commented 5 years ago

This issue is on our TODO list so I hope we'll fix it soon



Currently, we don't have any quick fix for that, but what you can do is manually adding the .active class to the <label>



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.5.15
  • Device: all
  • Browser: all
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes