Filter button and text not in one line

-- Joomla version -- : 3.10.6

Hi there,

I have created a filter and unfortunately have to realize that the filter buttons are not in line with the text. There is always a line break between button and text (front-end)

Hello,

the link is:
moellerstonecare-shop.de/produkte/hmk-reiniger.html

by the way:
Unfortunately, I also have the problem on this topic that I can assign a maximum of 3 specific selection values ​​for the products in one filter field (7 options are created). For all other filter fields, a variable assignment in the product setting is possible without any problems.

Hi there,

thanks for the information. As you described, I changed "display: block;" to "display: inline-block;", unfortunately without any change. The adjustment was made by me as you described in the Hika css area, as well as in the custom.css of the template.
I have captured in the respective css files:
.hikashop_filter_container {display: inline-block;}
But this brought no change. However, I was able to test that I was correct with the css setting filter_values_container, since the input boxes were gone when I entered .filter_values_container {display: none;}.

I also tested it with .hikashop_filter_checkbox {display: inline-block;} in both css, also no change.
Also the css width: 92%; helps not.

I also noticed that the display (filter front-end) in your screenshot differs from the browser view I posted. With me, there is a line break after the check box in different browsers, with you it is in one line.

Regarding the other error message (maximum of 3 specific selection values):
Sorry for this mix up. For this I will create a new topic in which the contents are also better explained.

It would be great if you could give me an alternative suggestion. Thanks in advance.

Hello Philippe,

Unfortunately, your instructions are very difficult for me to understand because I have to translate them into German and it is not always so understandable.

Currently I have removed the commands from the css template:

.filter_values_container {display: inline-block; margin-bottom: 5px; width: 80%;}
.hikashop_filter_checkbox { display: inline-block; margin-bottom: 5px; width: 80%;}

Perhaps you could tell me more precisely where the corresponding adjustments should be made in the hika-css or the template-css.

Thanks in advance.

Hallo "chli",

ich erlaube mir mal, mich hier einzuklinken, damit es einerseits sprachlich einfacher für dich ist, und andererseits, um dir die Lösung zu geben.

Die folgenden Zeilen setzt du am besten entweder ans Ende deines HikaShop Custom CSS oder ans Ende deines Template Custom CSS -- je nachdem, wie es dir leichter fällt:

.hikashop_filter_checkbox {
    display: block;
}
.hikashop_filter_checkbox > input[type="radio"], .hikashop_filter_checkbox > input[type="checkbox"] {
    margin: -2px 5px 0 0;
}
.hikashop_filter_checkbox > label {
    display: inline;
}

Hallo lousyfool,

vielen Dank für das "einmischen", Code funktioniert wunderbar.