Display 3 Then a Clickable More

[lesliekirk]

Store has a filter with a couple dozen selections - is there a way to show the first 3 followed by a clickable "more"? I seem to recall at one point in time there was a scrollable overflow - is that gone (or was it a different ReadyTheme I saw that in?)

[Matt Zimmermann]

Hi Leslie,

I think that might have been something else, I don't have that feature built into Shadows.

[lesliekirk]

Hi Leslie,

I think that might have been something else, I don't have that feature built into Shadows.

What about adding a display 3 with a clickable "More"?

[Matt Zimmermann]

Hi Leslie,

You would need to do a count of all the facets in the group and then add in conditionals; similar to what is done with the primary navigation in Colossus.

[RTHOMASDESIGN]

Were you thinking that the "view more" would toggle the visibility of the additional items? E.g. user clicks "view more" and the remaining items would appear.

[Bruce - PhosphorMedia]

you could just set the container height to show three items, and the overflow to hidden, then have a [more] button or link that simply changes the overflow visible,

<div id="tunaFacet"> facets here </div>

<a id="more_tuna" class="btn button">More</a>



$('#more_tuna).click(function(e){ $('#more_tuna').css('overflow','auto'); });

[lesliekirk]

you could just set the container height to show three items, and the overflow to hidden, then have a [more] button or link that simply changes the overflow visible,

<div id="tunaFacet"> facets here </div>

<a id="more_tuna" class="btn button">More</a>



$('#more_tuna).click(function(e){ $('#more_tuna').css('overflow','auto'); });

Yes, but will it push the div/page longer? I'm seeing an issue with a facet list that is much longer than the page content. It's "bleeding" into the next facet and all the way down to the Global Footer. I'm thinking that the overflow unfortunately is going to need to be scrollable.

[Bruce - PhosphorMedia]

Just making the facet filter container a fixed height and scrollable should work as well, IF the container is always going to contain say, more than three. Although, just setting MAX-Height instead of height might cover cases where sometimes its just one, other two, and even more 200.

[RTHOMASDESIGN]

*edited*, haha I'm in the middle of eating lunch and Bruce beat me to it.

Yes, but will it push the div/page longer? I'm seeing an issue with a facet list that is much longer than the page content. It's "bleeding" into the next facet and all the way down to the Global Footer. I'm thinking that the overflow unfortunately is going to need to be scrollable.

Removing/disabling the max-height on:
.x-facet-set__list.x-collapsible-content__item[aria-hidden='false'] {
max-height: 50em;
}

Should fix the "bleeding" specific issue.
-Ryan

[lesliekirk]

*edited*, haha I'm in the middle of eating lunch and Bruce beat me to it.



Removing/disabling the max-height on:
.x-facet-set__list.x-collapsible-content__item[aria-hidden='false'] {
max-height: 50em;
}

Should fix the "bleeding" specific issue.
-Ryan

You would like it should have but I've still got the bleed issue. It's a branch, so I could share it.

[lesliekirk]

I changed it to this to stop the bleeding

x-facet-set__list.x-collapsible-content__item[aria-hidden="false"] {
max-height: 30em;
overflow-y: auto;
overflow-x: hidden;
}