Bagas-Naufal Posted May 18, 2022 Posted May 18, 2022 (edited) 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> Edited May 18, 2022 by Bagas-Naufal
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment