this is resolved, i was able to fix my issue

hello,

I have approved the share request, I was able to fix the styling issue, but what I'm having right now is they are not working, when I click the drop down it does not show the available options, I am using the HTML template with Data Table template.

Hi Ryann

Could you please enable the drive link share permission?

Thanks

Me too, I have the same problem with laravel livewire 9.2.8. need help

Im using metronic v9 tailwind latest build, ktui is not working not sure why.

for some reason these codes below located in app.js doesn't work, dropdowns loads but when you click them nothing happens.



// Metronic Core JavaScript functionality
document.addEventListener('DOMContentLoaded', function() {

setTimeout(() => {
// Initialize drawer functionality
initDrawers();

// Initialize menu functionality
initMenus();

// Initialize sticky headers
initStickyHeaders();

// Initialize modal functionality
initModals();
console.log('✅ KTMenu initialized');
}, 100);

});

// Drawer functionality
function initDrawers() {
const drawers = document.querySelectorAll('[data-kt-drawer]');

drawers.forEach(drawer => {
const toggles = document.querySelectorAll(`[data-kt-drawer-toggle="#${drawer.id}"]`);

toggles.forEach(toggle => {
toggle.addEventListener('click', function(e) {
e.preventDefault();
drawer.classList.toggle('hidden');
drawer.classList.toggle('block');
});
});
});
}

// Menu functionality
function initMenus() {
const menus = document.querySelectorAll('[data-kt-menu="true"]');

menus.forEach(menu => {
const items = menu.querySelectorAll('[data-kt-menu-item-toggle="dropdown"]');

items.forEach(item => {
const trigger = item.querySelector('[data-kt-menu-item-trigger="click"], [data-kt-menu-item-trigger="click|lg:hover"]');
const dropdown = item.querySelector('.kt-menu-dropdown');

if (trigger && dropdown) {
trigger.addEventListener('click', function(e) {
e.preventDefault();
dropdown.classList.toggle('hidden');
});
}
});
});
}

// Sticky header functionality
function initStickyHeaders() {
const stickyElements = document.querySelectorAll('[data-kt-sticky="true"]');

stickyElements.forEach(element => {
const stickyClass = element.getAttribute('data-kt-sticky-class') || 'kt-sticky';
const offset = parseInt(element.getAttribute('data-kt-sticky-offset')) || 0;

window.addEventListener('scroll', function() {
if (window.scrollY > offset) {
element.classList.add(...stickyClass.split(' '));
} else {
element.classList.remove(...stickyClass.split(' '));
}
});
});
}

// Modal functionality
function initModals() {
const modalToggles = document.querySelectorAll('[data-kt-modal-toggle]');

modalToggles.forEach(toggle => {
toggle.addEventListener('click', function(e) {
e.preventDefault();
const modalId = this.getAttribute('data-kt-modal-toggle');
const modal = document.querySelector(modalId);

if (modal) {
modal.classList.toggle('hidden');
modal.classList.toggle('flex');
}
});
});
}

// Close modals when clicking outside
document.addEventListener('click', function(e) {
const modals = document.querySelectorAll('.kt-modal');

modals.forEach(modal => {
if (e.target === modal) {
modal.classList.add('hidden');
modal.classList.remove('flex');
}
});
});

// Export functions for use in other modules
window.MetronicCore = {
initDrawers,
initMenus,
initStickyHeaders,
initModals
};


Ok so I was able to check what's happening, seems like metronic js is overriding tailwind classes, that's why when i add postcss.js both metronic theme and tailwind style clash making some elements like toggle buttons break. yes I'm using v9

Hi,

Can you please confirm your Metronic 9 Version ?

Also could you please send us your screenshots via support@keenthemes.com ? We will check it there.

Regards,
Sean

I added the user profile html template as my blade and modified it to work, now toggles does not render properly it looks like a broken checkbox its like css does not work

https://github.com/SummerRijndael/metronic-tailwind-laravel

well seems like I cannot attach screenshots here as well as google drive share links