Site URL: https://leadership.dev/experimental-kanban
Hi,
I'm currently implementing a third-party library (DHTMLX Kanban) into a page into my client's website, the library can be installed just fine, but there are some styling issue with the component. It seems like there are CSS styling that gets overwritten by Squarespace.
Now, before anyone says, I have tried all the code in a separate html for testing to check if it's my code that's broken, and so far, everything works perfectly if I try to open my testing HTML.
I already include all the required files in the Head of the page on Squarespace.
Here's what I'm trying to implement along with the snippet of the code on how to implement it: https://snippet.dhtmlx.com/f25y0809?text=#kanban&mode=wide
Here's what the page shows: https://leadership.dev/experimental-kanban
Here's all the things that are broken that I noticed:
- The priority label is shown on top of the page instead of on the card
- The date picker component is shown broken with all the text wrapped vertically
- The date picker component should shown above the form field, as it does on the snippet page, this is to prevent the component to shown on the bottom of the page height
- The three dots menus on the tab header (ie. Backlog, In Progress, Completed) are now unclickable
Any help would be greatly appreciated.
EDIT:
My testing HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://leadership.dev/s/kanban.js"></script>
<link rel="stylesheet" href="https://leadership.dev/s/kanban.css" />
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap"
rel="stylesheet"
/>
<title>Document</title>
</head>
<body>
<div class="g-wrap">
<div id="toolbar"></div>
<!-- Kanban container -->
<div id="kanban"></div>
</div>
<script>
const { Kanban, Toolbar, defaultEditorShape, defaultCardShape } = kanban;
const columns = [
{
label: "Backlog",
id: "backlog",
},
{
label: "In progress",
id: "inprogress",
},
{
label: "Completed",
id: "completed",
},
];
const cards = [
{
id: 1,
label: "Integration with React",
description: "Some description",
progress: 25,
start_date: new Date("01/05/2021"),
end_date: new Date("01/15/2021"),
attached: [
{
id: 234,
url: "../assets/img-1.jpg",
previewURL: "../assets/img-1.jpg",
coverURL: "../assets/img-1.jpg",
name: "img-1.jpg",
isCover: true,
},
],
color: "#65D3B3",
users: [1, 2],
priority: 1,
column: "backlog",
},
];
const users = [
{
id: 1,
label: "Steve Smith",
path: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-1.jpg",
},
{
id: 2,
label: "Aaron Long",
path: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-2.jpg",
},
{
id: 3,
label: "Angela Allen",
path: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-3.jpg",
},
{
id: 4,
label: "Angela Long",
path: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-4.jpg",
},
{
id: 5,
label: "John Doe",
},
];
const cardShape = {
...defaultCardShape,
label: true,
description: true,
progress: true,
start_date: true,
end_date: true,
priority: true,
color: true,
cover: false,
attached: false,
users: {
show: true,
values: users,
},
};
const editorShape = [
...defaultEditorShape,
{
type: "multiselect",
key: "users",
label: "Users",
options: users,
},
];
new kanban.Kanban("#kanban", {
columns,
cards,
cardShape,
editorShape,
});
</script>
</body>
</html>
