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


      
          let category;
          
          const service = api.container.lookup('service:discovery');
          category = service.get("category");
          const siteSettings = this.siteSettings;
          
          const isException = category && settings.hide_category_exceptions.split("|").includes(category.name);
          
          if(/^\/c\//.test(path)) {
              const hideMobile = !settings.show_mobile && this.site.mobileView;
              const subCat = !settings.show_subcategory_header && category.parentCategory;
              const noDesc = !settings.hide_if_no_category_description && !category.description_text;
              
              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	31	3305	July 26, 2024
Subcategories only show up after refresh and a few other issues Bug category-banners	14	194	July 6, 2023
Broken mobile styling of Header Categories Navbar Bug categories-navbar	7	322	December 29, 2023
Header Search Theme component official , header-search	42	5321	October 2, 2024
Upgrade has broken layout of category view Bug	8	1517	March 1, 2018

Category navigation wrong CSS on refresh

Related topics