Welcome Guest Search | Active Topics | Sign In | Register

EO.WebBrowser - changing Scrollbar through CSS Options
jkelly
Posted: Thursday, March 26, 2015 9:52:43 AM
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
eo_support
Posted: Thursday, March 26, 2015 10:28:15 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,071
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!
jkelly
Posted: Thursday, March 26, 2015 2:55:39 PM
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?
eo_support
Posted: Thursday, March 26, 2015 3:10:36 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,071
Hi,

You must call it before the WebView is initialized. Try put it in your Program.cs before creating the main form.

Thanks!
jkelly
Posted: Thursday, March 26, 2015 3:47:38 PM
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());
}
eo_support
Posted: Thursday, March 26, 2015 5:06:48 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,071
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!
jkelly
Posted: Thursday, March 26, 2015 5:33:48 PM
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

eo_support
Posted: Thursday, March 26, 2015 7:29:34 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,071
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.aspx

Thanks!
jkelly
Posted: Friday, March 27, 2015 9:32:58 AM
Rank: Advanced Member
Groups: Member

Joined: 2/26/2015
Posts: 53
Ok, Test app has been sent.
eo_support
Posted: Friday, March 27, 2015 2:31:22 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,071
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!
jkelly
Posted: Friday, March 27, 2015 10:17:17 PM
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,
eo_support
Posted: Saturday, March 28, 2015 9:33:52 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,071
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!
jkelly
Posted: Wednesday, April 1, 2015 9:26:44 AM
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?
eo_support
Posted: Wednesday, April 1, 2015 2:22:23 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,071
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!
jkelly
Posted: Monday, April 6, 2015 1:35:57 PM
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.
eo_support
Posted: Tuesday, April 7, 2015 11:07:23 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,071
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!
jkelly
Posted: Wednesday, April 8, 2015 11:31:16 AM
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);
}
eo_support
Posted: Wednesday, April 8, 2015 2:23:42 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,071
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!
jkelly
Posted: Thursday, April 9, 2015 10:23:50 AM
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,
jkelly
Posted: Monday, April 13, 2015 10:04:50 AM
Rank: Advanced Member
Groups: Member

Joined: 2/26/2015
Posts: 53
Please disregard. I'm pursuing another way.

Thanks,


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.