Filament•2w ago

styles not loading correctly

after installing https://filamentphp.com/plugins/jaocero-activity-timeline the styles did not load as expected (i did make a custom theme as well as adding plugin folder to tailwind config) but some strange things started to happen after i ran

npm run build

npm run build

like container now scrolls down while the aside menu does not, causing their header to misallign (picture). and still no luck with the package styles.

Filament

Activity Timeline by Jay-Are Ocero - Filament

Add timelines to custom pages or infolist entries effortlessly. Plus, it teams up smoothly with Spatie Activitylog for easy tracking.

13 Replies

shinyaOP•2w ago

- i did clear my browsers cache - what seem to be happening with the plugin is that it's classes are not being compiled by tailwind (which they should, attaching my tailwind config next)

import defaultTheme from 'tailwindcss/defaultTheme';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/jaocero/activity-timeline/resources/views/**/*.blade.php', // activity logs
        './storage/framework/views/*.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],
    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },
    plugins: [],
};

import defaultTheme from 'tailwindcss/defaultTheme';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/jaocero/activity-timeline/resources/views/**/*.blade.php', // activity logs
        './storage/framework/views/*.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],
    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },
    plugins: [],
};

Takashi•2w ago

Hmmm... I can help you Let’s break them down and troubleshoot together! It seems like there might be multiple issues at play

shinyaOP•2w ago

i kinda managed to get the plugin to work by adding the path to resources/css/filament/admin/tailwind.config.js but the header problem still presists

Takashi•2w ago

you mean, you can't import that file to your project?

shinyaOP•2w ago

no no its fixed but what i said about the misalignment of the headers of filament, is still a problem

shinyaOP•2w ago

this happens when i scroll

Takashi•2w ago

We need something to check to solve this prblem. 1. Update the layout to the provided structure. 2. Inspect styles and adjust sidebar and header widths/margins to ensure alignment. 3. Rebuild the Tailwind CSS file to confirm the plugin styles are correctly applied. 4. Test the scrolling behavior and alignment in your browser. If you can share the source code with me, I can sugest the efficient way to solve it I think "Check the Layout Structure" should be ahead of everything.

shinyaOP•2w ago

i did not change filament settings that much. just ran the make-theme command. removing the package completely/ rebuilding the assets did not change anything

Takashi•2w ago

is the project large in scale?

shinyaOP•2w ago

i just created it two days ago, tho due to NDA i cant share it in like github or sth

Takashi•2w ago

I see if you need any help, please feel free to contact me anytime!

awcodes•2w ago

Please follow the full docs on custom themes. You need to do some additional steps after the make theme command. Also that tailwind file is not the correct one. It doesn’t look anything like the theme tailwind file. Once you have that setup correctly, all you need to do is import the plugin’s style sheet into resources/css/filament/admin/theme.css and include the vendor views path into resources/css/filament/admin/tailwind.config.js Then run the build

shinyaOP•2w ago

yes my bad i pasted the wrong file here heres resources/css/filament/admin/tailwind.config.js

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './vendor/jaocero/activity-timeline/resources/views/**/*.blade.php', // activity logs
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './vendor/jaocero/activity-timeline/resources/views/**/*.blade.php', // activity logs
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

Gaming

Programming

styles not loading correctly