Floating label overlays format output

10 posts, 1 answers
  1. Jan
    Jan avatar
    49 posts
    Member since:
    Apr 2017

    Posted 08 Oct 2019 Link to this post

    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.


  2. Martin
    Admin
    Martin avatar
    150 posts

    Posted 09 Oct 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Jan
    Jan avatar
    49 posts
    Member since:
    Apr 2017

    Posted 09 Oct 2019 Link to this post

    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.

  4. Martin
    Admin
    Martin avatar
    150 posts

    Posted 11 Oct 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Jan
    Jan avatar
    49 posts
    Member since:
    Apr 2017

    Posted 11 Oct 2019 in reply to Martin Link to this post

    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.
  6. Jan
    Jan avatar
    49 posts
    Member since:
    Apr 2017

    Posted 14 Oct 2019 in reply to Martin Link to this post

    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?
  7. Answer
    Martin
    Admin
    Martin avatar
    150 posts

    Posted 15 Oct 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  8. Jan
    Jan avatar
    49 posts
    Member since:
    Apr 2017

    Posted 16 Oct 2019 Link to this post

    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.


  9. Jan
    Jan avatar
    49 posts
    Member since:
    Apr 2017

    Posted 16 Oct 2019 Link to this post

    Sorry, this seems to work with the valuePrimitive option:

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

     

    Thank you for your help.

  10. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1263 posts

    Posted 17 Oct 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top