CTRL+MouseScroll zooming in CEF UI::HtmlDialogs

CTRL+MouseScroll zooming in CEF UI::HtmlDialogs

At one time, I think back when I was fiddling with the HtmlInputbox examples, I had gotten the CTRL+MouseScroll zooming to work within SketchUp’s UI::HtmlDialog.

Mouse scroll zooming works outside SketchUp in any Chromium browser.

But now I cannot get it to work inside a CEF browser dialog inside SketchUp.
I can’t remember what I did to get it to work in the past. (And I did look back at both JS and CSS files, but did not find a clue.)

Is there some trick to this ?

FYI:

  • The dialog has scrollable and resizable set true.

  • I set the font size to 1em in the <html> element and all child elements use rem for sizing everything (text, borders, margins, widths, heights, etc.)

Unfortunately I cant answer, but sure I faced to that issue too.
I’ve never been able to get it to work in HtmlDialog. but it works without any special settings in the WebDialog.

Should be something about how they are implemented CEF browser dialog into SketchUp…(?)

Extremely simplified test code in SU 2021:

html = %{
  <!DOCTYPE html>
  <html>
    <body>
      <div id="example-div">
        <input type='text' value='test'>
      </div>
    </body>
  </html>
}
@dialog_h = UI::HtmlDialog.new
@dialog_w =  UI::WebDialog.new
@dialog_h.set_html(html)
@dialog_w.set_html(html)
@dialog_h.show
@dialog_w.show

html_vs_web

This is what I am wondering.

In general though, I see complaints on the CEF forums that the CTRL+MouseScroll is unwanted and considered a nuisance by many coders. They want to be able to shut it off or disable it completely.

I am not off this persuasion as I feel that the user should be able to increase the scale of the interface to suit their eyes.

It also works in Chrome and Edge (which are Chromium based.) I am quite sure that it was working at one time in the HtmlDialog class. I’m think it might be something in the UserAgent stylesheet that is overriding some of my CSS classes.