Is it possible to either resize plugin dialog iframe on command or have it automatically resize to fit content?
Right now I'm seeing it takes the size from the html set at the start and does not change its size when I modify the content. Am I doing something wrong?
The Dialog has a fixed width of 200, the height is automatically adjusted up to 670px.
I also hope for an option to adjust the width.
The dialog is supposed to resize automatically based on its content:
It will check the size of the element with ID "joplin-plugin-content", so if you change the content in such a way that this div grows in size, the dialog should resize too.
Is there really a max width of 200? I'll need to test I guess but I'm not seeing this limit anywhere in code. If there's such a hard-coded limit perhaps I could indeed add a way to change it.
The resize function does not seem to work, neither in vertical nor in horizontal direction:
import joplin from 'api';
joplin.plugins.register({
onStart: async function() {
const handle = await joplin.views.dialogs.create('testDialog');
setTimeout(async () => {
console.log(`set html 1`);
await joplin.views.dialogs.setHtml(handle, `
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
`);
joplin.views.dialogs.open(handle);
}, 10_000);
setTimeout(async () => {
console.log(`set html 2`);
await joplin.views.dialogs.setHtml(handle, `
1 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb*<br/>
2 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb*<br/>
3 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb*<br/>
4 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb*<br/>
5 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb*<br/>
6 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb*<br/>
7 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb*<br/>
8 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb*<br/>
9 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb*<br/>
10 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb*<br/>
11 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb*<br/>
12 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb*<br/>
13 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb*<br/>
14 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb*<br/>
15 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb*<br/>
16 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb*<br/>
17 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb*<br/>
18 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb*<br/>
19 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb*<br/>
20 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb*<br/>
`);
}, 20_000)
},
});
While we're at it, I think it'd be good to have an option to show an empty modal dialog without any buttons. I found a way, but it looks more like a hack to me:
await joplin.views.dialogs.setButtons(handle, []);
I'd rather have an officially supported solution for this. Would also be great if it could do things like close on escape press or on click outside the dialog window.
Have you tried to specify the size via css? For me it works with the following snippet:
#joplin-plugin-content {
min-width: 400px;
}
I've added a css file to the dialog with:
await joplin.views.dialogs.addScript(dialogEdit, './webview_dialog.css');
1 Like
Right, but if the resizing, which is supposed to work, does not work, there might be a bug somewhere.
I found that setting display: block; fixes vertical resize, but strangely not horizontal.
Looking with debugger at that function Laurent referenced above, I saw that getBoundingClientRect may return, say 200x200, but if I call the same method on iframe's children, for some of them getBoundingClientRect may return larger rect.
Yes, it seems that no matter what the dialog is always created with 200px width and doesn't change depending on the content.
The only way is to use benji300's css trick.