Ticket T1282692
Visible to All Users

WebView2 inside a DevExpress FlyoutPanel does not render correctly after changing FlyoutPanel Height

created a day ago

Greetings
I have this app.

C#
public partial class Form1 : Form { private Microsoft.Web.WebView2.WinForms.WebView2 mBrowser = new Microsoft.Web.WebView2.WinForms.WebView2(); public Form1() { InitializeComponent(); string webContent = "C:\\Users\\username\\AppData\\Local\\Temp\\CommonNavigation.html"; mBrowser.AllowExternalDrop = true; mBrowser.CreationProperties = null; mBrowser.Dock = DockStyle.Fill; mBrowser.Name = "webView"; mBrowser.TabIndex = 0; mBrowser.ZoomFactor = 1D; mBrowser.Source = new Uri(webContent); flyoutPanel1.OwnerControl = this; flyoutPanel1.Options.AnchorType = DevExpress.Utils.Win.PopupToolWindowAnchor.Manual; flyoutPanel1.Options.CloseOnOuterClick = true; flyoutPanelControl1.Controls.Add(mBrowser); flyoutPanel1.Size = new Size(300, this.Height - 100); } private void button1_Click(object sender, EventArgs e) { flyoutPanel1.ShowPopup(); } }

When I run this, and I click the button, I see the flyout and the content. I click on a button in the content and it reacts correctly. See below Good Rendering picture.
But if I change the height value of 100 to 50 in flyoutPanel1.Size; and I click the same button on the content; I get this. See BadRendering picture

I know this might be related to Microsoft WebView. But asking Microsoft is like trying to get an answer from a wall :)
Maybe your team can provide a hint.
Any help is appreciated.

Answers approved by DevExpress Support

created 19 hours ago

Hello,

Thank you for the screenshots and code snippet.

This behavior does not directly relate to our controls. WebView is responsible for rendering the web page. As such, we cannot modify or change the rendering behavior of this component. It is also possible that the web page is not configured to be responsive for certain resolutions.

With that said, if your goal is to show a navigation control that is made with HTML/CSS - then you can instead use a AccordionControl and use HTML-CSS templates to render UI elements.

    Comments (1)

      Hi Christian,

      I dropped the Flyout Panel and used the Accordion.
      Working like a charm.
      I cannot thank you enough.
      All my respect

      Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

      Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.