Category navigation wrong CSS on refresh

Nacho_Caballero · August 11, 2022, 12:22pm

When I navigate to a category, it typically looks like this:

But I updated to beta9 today and even though the normal version shows up when I navigate to it, if I refresh the page, the boxes are not properly styled:

This happens because the .select-kit-header and the d-icon are losing their inline style property:

CleanShot 2022-08-11 at 14.24.17

I’m also seeing this error in the console, but I don’t know if it’s related (I’m on desktop and it also appears on the initial navigation, when things look normal): Uncaught (in promise) ReferenceError: Cannot access ‘hideMobile’ before initialization

awesomerobot · August 11, 2022, 4:44pm

Do you have the Discourse Tag Banners component installed? I recognize that ‘hideMobile’ error from that… if you update the component that should go away (if it doesn’t, let us know!).

Nacho_Caballero · August 11, 2022, 6:15pm

Hi Kris,

I don’t and all my components are updated. These are the ones I have:

Add Group CSS classes
Category Headers theme component
Custom Header Links
DiscoTOC
Mobile Category List Adjustments
Topic Thumbnails

awesomerobot · August 11, 2022, 6:17pm

Ah perhaps it’s this one, it has something similar here:

github.com

naidihr/discourse-category-headers/blob/master/common/header.html#L21


      
          const path = window.location.pathname;
          let category;
          
          
const controller = container.lookup('controller:navigation/category');
          category = controller.get("category");
          const siteSettings = Discourse.SiteSettings;
          
          
const isException = category && settings.hide_category_exceptions.split("|").includes(category.name);
          
          
if(/^\/c\//.test(path)) {
              const hideMobile = (!settings.show_mobile && this.site.mobileView) ? "true" : hideMobile;
              const subCat = (!settings.show_subcategory_header && category.parentCategory) ? "true" : subCat;
              const noDesc = (!settings.hide_if_no_category_description && !category.description_text) ? "true" : noDesc;
              
              if(!isException && !noDesc && !subCat && !hideMobile) {
                  $("body").addClass("category-header");
                  //list-controls
                  
                  function ifParentCategory(){
                    if (category.parentCategory) {
                        return h('a.parent-box-link',{"attributes" : {"href" : category.parentCategory.url}}, h('h1',category.parentCategory.name + ": "));

If you temporarily disable the category headers component, does that error go away? (and if it does, is the category dropdown issue fixed?)

Nacho_Caballero · August 11, 2022, 7:07pm

Yes, it goes away and the issue is fixed.

Topic		Replies	Views
Header Categories Navbar theme-component official , categories-navbar	19	2411	March 6, 2024
Subcategories only show up after refresh and a few other issues bug category-banners	14	135	July 6, 2023
Broken mobile styling of Header Categories Navbar bug categories-navbar	7	247	December 29, 2023
Upgrade has broken layout of category view bug	8	1429	March 1, 2018
Discourse Category Headers theme component theme-component	63	12839	January 11, 2024

Category navigation wrong CSS on refresh

Related Topics