I have a dataviewjs query on the top of a page I am writing and it keeps refreshing from time to time causing the page to jump.
Is there a way to specify and set a fixed callout height and we can then just scroll inside the callout to see the rest of the contents? Is this even possible to do?
Any guidance will also be helpful
Try this
.callout[data-callout="15"] {
max-height: 15vh;
overflow: scroll;
}
Alternatively, use height.
Add 15 as metadata, eg.
>[!callout|15]
Of course, you can change the height 15 to whatever value you want.
hey, where should I input the above code? I tried putting it inside a dataviewjs codeblock but it shows error “unexpected .”.
I also tried this but there isn’t any changes in height?.. I tried with different contents and with and without any dataviewjs codeblock inside the callout, I don’t see any changes…
here is the callout that I am running for example:
> [!TODO] Page in development
> Have to start writing. Literature review done.
>
> ```dataviewjs
> // get all unique outlinks without .png and current note
> let notes = dv.current().file.outlinks
> .map(x => x.path)
> .filter((value, index, self) => index === self.indexOf(value))
> .where(x => !x.endsWith("png") && x != dv.current().file.path)
> .array();
>
> // push current file path in the first index of notes
> notes.unshift(dv.current().file.path);
>
> // printing tasks from unique outlinks
> let ntasks = notes.map(x => dv.page(x).file.tasks.where(t => !t.completed));
> ntasks.map(x => x.length > 0 && dv.taskList(x));
> ```
Oh, to use this code, do following:
Open a text editor, paste my code and save your file as txt if your text editor is unable to save css files. Then rename your snippets file extension to css
Example:
Callout-fixed-size.css
Then follow this steps to install your snippet
oh got it it’s a css snipet, my bad >.<
Though wouldn’t that affect all the callouts? I wanted to only change certain callouts not all of them
No, for this reason you’ve to add 15 as your callout metadata. Please see how to enter callout metadata in my posts above.
Update (it worked but have a bit of question):
After adding the CSS snippet and activating it, typing > [!callout|15] didtn’t seem to work. But After referring to obsidian “customize callout” help page, I noticed that for the callout to work I have type the following instead
> [!15]
This worked.
But I don’t understand why the previous callout metadata you mentioned didn’t work here, Jopp? :\ Am I doing something wrong here?
Also is there a way that I can add this size over other types of callout? Like:
> [!Todo|15]
Thank you for the help by the way, Jopp!
This callout was just an example, just add your preferred callout name instead “callout” then add a pipe symbol followed by 15.
>[!todo|15]
This should work, otherwise I will check this issue for you later.
but it isn’t working :\
sorry if I wasn’t clear about that earlier. For some reason none of the > [!callout|15] or > [!todo|15] are working. only one that works is > [!15].
but it isn’t working :\
sorry if I wasn’t clear about that earlier. For some reason none of the > [!callout|15] or > [!todo|15] are working. only one that works is > [!15].
(sorry that the previous message wasn’t linked with yours)
The alt text / attributes syntax for all callouts would be:
.callout[data-callout-metadata="15"]
max-height: 15vh;
overflow: scroll;
}
Then you could write
> [!note|15] Title
> Contents
or
> [!example|15] Title
> Contents
and so on, to get the desired effect for any callout you add the |15 to.
Thank you! That worked!
By the way, is there a way to make the “15” a variable that the user can input and we can set that as the max-height? Eg:
.callout[data-callout-metadata=<variable>]
max-height: <variable>vh;
overflow: scroll;
}
Not that I know of. I think you’ll just have to exercise your copy + paste skills. 
.callout[data-callout-metadata="15"]
max-height: 15vh;
overflow: scroll;
}
.callout[data-callout-metadata="20"]
max-height: 20vh;
overflow: scroll;
}
.callout[data-callout-metadata="25"]
max-height: 25vh;
overflow: scroll;
}
Sounds fair 
Thank you again for the help! My notes are looking neat now without any page jumps! Alhamdulillah <3
Oops, my mistake. Ariehen added the missing part, thanks
I didn’t check my code but i was pretty sure to recall correctly. 
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.