Настройка фильтра в InstantCMS

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО InstantCMS 1.X

#1 14 февраля 2023 в 10:10

Захотела настроить фильтр, опять же разбираюсь сама (проблема ниже). Мне нужно, что бы список был не выпадающий, а кнопками в строчку. Реализовала это следующим образом, в файле com_inshop_view.tpl строчку выпадающего списка сделала так:

<select id="numP" size="0" multiple name="filter[{$char.id}]" style="width:100%;background: #f8f6f0;">
                                                    <option value=""  {if !$filter[$char.id]}selected="selected"{/if}>{$LANG.SHOP_FILTER_ALL}</option>
                                                    {foreach key=vid item=val from=$char.values_arr}
                                                        <option  value="{$val}"   {if trim($filter[$char.id]) == trim($val)}selected="selected"{/if}>{$val}</option>
                                                    {/foreach}
                                                </select>

В файле css сделала так:

 #numP{
   border: none;
  overflow: hidden;
}
 
 
#numP::-moz-focus-inner {
  border: 0;
}
#numP:focus {
  outline: none;
}
#numP option{
    width: 250px;
    padding: 5px 0;
    text-align: center;
    margin: 0px 3px;
    display: inline-block;
    cursor: pointer;
    border: rgb(231 229 221) solid 1px;
    border-radius: 2px;
    color: rgb(75 83 82);
    background: #fff;
}
 
#numP option:checked {
        background: linear-gradient(#04a17d, #04a17d);
        background-color: #04a17d!important;
        color: white;
        border: 1px solid #04a17d;
        -webkit-text-fill-color: white;
    }

Всё работает. Но вот проблема, кнопки при изменении размера экрана не переносятся построчно(( а просто урезаются. Подскажите как сдедать, что бы option value начал переносится построчно. Если нужно, заплачу. Спасибо!

#2 14 февраля 2023 в 11:01

Подскажите как сдедать, что бы option value начал переносится построчно
Полина Емелина

Может где то (к строке) в CSS добавить свойство white-space с подбором нужного вам значения...

www.css-tricks.ru/articles/css/css-white-space

Или, как вариант, если вам подойдет, сделать кнопки шириной 100% примерно, как то так:

#numP option{
    display: block;
    width: 100%;
    padding: 5px 0;
    text-align: center;
    margin: 0px 3px;
    cursor: pointer;
    border: rgb(231 229 221) solid 1px;
    border-radius: 2px;
    color: rgb(75 83 82);
    background: #fff;
}

#3 14 февраля 2023 в 11:37

#numP{
border: none;
overflow: hidden;
}

Уберите overflow: hidden

Сегодня в 15:47

#4 14 февраля 2023 в 18:12

Первый вариант просто делает их друг за другом, второй вариант так и урезает по ширине

#5 14 февраля 2023 в 20:46

<style>
#numP{
border: none;
height:auto;
}
 
 
#numP::-moz-focus-inner {
  border: 0;
}
#numP:focus {
  outline: none;
}
#numP option{
    width: 250px;
    padding: 5px 0;
    text-align: center;
    margin: 0px 3px;
    display: block;
	float:left;
    cursor: pointer;
    border: rgb(231 229 221) solid 1px;
    border-radius: 2px;
    color: rgb(75 83 82);
    background: #fff;
}
 
#numP option:checked {
        background: linear-gradient(#04a17d, #04a17d);
        background-color: #04a17d!important;
        color: white;
        border: 1px solid #04a17d;
        -webkit-text-fill-color: white;
    }
</style>