The PanelPanel CSS is now on top and the parent.. ________________________________ De : Stéphane V <sva...@gmail.com> Envoyé : vendredi 23 août 2024 08:06 À : users@wicket.apache.org <users@wicket.apache.org> Objet : RE: Sort the header items
Hello Bas, thank you for your reply. Sorry, but I don't understand. Below the resulting order after the first interaction on the ajax button adding the last PanelPanel CSS. My CSS and JS are always declared in the renderHead method of the component (pages and panels). I can understant the dependency order with an inheritage in Java, but about CSS and JS the reasons are different: the cascading from CSS is not rerspected because the parent is overiding the child and more specific declaration. <head> <!-- From the panels --> <link rel="stylesheet" type="text/css" href="../wicket/resource/org.ma.dashboard.components.overview.panels.OverviewPanel/OverviewPanel-ver-1724044527323.css"> <script type="text/javascript" src="../wicket/resource/org.ma.dashboard.components.overview.panels.OverviewPanel/OverviewPanel-ver-1724354734488.js"></script> <script type="text/javascript" src="../wicket/resource/org.apache.wicket.resource.JQueryResourceReference/jquery/jquery-3.7.1-ver-1722411717821.js"></script> <script type="text/javascript" src="../wicket/resource/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/res/js/wicket-ajax-jquery-ver-1722411717821.js"></script> <!-- From the abstract page --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="/dashboard/resources/theme/org.ma.dashboard.theme.preset/theme.css"> <script type="text/javascript" src="/dashboard/resources/theme/org.ma.dashboard.theme.preset/bootstrap.js"></script> <link rel="stylesheet" type="text/css" href="../wicket/resource/org.ma.dashboard.AbstractDashboardPage/AbstractDashboardPage-ver-1723739558518.css"> <link rel="stylesheet" type="text/css" href="../wicket/resource/org.ma.dashboard.pages.DashboardIndexPage/DashboardIndexPage-ver-1723824628472.css"> <!-- From Ajax after the first interaction --> <link rel="stylesheet" type="text/css" href="../wicket/resource/org.ma.dashboard.components.overview.panels.PanelPanel/PanelPanel-ver-1724353849200.css"></head> And now the result after the first refresh of the page: <head> <!-- From the panels --> <link rel="stylesheet" type="text/css" href="../wicket/resource/org.ma.dashboard.components.overview.panels.PanelPanel/PanelPanel-ver-1724353849200.css"></head> <link rel="stylesheet" type="text/css" href="../wicket/resource/org.ma.dashboard.components.overview.panels.OverviewPanel/OverviewPanel-ver-1724044527323.css"> <script type="text/javascript" src="../wicket/resource/org.ma.dashboard.components.overview.panels.OverviewPanel/OverviewPanel-ver-1724354734488.js"></script> <script type="text/javascript" src="../wicket/resource/org.apache.wicket.resource.JQueryResourceReference/jquery/jquery-3.7.1-ver-1722411717821.js"></script> <script type="text/javascript" src="../wicket/resource/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/res/js/wicket-ajax-jquery-ver-1722411717821.js"></script> <!-- From the abstract page --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="/dashboard/resources/theme/org.ma.dashboard.theme.preset/theme.css"> <script type="text/javascript" src="/dashboard/resources/theme/org.ma.dashboard.theme.preset/bootstrap.js"></script> <link rel="stylesheet" type="text/css" href="../wicket/resource/org.ma.dashboard.AbstractDashboardPage/AbstractDashboardPage-ver-1723739558518.css"> <link rel="stylesheet" type="text/css" href="../wicket/resource/org.ma.dashboard.pages.DashboardIndexPage/DashboardIndexPage-ver-1723824628472.css"> The PanelPanel CSS is not on top and the parent (OverviewPanel CSS) can override the CSS. For me, it's trange. And the theme (using Bootstrap) is overriding a style inside the PanelPanel.css and I have to add !important to be sure I can keep the style declared in PanelPanel.css. //Stef ________________________________ De : Bas Gooren <b...@iswd.nl> Envoyé : mardi 20 août 2024 21:41 À : users@wicket.apache.org <users@wicket.apache.org> Objet : Re: Sort the header items Hi Stephane, The easiest way is to ensure you define the dependencies on the child items. Then wicket will always render the parent (dependencies) before the children. Sounds to me like the reason for wanting things rendered in a certain order is precisely that: dependencies. For Ajax rendered items it shouldn’t matter: any new JavaScript and css will always be added and evaluated at the end. // Bas Verstuurd vanaf mijn iPhone > Op 20 aug 2024 om 19:49 heeft Stéphane V <sva...@gmail.com> het volgende > geschreven: > > Hello, > > I'm looking for a way to sort header items like CSS or JavaScript files. I'm > using renderHead() to add items to the head section, and I'm also utilizing > inheritance for my pages. The order is perfect for the pages: the parent > items come first, followed by the children items. > > However, the problem arises with panels. Their header items are created > before the page's items, whereas I would like them to appear after the page > items. Additionally, if I add a panel using Ajax, its header items are added > at the end. > > How can I control the order of these items? Specifically, I want the page > items to appear first, followed by the panel items. > > Thank you. --------------------------------------------------------------------- To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org For additional commands, e-mail: users-h...@wicket.apache.org
