How to set the size of webview panel #812
-
|
I am creating a webview panel which will be opened on a command trigger, I want to open that panel only in one-fourth part of editor. I tried below config, but it opens the panel in half of the editor: Is there a way to achieve this? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
Hi @amitjoshi438, In Visual Studio Code, you can open a webview panel in one of the available view columns using If you want to display a webview panel in one of the quarters of the editor, you'll need to use one of the existing view columns ( Here's a general outline of how you can do this:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.webview-container {
width: 50%; /* Set the width to 50% to occupy a quarter of the editor */
height: 50%; /* Set the height to 50% to occupy a quarter of the editor */
}
</style>
</head>
<body>
<div class="webview-container">
<!-- Your webview content goes here -->
</div>
</body>
</html>
By manually adjusting the size of your webview container using CSS, you can achieve the appearance of having a webview panel in one-fourth of the editor, even though there are only three built-in view columns. Hope this helps a bit. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @theReynald, Would there be any way or workaround to set the initial width of the IDE View panel (the outer panel of the Webview panel) when invoking createWebviewPanel? Currently, I’m looking for a way to set the initial width of the View panel (the outer container of the Webview panel) when invoking the createWebviewPanel method. With the following code, the initial width of the panel next to the editor takes up too much space: const panel = window.createWebviewPanel(
'componentPreviewPanel',
'Component Preview',
ViewColumn.Beside,
{
enableFindWidget: true,
enableScripts: true,
retainContextWhenHidden: true,
},
)Considered about using built-in commands like Would you happen to know if there’s a built-in approach or workaround to achieve this? Thanks! |
Beta Was this translation helpful? Give feedback.
Hi @amitjoshi438,
In Visual Studio Code, you can open a webview panel in one of the available view columns using
vscode.ViewColumn. However, there are only three available view columns:One,Two, andThree. These correspond to the left, center, and right columns of the editor respectively. There is no built-in view column value for a "fourth" of the editor.If you want to display a webview panel in one of the quarters of the editor, you'll need to use one of the existing view columns (
One,Two, orThree) and then manually resize your panel to occupy only a quarter of the available space.Here's a general outline of how you can do this:
Open your webview panel in one of the available col…