Changing the position of html elements in Windows Forms WebBrowser

Question

Is it possible to change the position of one html element in the Windows Forms WebBrowser Control? I already have this:

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
    }

    private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
    {
        webBrowser1.Document.GetElementById("gpu_notice").Style = "display:none";
        webBrowser1.Document.GetElementById("header").OuterHtml = "";
        webBrowser1.Document.GetElementById("ads").OuterHtml = "";
        // move element "the_game" here
    }
}
}

The next step would be moving an element...

You can inject javascript which in turn can modify the DOM http://stackoverflow.com/questions/153748/how-to-inject-javascript-in-webbrowser-control or you can just load dynamically created DOM directly into the control. — Wobbles, Oct 18 '15 at 14:57
Where is `the_game` element defined? Odds are you can inject jquery to handle this if you include the jquery lib in your document and just use .append() and .detach() — Wobbles, Oct 18 '15 at 15:08
After you read the above link about injecting javascript and have included the jquery library into your document, the code in javascript is as easy as `jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')` — Wobbles, Oct 18 '15 at 15:27
edit your DOM virtually through string manipulation in c# then load that string into the browser control as needed using `webBrowser1.DocumentText = MYHTML`. not this will require browsing to blank before each DOM push — Wobbles, Oct 18 '15 at 16:05
@Wobbles Man, thanks for your help, but I didn't understand very well... — David Amaral, Oct 18 '15 at 16:09
what exactly are you trying to do, elaborate more, im not understanding why you want to move stuff around inside html in a control that is in a winform. sounds like if the content is that dynamic and your application is a true windows application that is should all just be handled in the winform itself and skip the browser control (its buggy and full of memory leaks anyway) — Wobbles, Oct 18 '15 at 16:16
right, well you need to do that somehow right? If you don't want to do it by injecting javascript to move it then you must re-serve the updated document and change it in the markup each time. If you don't want to explain what the purpose is any further then there really isn't anything more I can do to help. — Wobbles, Oct 18 '15 at 18:08

jhmt · Accepted Answer · 2015-10-20T01:46:43.387

1

You can move the_game element by adding position property to Style like this.

var game = webBrowser1.Document.GetElementById("the_game");            
game.Style += "position: absolute; top: 50px; right: 20px;";

I would recomend to read this and get how to use this.

edited Oct 20 '15 at 01:46

answered Oct 18 '15 at 20:55

jhmt

1,401
1
11
15

I can't change the Html of the page I'm using. – David Amaral Oct 19 '15 at 18:25
Then, get the element where you want to move the game element with get methods like `GetElementById()` and append the game's `OuterHtml`. `dest.OuterHtml += game.OuterHtml`. – jhmt Oct 19 '15 at 21:02
Thanks man, you helped me a lot! I have to put 0px in each top and right to allign the element to the center. Thanks! – David Amaral Oct 22 '15 at 14:02
Hey man, I know that's been a long, but can you help me on this question? http://stackoverflow.com/questions/33465484/adding-a-image-element-to-a-webbrowser-control-page-existing-site/33465690#33465690. – David Amaral Nov 01 '15 at 21:05
1

Hi @DavidAmaral I've posted my answer to that question. – jhmt Nov 01 '15 at 22:02

Changing the position of html elements in Windows Forms WebBrowser

1 Answers1

Linked