Floating label overlays format output

[Jan]

When the datepicker is wrapped into a kendo-textbox-container with a floatingLabel, the label overlays the output of the format definition, see:

https://stackblitz.com/edit/angular-av3vbg?file=app%2Fapp.component.ts

 

Also, since version 3.3.4 of the package @progress/kendo-theme-material there is an offset problem with the label on focus. When the datepicker has a value set and you focus the field, the label gets a wrong offset. It jumps back to the correct position on blur.

Please have a look into this problems.

[Martin]

Hi Jan,

Thank you for the provided StackBlitz example.

To avoid such overlay when the <kendo-textbox-container> is used, set the placeholder option of the DatePicker component to an empty string:

 

    <kendo-textbox-container floatingLabel="Test placeholder">
      <kendo-datepicker [(value)]="value" [placeholder]="''"></kendo-datepicker>
    </kendo-textbox-container>

 

About the described behavior when the component is focused, this is an issue on our side. That is why I logged a bug report in our public GitHub repository that can be tracked at the following link:

https://github.com/telerik/kendo-themes/issues/941

I have also updated your account's Telerik points for bringing this issue to our attention.

As a workaround that I can provide until the fix is merged, set the top CSS property of the label:

 

.k-state-focused .k-label {
        top: 24px;
 }

 

Here is an example of the above suggestions:

https://stackblitz.com/edit/angular-av3vbg-trx5h5?file=app/app.component.ts

I hope this helps. Let me know if any further assistance is required for Kendo UI for Angular.

Regards,
Martin
Progress Telerik

[Jan]

Thank you for your reply. Setting the placeholder attribute did the trick.

The css trick does not work. I just see the same behaviour as before.


I just found another problem when upgrading @progress/kendo-angular-dropdowns to 4.2.0.

https://stackblitz.com/edit/angular-edtsga?file=app%2Fapp.component.ts

Here I am updating the list items of the combobox in a settimeout function (simulating a xhr request in my case). Unfortunately the label overlays the label then. When I downgrade to 4.1.0 it is working as expected.

[Martin]

Hi Jan,

Thank you for your feedback.

Regarding the DatePicker label, I checked the StackBlitz example and the suggested CSS code didn't work and I apologize for that. I updated the selector and now the label should behave as expected. Please check the modified example:

https://stackblitz.com/edit/angular-av3vbg-6bj4jr?file=app/app.component.ts

About the second issue, I want to thank you for the provided example. I have managed to reproduce it. The described behavior is caused by the fact that the ComboBox is initialized without value, that is why the label is shown in the input. When updating the value in this case, the valuеChange event is not emitted which causes thе reported overlapping.

In general, text value assigned through the [(ngModel)] or [value] option, which is not found in the dataset will not be resolved by design. For more information check this article from our documentation:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/value-binding/#toc-unresolved-text

That is why adding the 'Football' item to the dataset will render the label correctly:

  public listItems: Array<string> = ["Football"];

  public group: FormGroup;

  constructor(private _fb: FormBuilder) {
    this.group = this._fb.group({
      test: this._fb.control("Football")
    });
  }

Here is an example:

https://stackblitz.com/edit/angular-edtsga-pr4ztw?file=app/app.component.ts

I hope this helps.

Regards,
Martin
Progress Telerik

[Jan]

I am just wondering why the dropdown issue did not exists in @progress/kendo-angular-dropdowns version 4.1.0. Just downgrade to this version in my example and the dropdown renders correctly.

[Jan]

So there will be no rollback of this issue like in 4.1.0 because its a design decision? So I always have to provide the selected value in the initial array?

[Martin]

Hi Jan,

I will answer in the same order as the last two replies.

In version 4.1.0 of the dropdowns package, there was a bug with the Combobox (the floating label overlapped with text when the resolved object value is an empty string) for example:

public listItems: Array<{ text: string, value: string }> = [
    { text: "Small", value: '' },
    { text: "Medium", value: '' },
    { text: "Large", value: '3' }
    ];

which in version 4.2.0 is fixed (check the text value):

public listItems: Array<{ text: string, value: string }> = [
    { text: "Small", value: '' },
    { text: "Medium", value: '' },
    { text: "Large", value: '3' }
    ];

Please, see the DropDowns Change Log.

When the ComboBox is initialized and the data is passed asynchronously, there is no text and the floating label is rendered in the input. Because the valueChange event is not emitted when the data is received, the text value overlaps with the floating label. Providing the selected item initially in the data array will avoid this overlapping caused by the asynchronous operations.

I hope this provides some more details on this case. Let me know in case there is still something unclear or I am missing something. Thank you in advance.

Regards,
Martin
Progress Telerik

[Jan]

This seems to be problematic with the following situation:

i.e. there is a reactive form with just one dropdown, which holds the value '2'. The items for the dropdown are loaded by a xhr request and are available delayed. The xhr request returns this:

public listItems = [ { text: "Small", value: '1' }, { text: "Medium", value: '2' }, { text: "Large", value: '3' } ];

 

According to your advice I have to initialize the items array at the beginning with one item that provides information for the selected item. In my reactive forms I just hold the value '2', there is no text like 'Small', so this doesnt seem to be opportunity for me.

[Jan]

Sorry, this seems to work with the valuePrimitive option:

https://stackblitz.com/edit/angular-edtsga-twszjn

 

Thank you for your help.

[Dimiter Topalov]

Hi Jan,

Thank you for the provided additional details about this case.

Unfortunately, the StackBlitz for some reason doesn't load the latest 4.2.0 version of the DropDowns package. Deleting and installing again the 4.2.0 version in the package.json file ("@progress/kendo-angular-dropdowns": "4.2.0") breaks the example and the label is overlapped with the text , which means that the issue persists even if the valuePrimitive option is used (refer to the following screencast).

Indeed, the case that was described in the previous ticket is valid. Currently, the ComboBox didn't check if there is a value and check the text property only. It seems that this is a bug on our side. I consulted it with the assigned developer and I can confirm that the issue is taken with higher priority. The fix would be included in the next version of the package. 

Meanwhile, creating a custom directive which checks for the text and value property at the same time,  could be used as a workaround in order to render the floating label correctly:

https://stackblitz.com/edit/angular-edtsga-uyx4yl?file=app/app.component.ts

Accept our apologies for the caused inconvenience.

Regards,
Dimiter Topalov
Progress Telerik