Forums › Forums › Search & Filter Pro › UIKit Style is not loading after submit on Yootheme Pro

Tagged: ,

Viewing 10 posts - 1 through 10 (of 12 total)
1 2
  • Anonymous
    (Private)  April 24, 2020 at 1:24 am #241191

    Hello,

    I have installed Search and Filter and it works great with Yootheme Pro site builder, we manage to style it using UIKit https://getuikit.com/docs/form as Yootheme Pro based on UIKit front-end framework.

    But the issue is when we submit the form the style disappears, check here to check-in action [link redacted] you need to select the filter and click on the button to see what I mean.

    I had a chat with Yootheme team and here is what they told me. https://a.cl.ly/E0ubzAZe

    Kindly help me fix this issue.

    Best regards,
    Hadi

    Trevor
    (Private)  April 24, 2020 at 11:56 am #241239

    Let us assume that there is a function loaded by the UI Kit on document ready using JavaScript/jQuery. The style it adds would be removed by an Ajax refresh of the results section of the page, so the UI Kit function would need to be loaded again after our Ajax has finished. We have a trigger you can use to do this, but where I have shown a comment in the code snippet, you will need the author of UI Kit to help you replace that line with their code:

    <script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    // call your script or function here
  });
}(jQuery));</script>
    Anonymous
    (Private)  April 24, 2020 at 2:21 pm #241277

    Thank you, Trevor, that we did is this:
    SCRIPT

    jQuery(document).ready(function () {
            jQuery('.sf-input-select').addClass('uk-select uk-form-width-medium uk-form-large');
            jQuery('.sf-input-text').addClass('uk-input uk-form-width-medium uk-form-large');
            jQuery('.search-filter-reset').addClass('uk-button uk-button-danger uk-button-large');
        })

    CSS

    
.searchandfilter ul li {displa:inline!important;}
.searchandfilter ul li {
    display:inline!important;
    }
.sf-input-text, .sf-input-select, .search-filter-reset {
    margin: 10px;
}

    I tried what you told me but didn’t work, assume I am missing something.

    Trevor
    (Private)  April 24, 2020 at 2:31 pm #241281

    So, your new, additional script to add to the page would be:

    <script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    jQuery('.sf-input-select').addClass('uk-select uk-form-width-medium uk-form-large');
    jQuery('.sf-input-text').addClass('uk-input uk-form-width-medium uk-form-large');
    jQuery('.search-filter-reset').addClass('uk-button uk-button-danger uk-button-large');  });
}(jQuery));</script>

    Is that what you did?

    Anonymous
    (Private)  April 24, 2020 at 3:07 pm #241291
    This reply has been marked as private.
    Anonymous
    (Private)  April 24, 2020 at 3:12 pm #241293

    I noticed something, this style doesn’t load now. but it loads once it is submitted, it is like the opposite.

    Trevor
    (Private)  April 24, 2020 at 3:32 pm #241299

    You have both the old and new code in place I trust?

    Anonymous
    (Private)  April 24, 2020 at 3:37 pm #241302

    No at first I remove the old code, replace it with your code, then I tried to put back the old one as well. but didn’t work.

    Trevor
    (Private)  April 24, 2020 at 3:44 pm #241306

    Both are needed, but you cannot combine them, as one relates to document ready, and the other does not. They must be entirely separate.

    Anonymous
    (Private)  April 24, 2020 at 3:46 pm #241308

    It worked now, I guess it was my mistake, I had to remove the <script> tag, I guess no need in the Customs Code area.

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 12 total)
1 2