1

I want to show my items in pagelist component horizontally in sets of 3. the default behaviour shows item in vertical list. So in order to show items horizontally, i need to apply bootstrap classes "col-xs-12 col-sm-4 col-md-4 col-lg-4" to "li" items. I tried adding classes through rendering variants and to pagelist component in exeperience editor, the classes are getting added to its parent div.

  • Can you add some screenshots where it is shown where you have added classes? I think that you are adding classes to Default or root node in rendering variant not to the correct location. – Peter Procházka Feb 9 at 21:46
0

As far as I know it isn't possible to add those classes via html without cloning the component and modifying the view. However you can achieve the same result using bootstrap mixins and functions in SCSS, with the bootstrap .scss files imported into the theme directory. For example you can add the following to your theme/scss/variants/search-results directory:

@import "base/bootstrap/_functions";
@import "base/bootstrap/_variables";
@import "base/bootstrap/_mixins";
&.search-result-product {
    ul {
        @include make-row();
    }
    li {
        @include media-breakpoint-up(sm) {
            @include make-col(12);
        }
        @include media-breakpoint-up(md) {
            @include make-col(6);
        }
        @include media-breakpoint-up(lg) {
            @include make-col(3);
        }
        list-style: none;
        position: relative;
    }
}

Then add a rendering variant to the search results and set a css class of search-result-product.

More info about working with SXA themes in Creative Exchange here.

  • ...thank you for the reply. The first approach you suggested is working !! for the second approach, if i add a new scss file in theme folder, will sitecore compile it automatically ? because i created a new scss files with changes and after using the class name to pagelist component the change is not reflecting – Fahmida Feb 11 at 6:09
  • Hi @Fahmida sorry, some assumed knowledge about SXA Creative Exchange. I've added a link to my answer as to how to change the .scss files. – Mark Gibbons Feb 11 at 6:14
  • You can achieve styling using CSS. After adding the style class in component container and custom rendering variant as per your need. You can achieve desired outcome. – Amit Kumar Feb 11 at 19:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.