Script and Libary styling not working as expected

[unclebay143]

After installing the library as package or adding the script, some stylings seems to be broken, for instance the download menu icon (hr) are squeezed together and the pdf icon and label are not on the correct direction as shown below:

I'm currently resolving this with external css with !important

div hr {
  margin-bottom: 5px !important;
  background-color: #404040 !important;
}

.bft-form-field .bft-input input {
  color: #ccc;
  background-color: #171717 !important;
  border-color: #262626 !important;
}

.bft-dark .bft-family-menu [data-item] {
  display: flex;
  align-items: center;
  cursor: pointer;
}

While the approach above works, the download menu have distinct class name, the menu icon doesn't as it's using the regular div > hr (this might cause unintentional conflict later in the codebase if used elsewhere)

a. can the styling issue be fixed from the script and package? b. can a distinct class name be given the to menu hr wrapper?

The same thing is happening to the profile menu too as shown below:

Please LMK if I'm missing something else instead.

[ZornitsaPesheva]

Could you please isolate the issue in a simple code example? https://code.balkan.app/familytreejs/getting-started#JS

[unclebay143]

Could you please isolate the issue in a simple code example? https://code.balkan.app/familytreejs/getting-started#JS

I won't be able to isolate it using the shared playground as I can't specify the source of the script, the issue occurs when I use the downloaded script or the package.

Let me know if there's a way to still do this with the playground.

Steps to reproduce:

1. Setup a NextJS app a. Use the downloaded Script b. Use the package installation

That's all I did

[ZornitsaPesheva]

The online and downloaded versions should be the same. I just have tested.

1. Followed this: https://balkan.app/FamilyTreeJS/Docs/React#next
2. Downloaded from here: https://balkan.app/FamilyTreeJS/Download
3. Added familytree.js in the root project folder.
4. Imported it in the project:

Ran the project and this is the result:

Please try again with the latest download version. Please give us the result of these: console.log(OrgChart.VERSION) console.log(OrgChart.isTrial())

[unclebay143]

The online and downloaded versions should be the same. I just have tested ....

Interesting, I just took another debugging approach since you've set thing up as mine, and I think the only difference is I'm using Tailwind CSS (or did you?), so I commented out the globals.css and it gave the correct design:

So, it looks like something from tailwind css is messing with family tree js library styling

[unclebay143]

My tailwind configs are just the basics, commenting out all tailwind @... fixes the design conflict

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #ffffff;
  --foreground: #171717;
}

html {
  --scroll-behavior: smooth !important;
  scroll-behavior: smooth !important;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

tailwind.config.ts

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
    },
  },
  plugins: [],
};
export default config;

let me know if you need any other thing

[unclebay143]

Did more digging, indeed it some tailwind preset messing things up with the library.

svg

box-sizing

wdyt?

[ZornitsaPesheva]

Yes, it is the tailwind indeed. We haven't try it. Basically we don't use any libraries for CSS.

[unclebay143]

Gotcha!

I'd just keep a tree.css to override the styles again for familyTreeJS

Leaving the below for anyone who's facing the issue

tree.css

.bft-dark * {
  box-sizing: content-box;
}

.bft-dark svg {
  display: inline;
  vertical-align: baseline;
}

.bft-dark .bft-edit-form,
.bft-edit-form-header {
  border-radius: 0px !important;
}

.bft-dark div hr {
  margin-bottom: 5px !important;
  background-color: #404040 !important;
}

.bft-form-field .bft-input input {
  color: #ccc;
  background-color: #171717 !important;
  border-color: #262626 !important;
}

.bft-dark .bft-family-menu [data-item] {
  display: flex;
  align-items: center;
  cursor: pointer;
}

Thanks for your assistance @ZornitsaPesheva