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…
8 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 
2 Likes
Great input! Thanks 
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 ;
}
1 Like
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?
1 Like
I don’t know if I mentioned it anywhere else but I have managed -for some time- to get Titles in Simple Queries by enclosing them in an Advanced Query and adding the :title component:
#+BEGIN_QUERY
{:title [:h3 "Reminders for today"]
:query (and [[Reminder]] (property due-by <%today%> ) ) }
#+END_QUERY
So the Simple (Live) query:
{{query (and ( page [[Reminder]]) (property :due-by <%today%>))}}
gets enclosed in an Advanced query - triggered by typing <query (As opposed to /query) in Logseq:
#+BEGIN_QUERY
#+END_QUERY
Now you just add an opening and a closing bracket:
#+BEGIN_QUERY
{
}
#+END_QUERY
and add the :title [] and the :query each on a line.
Hope it helps. 
Thanks for this hack! I’ve searched for this a long time.
There is also a solution with a custom.js for a live query title:
Is it that difficult for Simple Queries to implement a Title (property?) to replace the “Live Query” Badge?
I’ve used this approach and it works quiet well. Two minor issues in combination with the hiding procedure had to be solved:
- after pressing the plus sign the selector drop down was not shown completely. Only the header with the input field was visible.
- the additional line
query-title:: "this my query title"was also visible below the query builder
With this custom.css it works for me:
/* Show Simple Query builder only at mouse hover */
.cp__query-builder > div > div.clauses-group {
height: 0;
overflow: hidden;
margin-bottom:0;
}
.cp__query-builder > div > div.clauses-group:hover {
opacity: 1;
overflow: visible; /* show entire dropdown filter selector */
height: auto;
}
.ls-block .custom-query>.th {
margin-bottom: auto;
height: auto;
}
.custom-query>.th:hover + .cp__query-builder > div > div.clauses-group {
height: auto ;
}
.cp__query-builder-filter {
display:block;
transition: opacity 0.3s, margin-top 0.3s; /* Add transitions for smooth effect */
}
/* Compacts live query header */
.custom-query > div:first-child {
border-radius: 0px;
padding: 2px 2px;
}
/* Shift Live Query container to the right a few pixels to prevent partly covered bullet */
.custom-query {
margin-left: 10px;
border-radius: 10px; /* just for improving appearance */
}
/* Increase the font for the Live Query Title Text */
.ls-block .ml-1 {
font-size: 1.5em;
font-weight: bold;
}
/* Workaround, to prevent the Live Query Title line shown a second time as a block below the query */
div.block-properties.rounded:has(div [data-ref*="query-title"]) {
display: none;
}
Hope it helps …
Guenther