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!

2 Likes

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…

4 Likes

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;
}
2 Likes

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:

1 Like

Great input! Thanks :pray:

I’ve got quite long queries:

Unfortunately this takes up a lot of space - even if not hovering:

Any chance to get rid of that space?
Thanks in advance!

Have you found a solutiojn for this?

Actually, based on @FlorianF first answer, you would just need to adapt the margin-top to a greater value.

It does not matter if you put a big number, it will stop at the “Live query” object. The animation will cover a longer distance though. But it solves your “white space” issue quite well.

@FlorianF’s solution worked out really well. My only gripe was the constant movement when hovering over the actual table, which caused the content to shift down.

This code makes it so that the reveal only happens when hovering over the space above the table from the left of “Live Query” to the right of the gear icon.

.cp__query-builder {
  height: 0;
  overflow: hidden;
}

.ls-block .custom-query>.th {
  margin-bottom:0;
}

.custom-query>.th:hover + .cp__query-builder {
  height: auto ;
}

@Elyas this was a massive improvement for me - thanks for sharing!

Wow! Amazing! Tanks guys!

I was having difficulty clicking the + sign to add new filters. i’m currently using the following:

.cp__query-builder>div>div.clauses-group {
  height: 0;
  overflow: hidden;
}

.ls-block .custom-query>.th {
  margin-bottom:0;
}

.custom-query>.th:hover + .cp__query-builder>div>div.clauses-group {
  height: auto ;
}
.cp__query-builder-filter{
  display:block;
}

hi @FlorianF , love the suggestion of giving queries titles – something i’m currently exploring. Being able to just collapse the visual query builder instead of the whole block is also something i added to my todo list.


2 Likes

this is definitely the right answer - just like links have labels, so should queries.

it’d bring more convergence to the functions. how difficult do you think this will be to implement/ how long will it take?