|
Rank: Advanced Member Groups: Member
Joined: 2/26/2015 Posts: 53
|
So I have search through the forum and documentation, as well as the Webkit CSS link page, but still can seem to implement changing the width of the scrollbar.
Here's a snippet of what i have so far:
BrowserOptions BrowserOpt = new BrowserOptions(); BrowserOpt.UserStyleSheet = "[CSS] ::-webkit-scrollbar { width: 20px; }"; Runtime.SetDefaultOptions(BrowserOpt);
Is this correct? It doesn't change the scrollbar at all.
Any help would be appreciated. Thx
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,196
|
Hi, You are very close. Try something like this:
Code: C#
BrowserOpt.UserStyleSheet = @"
::-webkit-scrollbar{
width: 30px;
}
::-webkit-scrollbar-track{
background: black;
}
::-webkit-scrollbar-thumb{
background-color: gray;
}
";
Points of interests: 1. You do not need "[CSS]" in the string you passed to BrowserOptions.UserStyleSheet. That is just the header in the documentation that indicates the following segment is CSS code. 2. You can not just have -webkit-scrollbar rule. You must also at least have -webkit-scrollbar-track and -webkit-scrollbar-thumb. The reason is as long as you customize the scrollbar, it won't use it's default scroll bar. So everything has to be customized, not just the scrollbar width; Hope this helps. Please feel free to let us know if you still have any questions. Thanks!
|
|
Rank: Advanced Member Groups: Member
Joined: 2/26/2015 Posts: 53
|
So i copied and pasted the CSS string but still not changing the scrollbar. I put the code in the form instance under InitializeComponent() In this form is the webview.
Is there a specific place to put this CSS code?
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,196
|
Hi,
You must call it before the WebView is initialized. Try put it in your Program.cs before creating the main form.
Thanks!
|
|
Rank: Advanced Member Groups: Member
Joined: 2/26/2015 Posts: 53
|
Still no luck. The scrollbar CSS settings work great in the Webkit demo link, but can't seem to get it to work in my app.
I have the below code in Program class static void Main() { //set css scrollbar BrowserOptions BrowserOpt = new BrowserOptions(); BrowserOpt.UserStyleSheet = @" ::-webkit-scrollbar{ width: 30px; }
::-webkit-scrollbar-track{ background: black; }
::-webkit-scrollbar-thumb{ background-color: gray; } ";
Runtime.SetDefaultOptions(BrowserOpt); Application.EnableVisualStyles(); Application.SetCompatibleTextRenderingDefault(false); Application.Run(new frmMain()); }
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,196
|
Hi,
We tested the code with the latest build and it seems to work fine. Can you check if you have the latest build?
Thanks!
|
|
Rank: Advanced Member Groups: Member
Joined: 2/26/2015 Posts: 53
|
Strange. So I updated to the latest EO.WebBrowser.dll (V.3.0.112) And started with a brand new .NET solution to make sure its not something else causing the issue. I still can't get the CSS to work.
Here is what i'm running: EO.WebBrowser.dll (V.3.0.112) VS 2010 .NET 4.0 Winform
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,196
|
I can't think of any reason why it doesn't work. Can you try to isolate the problem into a test app and then send us the test app? See here for instructions: http://www.essentialobjects.com/forum/test_project.aspxThanks!
|
|
Rank: Advanced Member Groups: Member
Joined: 2/26/2015 Posts: 53
|
Ok, Test app has been sent.
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,196
|
Hi,
We have looked into the test app you sent to us. The reason that it doesn't work for you is because the page you are trying to load also has CSS rules that customizes the scrollbars. The rule that you set with BrowserOptions are the initial rules, so if the page has its own rules with exactly the same name, it will be overridden by whatever set in the page.
Thanks!
|
|
Rank: Advanced Member Groups: Member
Joined: 2/26/2015 Posts: 53
|
Ok, makes sense. So where are the pages own CSS Rules set? It must be default when adding the webcontrol/webview, but i can't seem to find it.
Thanks,
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,196
|
Hi, If you view page source, you will see this line (the numbers in the href maybe different for you):
Code: HTML/ASPX
<link rel='stylesheet' type='text/css' href='/wro/cdad68aea14062f026639214fbe3a750/HEAD-PartyCity.css?minimize=true'>
Open that link and search for webkit-scrollbar and you should see they customized the scrollbars with these rules. Thanks!
|
|
Rank: Advanced Member Groups: Member
Joined: 2/26/2015 Posts: 53
|
Ok, i understand now. So if the page is setting it with the exact same name, I won't be able to override the scrollbar through code. Correct?
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,196
|
Hi,
That is correct. Whatever value you specify are the default value. The page can always override it by redefining the same CSS rule.
Thanks!
|
|
Rank: Advanced Member Groups: Member
Joined: 2/26/2015 Posts: 53
|
A followup question...
IS it possible to get the height of the page once its loaded? I'm trying to use a custom scrollbar and adjust the scrollbar length to the webpage height.
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,196
|
Hi,
You will need to do that with JavaScript. EO.WebBrowser does not provide any interface for you to get the height of the page directly, but it provides EvalScript method for you to run JavaScript code in the page.
Thanks!
|
|
Rank: Advanced Member Groups: Member
Joined: 2/26/2015 Posts: 53
|
Another option that i'm considering to replace the scrollbar since changing it via the CSS is not an option. The below code is possible using .NET's included webBrowser control, but not sure if EO.WebBrowser exposes .Document.Body
I want to add a VScrollBar control and bind it to the Document Body of the browser. Is this possible in EO?
private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e) { this.vScrollBar1.Minimum = 0; Rectangle r = this.webBrowser1.Document.Body.ScrollRectangle; this.vScrollBar1.Maximum = r.Height; }
Private void vScrollBar1_Scroll (object sender, ScrollEventArgs e) { webBrowser1.Document.Window.ScrollTo (0, vScrollBar1.Value); }
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,196
|
Hi,
There is no way for you to do that in the current version because there is no way to completely hide the built-in scrollbars. We will see if we can add this in a future version.
Thanks!
|
|
Rank: Advanced Member Groups: Member
Joined: 2/26/2015 Posts: 53
|
Ok thanks for the feedback.
So i refuse to give up on this, or try to find a work around in the meantime.
I have an idea, to insert the CSS rule via javascript AFTER the page is loaded in order to override the default scrollbar CSS.
I read through the EO Online Doc, and know you can execute Javascript using the JSObject, etc.
Can you tell me how to execute these two lines of javascript using EvalScript? var sheet = document.styleSheets[0]; sheet.insertRule("::-webkit-scrollbar{ width: 30px;}");
thanks,
|
|
Rank: Advanced Member Groups: Member
Joined: 2/26/2015 Posts: 53
|
Please disregard. I'm pursuing another way.
Thanks,
|
|