Topic: Label doesn't become active

Mson free asked 1 year ago


Expected behavior

Label should receive the class active and move the text to the top border when only date is given in the picker date time.

Actual behavior

Date is placed in the input and the label text sits behind the date.

Resources (screenshots, code snippets etc.)

Expected behavior Expected behavior Actual behavior Actual behavior Behavior when both the date and time is selected Full behavior


Marcin Luczak staff answered 1 year ago


Hi,

Does this problem occurs only on page load with default value set? If so, this might be a problem similar to this question and I would recommend using following workaround untils it is fixed in the package:

$(document).ready(function() { 
    if($('#termin').val() !== '') { 
        $('label[for=termin]').addClass('active');
     } 
 });

At any rate, please provide a snippet or a fragment of your code showing the issue.

Keep coding, Marcin


Mson free commented 1 year ago

It doesn't break upon load, however if you interact with it these issues happen.

From what I could gather, is this how the html is rendered. This uses the annotations in dotnet.

[Display(Name = "Date time picker")]
[FormPartType(FormPartType.DateTime)]
public DateTime? DateTimePicker { get; set; }

To implement the date time picker, a script is loaded in the .cshtml with the following code.

$(".connxt-component.date-time").dateTimePicker();

Marcin Luczak staff commented 1 year ago

This is unusual behavior for interaction with the component. It might be a problem with integration with.net application. Do you load the DateTimePicker component after all the MDB scripts are loaded into the page? Can you please provide the html output of the component from the developer tools, or best host your example in our MDB GO https://mdbootstrap.com/docs/standard/cli/ and share the result?


Mson free commented 1 year ago

The DateTimePicker should indeed be loaded after the MDB scripts. Otherwise we should have problems withe the other components. This is the rendered html in the developer tools.

<div class="md-form">
    <input class="form-control date-time picker-opener connxt-component valid" data-open="DateTimePickerDatePicker" id="DateTimePicker" name="DateTimePicker" type="text" tabindex="63" aria-invalid="false">
    <label for="DateTimePicker" class="active">
        Date time picker
    </label>
    <input class="datepicker form-control time-date-ghost picker__input" id="DateTimePickerDatePicker" type="text" readonly="" aria-haspopup="true" aria-expanded="false" aria-readonly="false" aria-owns="DateTimePickerDatePicker_root" tabindex="64">
    <!-- 200 lines of the picker missing here -->
    <input type="hidden" name="_submit" value="2021/09/23" tabindex="72">
    <input class="form-control timepicker time-date-ghost" data-open="DateTimePickerDatePicker" type="text" tabindex="73" style="">
</div>

A part is missing due to it being 200 lines of the picker modal. So i pasted it elsewhere to keep it a bit shorter here. https://pastebin.com/GpuWiFtf


Marcin Luczak staff commented 1 year ago

Your output HTML looks fine. Can you also share your original HTML structure for this file/chunk of code? Is DateTimePicker called directly on page load or is it loaded dynamically based on some condition?

Please check whether the component is working properly on a clean app setup, without any side components and imports, maybe something is interfering with its performance


Mson free commented 1 year ago

So I dived into the MDBootstraps code. In the forms-free.js there are two points of interest. There are the updateTextFields($input) and toggleActiveClass($this, action) methods.

The toggleActiveClass method is responsible for changing the active class of the label. This is the place where my label receives the command to remove the active class.

In updateTextFields method it is determined of an input should change its styling. It does this by only looking for the input given in the parameter. I would say this method need an extra check to see if it is part of multiple inputs.

Would you say that this is indeed the place where the bug occurs, @Marcin Luczak?


Marcin Luczak staff commented 1 year ago

This might be an issue as you are not providing a placeholder to the main input of the DateTimePicker and updateTextFields consider it as an empty input, thus it removes the active class. This would also mean that your main input element is not properly updated and this might be an issue with the DateTimePicker itself. Also your output HTML label has active class and it should not be overlapping input's value, which means it's not label overlapping the input. Can you select overlapping element in the devtools?

Have you tried running this code on the fresh setup, without .net and any other components?

Your second input element has datepicker class, which is not present in the DateTimePicker documentation. It might be causing problems as I can't really tell how your components are called in .net notation and datepicker somehow could be auto calling itself before datetimepicker.

It would be the best if you could just post your input HMTL values or publish your page so I can better check the problem, as I am unable to reproduce it neither locally, nor in the snippets.



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

  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: MDB4 4.19.2
  • Device: PC
  • Browser: Firefox
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No