Incorrect display when long category name takes two lines

Anonymous

#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

#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.

Anonymous

#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

#243674

This reply has been marked as private.

Anonymous

#243792

This reply has been marked as private.

Trevor

#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;
}

Anonymous

#243972

It works!! Many thanks! 😀

Trevor

#243981

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

[Author]

Posts