Telerik Forums
Kendo UI for jQuery Forum
1 answer
10 views

We are currently experiencing a rendering issue with the KendoUI TreeView component, version 2019.2.703, on Project Server Online. This problem arose following a recent update to Project Online, which introduced a change in how the WebComponentsIcons font, used for icon rendering, is managed in the cloud environment.

 Issue Details:

Previously, the grid component functioned correctly. However, after the update, labels in combo boxes that contain hierarchical items (years and months in our case) are not displaying correctly. Specifically, the label for the year is now rendering "behind" he checkbox and is only partially visible within the interface.

 See attachment: TreeView_err1.png

Attempted Fixes and Complications:

We attempted a solution that successfully made the year label visible again modifying the style of the class .k-treeview .k-in (setting the Font Family and size).

.k-treeview .k-in {
    border-radius: 0;
    margin: 0;
    padding: 4px 8px;
    border: 0 solid transparent;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    align-content: center;
    vertical-align: middle;
    position: relative; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
  }

However, this adjustment led to an unintended change in the Document Object Model, and an empty <span> cover the checkbox and partially blocked the selection of the checkbox.

See attachment: TreeView_err2.png

To avoid the conflict between the checkbox and the empty span we modified the style of the .k-icon class changing the display from inline-block to display: contents;

Now, the trigger, originally on the triangle icon for showing/hiding child items (months), is incorrectly positioned above the checkbox for selecting the year. This results in all child items being expanded and displayed when the parent is selected, which is not the desired behaviour.

 See attachment: TreeView_err3.png

Attachments:

Please find attached screenshots for a better understanding of the issues described.

Request:

Could you please investigate this behaviour? Any suggestions on how to correct the year label rendering without affecting the functionality of the child item display would be greatly appreciated.

Martin
Telerik team
 answered on 17 May 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?