Elements are not loading properly
Hello, I was working on with Laravel integration, I am using the git repo then modified it to display my contents, I was able to make it run but seems like some of the pages are not rendering properly. I dont see any console error and all assets are loaded status 200
here's a sample screenshot
Replies (10)
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.
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
