Support Forums

The forums are closed and will be removed when we launch our new site.

Looking for support? You can access the support system via your account.

Forums Forums Search & Filter Pro Incorrect display when long category name takes two lines

Viewing 8 posts - 1 through 8 (of 8 total)
  • María Martín Medina
    #243457

    Hi,

    I’ve recently purchase the plugin and I’ve been configuring it. I’ve a problem I’m unable to fix via CSS but could be fixed easily by code, the problem is I’ve no access to modify the code (I could try, but I don’t want to modify plugin code).

    In image is better than 1000 words, so this is my problem:

    https://i.ibb.co/gM6GBry/break-line.jpg

    As you can see, subcategory 1.3 is “broken”, or not correctly shown. The shema of this part of the code is:

    <li class="sf-level-1 sf-item-41" data-sf-count="3" data-sf-depth="1">
                                    <input  class="sf-input-checkbox" type="checkbox" value="Subcategory-1.3" name="_sft_category[]" id="sf-input-62af0b4e987234b4af6c04a7189a46b2">
                                    <label class="sf-label-checkbox" for="sf-input-62af0b4e987234b4af6c04a7189a46b2">
                                        Subcategory 1.3 takes two lines inside the div
                                    </label>
                                </li>

    The problem is that we have the checkbox and then the label. It makes the text to be moved below the chekbox.

    I’ve found this simple fix, moving the checkbox INSIDE the label, instead of having firstly the checkbox and then the label:

    <li class="sf-level-1 sf-item-41" data-sf-count="3" data-sf-depth="1">  
                                    <label class="sf-label-checkbox" for="sf-input-62af0b4e987234b4af6c04a7189a46b2">   
                                        <input  class="sf-input-checkbox" type="checkbox" value="Subcategory-1.3" name="_sft_category[]" id="sf-input-62af0b4e987234b4af6c04a7189a46b2">                                
                                        Subcategory 1.3 takes two lines inside the div
                                    </label>
                                </li>

    As a result, the text is placed correctly at the right of the checkbox, not below:

    https://i.ibb.co/g304DKf/break-line-fix.jpg

    Obviously, I’ve achieved this in a HTML text test page (copying the source code of the web), but It must be done modifying the internal code of the plugin, and I don’t want to do this.

    Since I think the fix is easy to implement (and would resist updates -a manual fix from me wouldn’t), I ask PLEASE to implement it in an update.

    Regards and MANY thanks in advance

    Trevor Moderator
    #243483

    I think it can be fixed with CSS (I have done so before). Are you able to send me a live link/URL to your search page so I can take a look?

    From the screenshots you shared, it also appears that some adjustment to padding and/or margins on the ul elements might be needed.

    María Martín Medina
    #243646

    Hi Trevor,

    Using CSS the only way I’ve found to make the text appear on the right of the checkbox (instead of below) is applying to the label with the text the property “position:absolute;”, the problem in this approach is that, becouse of beign absolute position it does not respect the right limit of the div, and text takes only one line in this way:

    https://i.ibb.co/b33RgxK/absolute.png

    I have no problem in sending you the URL of the site, but I’d like it to be in a priate way, I guess if I check “Set as private reply” I’ll archieve this, am I right?

    Many thanks

    Trevor Moderator
    #243674
    This reply has been marked as private.
    María Martín Medina
    #243792
    This reply has been marked as private.
    Trevor Moderator
    #243959

    I think this works?

    .searchandfilter > ul > li[data-sf-field-input-type="checkbox"] li input.sf-input-checkbox {
      position: absolute;
      margin-top: 8px;
      width: 13px;
    }
    .searchandfilter > ul > li[data-sf-field-input-type="checkbox"] li label.sf-label-checkbox {
      padding-left: 24px;
    }
    María Martín Medina
    #243972

    It works!! Many thanks! 😀

    Trevor Moderator
    #243981

    Thanks for letting me know. I will close this thread for now.

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Incorrect display when long category name takes two lines’ is closed to new replies.