![\"\"](\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/02\/scr_search_panel_horizontal_browser.png\")
<\/a>\n<\/p>\n
Doing so is fairly simple.<\/p>\n
1. Changes in Page Designer<\/h4>\n
Proceed to the List page in Page Designer. Add a new line to the section above the section with Add\/Delete buttons. Drag the search panel brick to that cell. <\/p>\n
Now we need to make sure that search controls appear horizontally and also that search panel takes the whole horizontal space. To do so we can use the following CSS code under Eidtor->Custom CSS. By default, all DIVs are displayed vertically, one under another so we needed to use float: left<\/strong> to make them align horizontally. More info about float property<\/a>.<\/p>\n It is worth mentioning that the following two tutorials helped us build this CSS. The search panel is displayed vertically on the left side of the List page by default. Sometimes you need to make it more prominent and place it above the grid, just like on the screenshot below.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,1,4,8],"tags":[],"_links":{"self":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/2120"}],"collection":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/comments?post=2120"}],"version-history":[{"count":7,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/2120\/revisions"}],"predecessor-version":[{"id":2198,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/2120\/revisions\/2198"}],"wp:attachment":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/media?parent=2120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/categories?post=2120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/tags?post=2120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<\/a><\/p>\n2. Custom CSS<\/h4>\n
\r\n.form-group.srchPanelRow.rnr-basic-search-field, div.srchPanelRow.form-group {\r\nfloat: left !important;\r\ndisplay: table;\r\nmargin: 5px;\r\n}\r\n\r\n<\/pre>\n
\nIntroduction to Custom CSS<\/a>
\nChoosing the correct CSS selector<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"