Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use vscode1.91.0 for extension development and load the webview implemented by vue. Inline style does not take effect. #221461

Closed
Anthonywck opened this issue Jul 11, 2024 · 1 comment
Closed

Use vscode1.91.0 for extension development and load the webview implemented by vue. Inline style does not take effect. #221461

Anthonywck opened this issue Jul 11, 2024 · 1 comment
Assignees
@mjbvz
Labels
*duplicate Issue identified as a duplicate of another issue(s)

Comments

@Anthonywck
Copy link

Anthonywck commented Jul 11, 2024 •
edited
Loading

Type: Bug

I have a bug for vscode extension developers that needs to be fixed. When I was developing the vscode extension, when loading html through vscode's webview, the scrollbar style Settings on my web pages did not work after version 1.90.0, but the style of loading pages under version 1.8* did work.Thank you so much for your time.

1.Write a page with a scroll bar via vue or html, and set styles for this web page:

/* scrollbar */
    body *::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    }
    body *::-webkit-scrollbar-track {
    /* background: #fff;  * /
    border-radius: 2px;
    }
    body *::-webkit-scrollbar-thumb {
    /* background: rgb(205, 206, 206);  * /
    
    border-radius: 10px;
    }
    body *::-webkit-scrollbar-thumb:hover {
    filter: brightness(150%);
    /* background: var(--vscode-sideBar-background);  * /
    }

2. Create a extension project and use the webview component to load the web page;

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    context.subscriptions.push(
        vscode.commands.registerCommand('my-extension.openWebView', () => {
            const panel = vscode.window.createWebviewPanel(
                'webView', // Identifies the type of the webview. Used internally
                'My WebView', // Title of the panel displayed to the user
                vscode.ViewColumn.One, // Editor column to show the new webview panel in.
                {} // Webview options. More on these later.
            );

            // And set its HTML content
            panel.webview.html = getWebviewContent();
        })
    );
}

function getWebviewContent() {
    return `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Height Div with Scroll</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        .scrollable-div {
            height: 300px;
            overflow-y: auto;
            border: 1px solid #ccc;
            padding: 10px;
            box-sizing: border-box;
            white-space: pre-wrap; /* ensures that text wraps correctly */
        }
    </style>
</head>
<body>
    <div class="scrollable-div">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper arcu et nibh interdum, ut sagittis risus scelerisque. Aenean id quam in purus ultricies malesuada. Donec sit amet lacinia dui. Vivamus vehicula tristique metus, non pretium dui venenatis id. Sed sed ligula id orci tincidunt bibendum. Proin et dui non leo ultricies fermentum. Integer ut risus a ante accumsan efficitur et nec ligula. Suspendisse non nisi eget augue vehicula tincidunt. Pellentesque auctor diam in turpis varius, sit amet volutpat urna sollicitudin. Etiam non justo et eros vehicula scelerisque non non ligula. Integer blandit justo id tortor dapibus, nec fringilla risus fermentum. In hac habitasse platea dictumst. Suspendisse ut fringilla lacus. Nulla facilisi. Sed sit amet vehicula sem.
    </div>
</body>
</html>`;
}

// this method is called when your extension is deactivated
export function deactivate() {}

3. After packaging, launch the extension in vscode1.8* and 1.9* versions respectively. In the webview loading page, the vscode1.8* version is valid, but the vscode version after 1.90.0 is not valid.

  • This is a screenshot of the plugin launch in version 1.8*, the style Settings of scoller bar are in effect:
    image

  • This is a screenshot of the plugin launch in version 1.9*, the style Settings of scoller bar are not in effect:
    image

VS Code version: Code 1.91.0 (ea1445c, 2024-07-01T18:52:22.949Z)
OS version: Windows_NT x64 10.0.19045
Modes:

System Info
Item Value
CPUs Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz (8 x 2304)
GPU Status 2d_canvas: enabled
canvas_oop_rasterization: enabled_on
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
multiple_raster_threads: enabled_on
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
skia_graphite: disabled_off
video_decode: enabled
video_encode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled
webgpu: enabled
Load (avg) undefined
Memory (System) 15.78GB (2.71GB free)
Process Argv --crash-reporter-id bda4b216-3e53-4a37-b133-9812cc183beb
Screen Reader no
VM 0%
Extensions (20)
Extension Author (truncated) Version
tsl-problem-matcher amo 0.6.2
vscode-eslint dba 3.0.10
prettier-vscode esb 10.4.0
LightCode hun 1.1.1
vue jcb 0.1.5
vscode-language-pack-zh-hans MS- 1.91.2024071009
debugpy ms- 2024.8.0
python ms- 2024.10.0
vscode-pylance ms- 2024.7.1
vscode-typescript-next ms- 5.6.20240710
java red 1.32.0
intellicode-api-usage-examples Vis 0.2.8
vscodeintellicode Vis 1.3.1
vscode-java-debug vsc 0.58.0
vscode-java-dependency vsc 0.23.7
vscode-java-pack vsc 0.27.0
vscode-java-test vsc 0.41.1
vscode-maven vsc 0.44.0
volar Vue 2.0.10
project-tree zhu 0.3.0
A/B Experiments 
vsliv368:30146709
vspor879:30202332
vspor708:30202333
vspor363:30204092
vscorecescf:30445987
vscod805:30301674
binariesv615:30325510
vsaa593:30376534
py29gd2263:31024239
c4g48928:30535728
azure-dev_surveyone:30548225
vscrpc:30673769
962ge761:30959799
pythongtdpath:30769146
pythonnoceb:30805159
asynctok:30898717
pythonregdiag2:30936856
pythonmypyd1:30879173
h48ei257:31000450
pythontbext0:30879054
dsvsc016:30899300
dsvsc017:30899301
dsvsc018:30899302
cppperfnew:31000557
dsvsc020:30976470
pythonait:31006305
dsvsc021:30996838
f3je6385:31013174
pythoncenvpt:31062603
a69g1124:31058053
dvdeprecation:31068756
dwnewjupytercf:31046870
2f103344:31071589
legacy_priority:31082724
pythonrstrctxtcf:31093870
@Anthonywck Anthonywck changed the title Use vscode1.91.0(user setup) for plug-in development and load the webview implemented by vue. Inline style does not take effect. Use vscode1.91.0(user setup) for extension development and load the webview implemented by vue. Inline style does not take effect. Jul 11, 2024
@Anthonywck Anthonywck changed the title Use vscode1.91.0(user setup) for extension development and load the webview implemented by vue. Inline style does not take effect. Use vscode1.91.0 for extension development and load the webview implemented by vue. Inline style does not take effect. Jul 11, 2024
@mjbvz
Copy link
Collaborator

mjbvz commented Jul 11, 2024

Duplicate of #213045

@mjbvz mjbvz marked this as a duplicate of #213045 Jul 11, 2024
@mjbvz mjbvz closed this as completed Jul 11, 2024
@mjbvz mjbvz added the *duplicate Issue identified as a duplicate of another issue(s) label Jul 11, 2024
@vs-code-engineering vs-code-engineering bot locked and limited conversation to collaborators Aug 25, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@mjbvz mjbvz

Labels
*duplicate Issue identified as a duplicate of another issue(s)
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mjbvz @Anthonywck