(CefSharp Web Browser) The formatting changed with Truncated Words

[WEI TZE]

Background:

https://docs.telerik.com/devtools/winforms/knowledge-base/how-to-embed-chrome-browser-in-a-winforms-application

Refer to the documentation above to embed chromium browser in WinForm.

 

Problem statement:

Whenever I embed the CefSharp Web Browser, the formatting changed. 

Observation - With embedded CefSharp Web Browser: 

• Window State set to Maximized but it won't start with Maximized state.
• The formatting of the words seems changed - truncated with '...'

using CefSharp;
using CefSharp.WinForms;
 
private ChromiumWebBrowser browser = new ChromiumWebBrowser();


 private void frmBulletin_Load(object sender, EventArgs e)
        {
            Cef.Initialize(new CefSettings());
            pnlBrowser.Controls.Add(browser);
            browser.Dock = DockStyle.Fill;
        }

Screen shot: Without embedded CefSharp Web Browser (Maximized - full screen): 

 

Screen shot: With embedded CefSharp Web Browser (around 3/4 of the screen only, the words truncated with '...'): 

[Dinko | Tech Support Engineer]

Hi WEI TZE,

I appreciate the provided project and details.

I tried to run the project, but it was using an outdated version of our controls and the third-party library. I have updated the project and assemblies to the latest versions since a vulnerability was reported in the old version. Our assemblies were updated to their latest version and only the CefSharp.WinForms package is added to the project.

Then I have modified the code a little bit as it was throwing an error while initizaliting the browser:

private ChromiumWebBrowser browser;
public frmBulletinNew()
{
    InitializeComponent();
    InitBrowser();
}
public void InitBrowser()
{
    Cef.Initialize(new CefSettings());
    browser = new ChromiumWebBrowser("www.google.com");
    pnlBrowser.Controls.Add(browser);
    browser.Dock = DockStyle.Fill;
}

When I run the project, the form is initially shown in maximized state. I could not observe this behavior so far. 

What I think is happening is that the form is shown on a monitor with HDPI. My guess is that the scaling option of the monitor is set to 150%. What you can do first is to make the application DPI-aware. You can follow the approach in the DPI Support -> App.Config File section. What I notice is that the AutoSizeScale property of some of the panels is set. Avoid setting this property as it will interfere with the scaling logic of the controls. Also, the Anchor properties of some controls are set. Consider using TableLayoutPanel and place each control (label, textbox) in a different cell with Dock set to Fill. This way they will take all the available sizes given by the parent TableLayoutPanel. This will improve the scaling logic. You can check the HDPI Tips and Tricks help article for more information.

I am attaching the updated version of your project. You can try testing it. Keep in mind that the assemblies in the project are updated to their latest version. With the Q1 2025 release of our controls, we have a new licensing mechanism. You can read more about it in the Setting Up Your Telerik UI for WinForms License Key help article.

Regards,
Dinko | Tech Support Engineer
Progress Telerik