How to Remove Border from Panel

[Doctor Jew]

So I've been messing around with making UIs using Vue.js in DHTML panels (thanks to the Chromium branch), but for some reason I can't seem to get the panel to fully cover the screen.

https://i.imgur.com/0pd39wk.png

I colored the background gray to show what I am talking about. The unfilled area is the gray border that panels have, none of the methods I've tried have worked to remove the edges.

Here is a small snippet of what I'm doing:

        local frame = vgui.Create("DFrame")
        frame:SetTitle("")
        frame:SetSize(ScrW(), ScrH())
        frame:Center()
        frame:ShowCloseButton(false)
        frame:SetDraggable(false)
        frame:SetSizable(false)
        frame:SetPaintShadow(true)
        frame:SetPaintBorderEnabled(false)
        frame:Dock(FILL)

        function frame:Paint() end

        local html = vgui.Create("DHTML", frame)
        html:DockMargin(0, 0, 0, 0)
        html:DockPadding(0, 0, 0, 0)
        html:Dock(FILL)
        html:OpenURL("http://localhost:8080/")
        html:SetAllowLua(true)
        html:SetPaintBorderEnabled(false)

[Jcw87]

Well a DFrame has a header and border that you aren't accounting for. Since you are overriding its Paint function, they aren't being rendered, but they still exist. I think what you want to do is create an entirely new vgui control. Take a look at any of the existing controls to get an idea of how to do this.

[Doctor Jew]

Didn't think that would work initially but I guess it does. Thanks. For future reference, this is all that is required for me to achieve the desired outcome:

        local html = vgui.Create("DHTML")
        html:SetSize(ScrW(), ScrH())
        html:OpenURL("http://localhost:8080/")
        html:SetAllowLua(true)

[Rubat]

html:DockMargin(0, 0, 0, 0)
html:DockPadding(0, 0, 0, 0)

You want to call this on the panel (Dframe) itself, not on the HTML panel.

Those methods affect the CHILDREN of the panel, not its parent.

[LearningLua]

So just a quick question since I'm still learning - how would you do this so it fit to every screen? Is there a way to getDockPadding based on the client's screen?

If so how would you add the DockPadding (that changes for everyone I'm assuming) to the ScrW() and ScrH()?

[Doctor Jew]

If you want to work with different screen sizes, the best thing you can do is work in percentages/fractions of the ScrW/ScrH. So say I wanted something to be 100px wide and my display is 1920px wide (on a 1920x1080 screen). Well 100px is 5.208% of 1920px. So instead of putting 100px, you would put either 0.05208 * ScrW() or 100 / 1920 * ScrW().

[LearningLua]

Well I didn't know that either! Thanks!

But what I was asking is... if you want a Derma Panel to cover the entirety of anyone's screen with the code you're using (with padding and margins) how would you get the value for every person's screen and correct the padding for them?

Basically I just foresee the padding and margins being different on every screen. So for one person the edge of the derma would be 20 pixels from the edge of their screen while another person it could be 15 pixels from the edge of their screen.

How would you calculate for that?

[Jcw87]

The OPs revised code already takes care of this (mostly). The only problem is that it won't resize properly if the resolution is changed while the panel still exists. In theory, setting the docking mode to FILL should take care of that

Margin and padding are values used to create spacing in and around the panel edges. If your aim is to fill the screen completely, just set these all to 0.

[LearningLua]

Thank you!