WPF - Html dropdown goes off screen when near bottom of page

[Dumpen]

• What version of the product are you using?
  Myget, CefSharp.Wpf, 75.0.110-CI3174

• What architecture x86 or x64?
  x64

• On what operating system?
  Win10

• Are you using WinForms, WPF or OffScreen?
  WPF

• What steps will reproduce the problem?

1. Clone https://github.com/Dumpen/CefSharp.MinimalExample
2. Set CefSharp.MinimalExample.Wpf and WebApplication1 as start up projects
3. Start it

• What is the expected output? What do you see instead?
  The dropdown should be above the select input, but it is below

• Please provide any additional information below.
  See image here. In a normal browser the dropdown is either above the select input or above the whole window if there is no space.

• Does this problem also occur in the CEF Sample Application from http://opensource.spotify.com/cefbuilds/index.html?
  No, see https://i.ibb.co/nwC1nsN/ss2.jpg. I tested with cef_binary_75.0.11+gf50b3c2+chromium-75.0.3770.100_windows64_client.tar

[amaitland]

Additional checks to make sure the popup is within the bounds of the control will be required.

Currently the image that represents the drop down is just positioned relative to the canvas
https://github.com/cefsharp/CefSharp/blob/cefsharp/73/CefSharp.Wpf/ChromiumWebBrowser.cs#L1962

A very quick look at the CEF source code, and it's doing some checks about the size
https://github.com/chromiumembedded/cef/blob/8a055593d694b386f46530f81f53ed8b7c5ea284/tests/cefclient/browser/osr_renderer.cc#L247

We should do similar, pull requests welcome.

[Dumpen]

I changed the code to match the one in CEF which moves the popup but the underlying popup is still where it was before. Is there a method to "paint/refresh" the UI?

Heres a gif of the problem

  /// <summary>
     /// Sets the popup size and position implementation.
     /// </summary>
     /// <param name="rect">The popup rectangle (size and position).</param>
     private void SetPopupSizeAndPositionImpl(Rect rect)
     {
         popupImage.Width = rect.Width;
         popupImage.Height = rect.Height;

         int x = rect.X, y = rect.Y;

         // if x or y are negative, move them to 0.
         if (x < 0)
         {
             x = 0;
         }

         if (y < 0)
         {
             y = 0;
         }

         // if popup goes outside the view, try to reposition origin
         if (rect.X + rect.Width > viewRect.Width)
         {
            x = viewRect.Width - rect.Width;
         }

         if (rect.Y + rect.Height > viewRect.Height)
         {
             y = viewRect.Height - rect.Height;
         }

         // if x or y became negative, move them to 0 again.
         if (x < 0)
         {
             x = 0;
         }

         if (y < 0)
         {
             y = 0;
         }

         Canvas.SetLeft(popupImage, x);
         Canvas.SetTop(popupImage, y);
     }

[amaitland]

You'd have to debug cefclient to see what additional changes are required.

[haavamoa]

Hi guys! :)

We are experiencing the same bug. Is there any progress regarding this bug?

[riksking]

Hi all :)
We are experiencing the same bug on version v79.1.360.
Is there any progress?

[CaptBli]

This is quite the problem for us. Any progress? Just trying to ping.
Right now we have to make our dropdowns become multi-row selects with only a couple of rows in order to make the dropdowns stay on screen.

[amaitland]

For anyone wishing to debug this problem you can download the source for the cefclient reference implementation from http://opensource.spotify.com/cefbuilds/index.html

• Download and install cmake
• Download a standard distribution (either x86 or x64)
• Extract to a working folder.
• Run cmake to generate the project files and solution (instructions https://github.com/chromiumembedded/cef/blob/019611c7649ec982b86a0d8c6969e6dfbd37f2e9/CMakeLists.txt.in#L61)
• Open solution in visual studio
• Debug cefclient

Suggests on where to add some breakpoints

• https://github.com/chromiumembedded/cef/blob/8a055593d694b386f46530f81f53ed8b7c5ea284/tests/cefclient/browser/osr_renderer.cc#L247
• https://github.com/chromiumembedded/cef/blob/8a055593d694b386f46530f81f53ed8b7c5ea284/tests/cefclient/browser/osr_renderer.cc#L344
• https://github.com/chromiumembedded/cef/blob/30d83cb94a79e6548ecb4db4f8d6ad587f3b3177/tests/cefclient/browser/osr_window_win.cc#L696

[amaitland]

It looks like cefclient is adjusting the mouse x,y values when over a dropdown.

[Shankp]

does anyone have a fix for this.?? we are facing this in version 85.3.130

[amaitland]

I'm not aware of anyone working on this currently, a pull request would be welcomed.