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

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО InstantCMS 1.X
#1 14 февраля 2023 в 10:10

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

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

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

  1. #numP{
  2. border: none;
  3. overflow: hidden;
  4. }
  5.  
  6.  
  7. #numP::-moz-focus-inner {
  8. border: 0;
  9. }
  10. #numP:focus {
  11. outline: none;
  12. }
  13. #numP option{
  14. width: 250px;
  15. padding: 5px 0;
  16. text-align: center;
  17. margin: 0px 3px;
  18. display: inline-block;
  19. cursor: pointer;
  20. border: rgb(231 229 221) solid 1px;
  21. border-radius: 2px;
  22. color: rgb(75 83 82);
  23. background: #fff;
  24. }
  25.  
  26. #numP option:checked {
  27. background: linear-gradient(#04a17d, #04a17d);
  28. background-color: #04a17d!important;
  29. color: white;
  30. border: 1px solid #04a17d;
  31. -webkit-text-fill-color: white;
  32. }
  33.  

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

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

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

Полина Емелина

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

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

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

  1. #numP option{
  2. display: block;
  3. width: 100%;
  4. padding: 5px 0;
  5. text-align: center;
  6. margin: 0px 3px;
  7. cursor: pointer;
  8. border: rgb(231 229 221) solid 1px;
  9. border-radius: 2px;
  10. color: rgb(75 83 82);
  11. background: #fff;
  12. }
#3 14 февраля 2023 в 11:37

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

Уберите overflow: hidden 

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

Изображение

Изображение

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

#5 14 февраля 2023 в 20:46
  1. <style>
  2. #numP{
  3. border: none;
  4. height:auto;
  5. }
  6.  
  7.  
  8. #numP::-moz-focus-inner {
  9. border: 0;
  10. }
  11. #numP:focus {
  12. outline: none;
  13. }
  14. #numP option{
  15. width: 250px;
  16. padding: 5px 0;
  17. text-align: center;
  18. margin: 0px 3px;
  19. display: block;
  20. float:left;
  21. cursor: pointer;
  22. border: rgb(231 229 221) solid 1px;
  23. border-radius: 2px;
  24. color: rgb(75 83 82);
  25. background: #fff;
  26. }
  27.  
  28. #numP option:checked {
  29. background: linear-gradient(#04a17d, #04a17d);
  30. background-color: #04a17d!important;
  31. color: white;
  32. border: 1px solid #04a17d;
  33. -webkit-text-fill-color: white;
  34. }
  35. </style>

Попробуйте вместо inline использовать float

Широкий экран

Изображение

Свёрнутый экран

Изображение

#6 16 февраля 2023 в 16:23

Огромное спасибо! Помогло! Напишите в лс, если что-то должна!

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.