9 replies to this topic

[dearsashechka]

Куда надо залезть, чтобы таблица не выезжала за границы сайта, и поиск смотрелся адекватно?

Поиск - inline. Шаблон - protostar.

https://lh6.googleus...17-19-19-03.png

 

сайт tvoymotor-nn.ru

[Sliapy]

/media/zoo/applications/jbuniversal/assets/css/jbzoo.css

 

.jbzoo textarea, .jbzoo select, .jbzoo input[type="text"], .jbzoo input[type="password"] {

    border: 1px solid #D2D2D2;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.04) inset;
    color: #333333;
    cursor: text;
    height: auto;
    min-width: 100px;
    overflow: auto;
    padding: 2px;
    vertical-align: top;
}

Здесь задана минимальная ширина инпутов и списка. Но даже если Вы ее уберете - это не решит проблему - лейбл и текст внутри полей (плейсхолдер) просто не влезут в такую ширину.

 

 

Сделать нормальное отображение таблицы на таком разрешении тоже вряд ли удастся.

 

В любом случае, без довольно крепких знаний CSS здесь не обойтись.

[Kess]

Для того, чтобы не сжимались поля для поиска, можно добавить такой CSS:

.jbzoo-filter .filter-inline .filter-element {
    min-width: 150px;
}

Тогда они попадают на разные уровни при уменьшении экрана и сохранят нормальный вид.

 

 

С таблицей мало что можно сделать, разве что уменьшить паддинги для ячеек:

.jbzoo table.tablesorter thead tr th, .jbzoo table.tablesorter tfoot tr th {
    padding: 4px 2px !important;
}

[dearsashechka]

а как вообще запретить джумле переключать шаблон для мобильника? пусть всегда показывает полную версию сайта.

[Akela]

Отключить bootstrap через админку шаблона. Или через "unset", как написано например  здесь

 

Согласно вашего кода надо убирать файлы

"/media/jui/js/bootstrap.min.js" и

"/media/zoo/assets/js/responsive.js

[Cheren-dow]

Отключить bootstrap через админку шаблона. Или через "unset", как написано например  здесь

 

Согласно вашего кода надо убирать файлы

"/media/jui/js/bootstrap.min.js" и

"/media/zoo/assets/js/responsive.js

 

Отключение JS не решит проблему. Нужно удалять CSS код в файле template.css

http://tvoymotor-nn.ru/templates/protostar/css/template.css

Вам нужно удалять все медеа запросы.

@media (max-width: 767px)

@media (max-width: 480px)

@media (min-width: 768px) and (max-width: 979px)

а это запрос

@media (min-width: 1200px)

Можно оставить.

[ripcord]

Есть более другие варианты (-8

 

В jbzoo.filter.css изменяем как-то так:

 

 

 

добавив одну строку как на скрине выше:

display: inline-table;

И хотя одно на другое наезжать перестанет, это не лучший вариант.

 

Поэтому если передумаете выпиливать встроенный респонзив,

можно более лучше поступить, добавив в конец jbzoo.filter.css

что-нибудь такое:

@media (max-width: 768px) {
    
    .jbzoo-filter .filter-inline .filter-element {
        float: none;
        width: 100% !important;
        }
    }

[dearsashechka]

Спасибо! Все вроде красиво работает. Таблицу, я понимаю, лучше не трогать?

[ripcord]

Если за Вашу таблицу, я бы ее грохнул и выводил бы все дивами.

Их можно настроить по габаритам и по условиям отображения для межплатформенности и красоты дизайнинга.

В 21 веке табличная верстка может быть оправдана только необходимостью что-то сложно сортировать, но похоже, комплектный тэйблсортер не умеет работать со "сложными" типами данных,

Т.е. на Вашем ресурсе сейчас сортировка сами видите, и это так у всех тут )

[dearsashechka]

я не могу в дивы и css.

а сортировка вполне себе работает, разве что цены сортирует по артикулу. думаю, со временем это поправят.