Jump to content

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

Recommended Posts

Posted (edited)

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. 🙂 image.thumb.png.1ef1fde871461a2e6dca2adc73bfe78e.png

Edited by GregOvens
Link to comment
Posted (edited)
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. 🙂 image.thumb.png.1ef1fde871461a2e6dca2adc73bfe78e.png

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

image.thumb.png.f1699aded0c64ba8632efc1be01d5b95.png

Let me know how it works on your site

Edited by Beyondspace

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@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. 🙂 

 

Link to comment
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 - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
Posted (edited)
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

Edited by Beyondspace

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@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.


Snmkaobrazovky2024-05-11o23_45_34.thumb.png.6c353e06e294df706a8cad925077ad8a.pngSnmkaobrazovky2024-05-11o23_46_00.thumb.png.ff9c60061b222ccb716422db147fdde5.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.