Updating Results Header Styling

Search Best Practices - Search Front-End
2

Hey Scott,

The border looks different between the two verticals because the products vertical is using the new .hbs pages layout from theme v1.14 when we introduced collapsible filters, while videos and FAQs uses an older page layout. The HTML classes are structured a bit differently and so even though there is a border on .yxt-ResultsHeader in both layouts, the new layout border does not enclose the results count as well. There are a couple alternative solutions:

1. Remove the border completely. We recommend this approach as it is not included in our default UI. You can add the following to answers.scss:

.yxt-Results {
    border: none;
}

2. To keep the border, update all .hbs pages files to use the new layout. This keeps CSS page layout and styling consistent across verticals (you’ll notice there are small differences between the two page layouts, for example with spacing). Follow the collapsible filters Community post for how to update the files. Then update CSS to move the border to the right container:

.yxt-Results {
    border: none;
}

.AnswersVerticalGrid .Answers-resultsWrapper {
  padding-top: 0;
  margin-top: calc(var(--yxt-base-spacing) * 1.5);
  border: 0.0625rem solid #e9e9e9;
}