Using the Kendo UI Dojo, I have the code seen at the bottom. There are also two screenshots.
If you run this, you will find that the child elements are widely spaced apart even though their own content is small. If I change the value of item ID 1 to 10 characters, the spacing shrinks to reasonable distances (see screenshots below). I don't understand why the parent width should affect the child widths. Is there any way for me to correct this?
Thank you,
Tom Clark
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/orgchart/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="https://kendo.cdn.telerik.com/themes/7.0.2/default/default-main.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.3.1114/js/kendo.all.min.js"></script>
<style>
.k-card {
border: none !important;
background-color: inherit !important;
}
.k-orgchart-card {
width: auto !important;
}
.k-orgchart-node-group-container {
padding: 0 !important;
}
.k-button {
cursor: default !important;
outline: none !important;
}
.k-orgchart-line-v, .k-orgchart-line-h {
color: #000000 !important;
}
.org-chart-item {
padding: 10px 15px 10px 15px !important;
white-space: nowrap !important;
font-size: 12px !important;
}
</style>
</head>
<body>
<div id="example">
<div id="orgchart"></div>
<script>
var data = [
{ id: 1, name: "123456789012345678901234567890", expanded: true },
{ id: 2, name: "Clevey Thrustfield", parentId: 1 },
{ id: 3, name: "Carol Baker", parentId: 1 },
{ id: 4, name: "Kendra Howell",parentId: 1 },
{ id: 5, name: "Sean Rusell",parentId: 1 },
{ id: 6, name: "Steven North", parentId: 1 },
{ id: 7, name: "Frank Furter", parentId: 1 }
];
$("#orgchart").kendoOrgChart({
dataSource: data,
collapse: function (e) { e.preventDefault(); },
editable: false,
groupField: "name",
groupHeaderTemplate: "",
template: `<div class="org-chart-item">#: name #</div>`
});
</script>
</div>
</body>
</html>
DISPLAY WHEN PARENT WIDTH IS LARGE:
DISPLAY WHEN PARENT WIDTH IS SMALL: