Jump to content

Third-party library appears different on Squarespace page

Recommended Posts

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 by Bagas-Naufal
Link to comment
  • Replies 0
  • Views 172
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.