How to hide query text in preview for embedded search?

Obsidian 0.12.4
How to hide query text in preview for embedded search?

Things I have tried

```query
task:"" path:("Daily Notes/2021-06-15" OR "Zettelkasten Notes/"20210615)
```

What I’m trying to do

I have an embedded query that displays tasks. The query is working, but I would like the query text to be hidden on the preview while keep the results to preserve space on the page.

In the image below, I do not need to see the query as it adds no value and takes up space.

Can the query be hidden?
Can the query be collapsed?

3 Likes

I use the following CSS in an Embedded Searches snippet:

/* Embedded searches */
.internal-query {
    background-color: var(--background-tertiary);
    border-radius: 5px;
}

.markdown-preview-view .internal-query.is-embed .internal-query-header {
    justify-content: center;
}

/* Hide the query text */
.internal-query-header-title {
    display: none;
}

/* Force embedded searches to fill the height of their results, rather than be scrollable */
.markdown-preview-view .internal-query.is-embed .search-results-children {
    height: fit-content;
    min-height: fit-content;
    max-height: none;
}

Take from it what you will!

1 Like

The css for hiding the query text works!

How do i hide the magnifying class icon?

I’m not sure offhand, but you can figure out how to change every aspect of the app by inspecting it in the Developer Tools.

https://help.obsidian.md/Advanced+topics/Customizing+CSS

Thanks to @ryanjamurphy for the pointers. My solution is below.

/* Hide Embedded search header text and icon */

/* Hide the query header text */
.internal-query-header-title {
    display: none;
}

/* Hide the query header icon */
.markdown-preview-view .internal-query.is-embed .internal-query-header-icon {
    display: none;
}
2 Likes

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.