Hiding the Query Builder

Hi there,

Is there any way for me to get rid of the query builder selections from my table view? (see image)

It’s taking up a ridiculous amount of vertical space and detracts from the table?

Thanks in advance!

Could put into file custom.css something like this:

.cp__query-builder {
  display: none;

I have this setup:

.cp__query-builder-filter {
  opacity: 0;
  margin-top: -30px; /* Apply negative margin to bring it up */
  transition: opacity 0.3s, margin-top 0.3s; /* Add transitions for smooth effect */

.custom-query:hover .cp__query-builder-filter {
  opacity: 1;
  margin-top: 0; /* Reset margin to its original value */

and it’s working fine. It hides the builder and shows it on hover. I would so much like to be able to set titles for simple queries and, instead of the “Live query” text, to have the query title but I am not sure that is possible with css… perhaps as a Feature Request…


That’s a nice one!

I also added this to minimze the whitespace around the query header and to compact tables:

/* Compact tables */
.whitespace-nowrap {
  padding-top: 1px;
  padding-right: 1px;
  padding-bottom: 1px;
  padding-left: 1px;
/* Compcts live query header */
.custom-query > div:first-child {
    border-radius: 5px;
    padding: 2px 2px;
1 Like

Thanks so much for this! It works great.

Used this and it’s smartened up my tables - thanks so much!

I have also added:

.table-auto {
  margin-top: 0;
  margin-bottom: 0;

… thought of posting it here :slight_smile: