New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs

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




Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (10)


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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(