How to make Archive dropdown list wider if there is more than 4 items. Only for desktop visitors.

Hello all,

could you please help me to solve the issue with Archive dropdown list. 
I would like to make the list wider once the column (number of items in column) is bigger than 4.
So if there would be 12 items, list would have 3 columns (4 items in each).

Here is URL: https://www.slovakspots.com/bratislava-accommodation-1
Password: Ulicajekrasnydom

Thank you very much in advance. 🙂 

13 hours ago, GregOvens said:

Hello all,

could you please help me to solve the issue with Archive dropdown list. 
I would like to make the list wider once the column (number of items in column) is bigger than 4.
So if there would be 12 items, list would have 3 columns (4 items in each).

Here is URL: https://www.slovakspots.com/bratislava-accommodation-1
Password: Ulicajekrasnydom

Thank you very much in advance. 🙂 

Try adding to Custom Css

@media only screen and (min-width: 1024px) {
  .fe-block-yui_3_17_2_1_1714592268344_4598 {
    grid-area: 3 / 2 / 5 / 18;
  }
  .fe-block-yui_3_17_2_1_1714592268344_4598 .archive-dropdown-toggle-label {
    max-width: 300px;
    background: rgba(110, 110, 110, .05);
    border-radius: 1px;
    box-sizing: border-box;
  }
  .fe-block-yui_3_17_2_1_1714592268344_4598 .archive-block-setting-layout-dropdown.archive-block-wrapper  {
    max-width: unset;
    background: unset;
  }
}

My testing

Let me know how it works on your site

@Beyondspace In first place, thank you for your help!
Your approach is good, but I would rather inject code which could expand the dropwdown list based on number of items within dropdown. 

Would it be possible to create code which would be not linked to specific Archive? But it could be used for all archives within my website?

I am planning to have more blogs which would utilise same framework. 🙂 

 

5 hours ago, GregOvens said:

@Beyondspace In first place, thank you for your help!
Your approach is good, but I would rather inject code which could expand the dropwdown list based on number of items within dropdown. 

Would it be possible to create code which would be not linked to specific Archive? But it could be used for all archives within my website?

I am planning to have more blogs which would utilise same framework. 🙂 

 

My above code css is a basic start to work around with your requirement. Beside that, we need to implement javascript code to calculate the number of items within the dropdown and set the right style for each Archive Block.

What is your current plan? it is required with business Plan or higher to apply the Javascript codes

@Beyondspace I agree it's great initial solution, which could be used once I would fit the number of the categories ahead, to fit the size of expanded dropdown list. 

Yes currently our website is on Business plan.

9 hours ago, GregOvens said:

@Beyondspace I agree it's great initial solution, which could be used once I would fit the number of the categories ahead, to fit the size of expanded dropdown list. 

Yes currently our website is on Business plan.

After checking again, I change a little about my code to apply globally on your site

@media only screen and (min-width: 1024px) {
  .fe-block:has(.sqs-block-archive) {
    grid-area: 3 / 2 / 5 / 18;
  }

  .archive-dropdown-toggle-label {
    max-width: 300px;
    background: rgba(110, 110, 110, .05);
    border-radius: 1px;
    box-sizing: border-box;
  }

  .archive-group {
    width: 50%;
  }
  .archive-group-list {
    display: flex;
    flex-wrap: wrap;
  }
  .sqs-block-archive .archive-block-setting-layout-dropdown.archive-block-wrapper  {
    max-width: unset;
    background: unset;
  }
}

Replace it with my previous one and check again

If you want to implement the JS code automatically setting the number of columns based on the number of items, you can DM me so we can discuss much more detail

@Beyondspace thank you! I tried new version of your code.

But there is the issue with the wide of the each column within dropdown list as you can seen on screenshots below. If there is longer name, it cause the issue and name is split into the two rows.