SortOptions and Facets Side-by-Side

Is it possible to get the sortOptions component and facets to be displayed side-by-side as opposed to stacked?

This is how it looks now:

I tried targeting the relevant components via CSS to get float left/right but it didn’t seem to change anything:

Screenshot_2

Thanks!

Hi Ariana,

I’d recommend using flex for this. You can do that by adding a div that wraps the sorting and facets components and setting it to display flex. For example I’ve called it Answers-searchOptions in these screenshots.

providers.html.hbs:
image

answers.scss:
image

That makes it look like this:
image

You’ll probably want to tweak the padding on the components so they’re more aligned, and you can use width or flex-basis to make the components take up different amounts of space if you want.

Hope that’s helpful!

3 Likes