{"id":3050,"date":"2018-04-23T11:40:54","date_gmt":"2018-04-23T11:40:54","guid":{"rendered":"https:\/\/docs.contentviewspro.com\/?p=3050"},"modified":"2023-12-26T11:18:46","modified_gmt":"2023-12-26T11:18:46","password":"","slug":"live-filter-show-checkboxes-radio-buttons-rows-columns-instead-vertical-list","status":"publish","type":"docs","link":"https:\/\/contentviewspro.com\/documentation\/article\/live-filter-show-checkboxes-radio-buttons-rows-columns-instead-vertical-list\/","title":{"rendered":"Live Filter &#8211; show checkboxes and radio buttons horizontally in rows &#038; columns"},"content":{"rendered":"<p>To show Live Filter checkboxes and radio buttons in rows and columns (instead of vertical list), please add this code to <strong>Custom CSS<\/strong> field (the left textarea) in <a href=\"https:\/\/contentviewspro.com\/documentation\/wp-content\/uploads\/2018\/03\/Content-Views-_-Settings.png\">Content Views &gt;&gt; Settings<\/a> page:<\/p>\n<pre style=\"font-size: 13px;\">\/* Live Filter - show checkboxes &amp; radio buttons horizontally in rows, columns *\/\n.cvp-live-filter, .cvp-live-filter label {\n    display: block !important;\n}\n\n.cvp-live-filter .checkbox, .cvp-live-filter .radio {\n    display: inline-block;\n    width: 33%;\n}\n\n\/* on mobile *\/\n@media (max-width: 768px) {\n    .cvp-live-filter .checkbox, .cvp-live-filter .radio {\n        width: 50% !important;\n    }\n}\n<\/pre>\n<p>Please replace 33% by another value (for example: 25%) to change the number of columns.<\/p>\n<h2>Notice:<\/h2>\n<p>To use above styles for <strong>specific View only<\/strong>, please replace<\/p>\n<pre style=\"font-size: 13px;\">.cvp-live-filter\n<\/pre>\n<p>with<\/p>\n<pre style=\"font-size: 13px;\">.cvp-live-filter[data-sid=\"VIEW_ID\"]\n<\/pre>\n<p>(replace <strong>VIEW_ID<\/strong> with <a href=\"https:\/\/contentviewspro.com\/documentation\/article\/what-is-id-of-a-view\/\">ID of your View<\/a>)<\/p>\n<p>Best regards,<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To show Live Filter checkboxes and radio buttons in rows and columns (instead of vertical list), please add this code to Custom CSS field (the left textarea) in Content Views &gt;&gt; Settings page: \/* Live Filter &#8211; show checkboxes &amp; radio buttons horizontally in rows, columns *\/ .cvp-live-filter, .cvp-live-filter label { display: block !important; } &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/contentviewspro.com\/documentation\/article\/live-filter-show-checkboxes-radio-buttons-rows-columns-instead-vertical-list\/\"> <span class=\"screen-reader-text\">Live Filter &#8211; show checkboxes and radio buttons horizontally in rows &#038; columns<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"doc_category":[46],"doc_tag":[29],"class_list":["post-3050","docs","type-docs","status-publish","hentry","doc_category-live-filter","doc_tag-custom-css"],"year_month":"2026-09","word_count":110,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"admin1","author_nicename":"admin1","author_url":"https:\/\/contentviewspro.com\/documentation\/author\/admin1\/"},"doc_category_info":[{"term_name":"Live Filter (Frontend Search &amp; Filter)","term_url":"https:\/\/contentviewspro.com\/documentation\/cats\/live-filter\/"}],"doc_tag_info":[{"term_name":"custom CSS","term_url":"https:\/\/contentviewspro.com\/documentation\/tags\/custom-css\/"}],"_links":{"self":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/3050","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/comments?post=3050"}],"version-history":[{"count":7,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/3050\/revisions"}],"predecessor-version":[{"id":5271,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/docs\/3050\/revisions\/5271"}],"wp:attachment":[{"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/media?parent=3050"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/doc_category?post=3050"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/contentviewspro.com\/documentation\/wp-json\/wp\/v2\/doc_tag?post=3050"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}