arnog / mathlive

A web component for easy math input
https://cortexjs.io/mathlive
MIT License
1.26k stars 260 forks source link

Set virtual keyboard height to a fixed value #2394

Open lzrgueen opened 3 weeks ago

lzrgueen commented 3 weeks ago

Description

Hello, first of all thanks a lot for your generous help on answering the previous question about multiple layers. Now I have met another problem: According to the official documentation, I managed to customize the css styles of the keycap, including colours width etc.. However, when I try to set the virtual keyboard height in a similar way, it fails. I checked the codes and figured out that there is no field called "style" in the VirtualKeyboardLayoutCore.

Steps to Reproduce

My code snippet for the keyboard layout is like this:

` window.mathVirtualKeyboard.layouts = [ "numeric", "symbols", "alphabetic", "greek", {

      label: "minimal",
      tooltip: "Only the essential",
      layers: [
        {
          style: ".digit { background: blue; color: white;width:200px;} ",
          rows: [
            [
              '+',
              '-',
              '\\times',
              '\\frac{#@}{#?}',
              '=',
              '.',
              '(',
              ')',
              '\\sqrt{#0}',
              '#@^{#?}',
            ],

              [{ class: 'digit', latex: '1' }],
              [{ class: 'digit', latex: '2' }],
              [{ class: 'digit', latex: '3' }],
          ],
        },
      ],
    }

  ];

},`

I also inspected on my Firefox browser, and I figured out a field called '--keyboard-height', but when I try to add it to the style like below it fails

body .ML__keyboard{
  --keyboard-height:250px;
}

I also checked out this issue as well: https://github.com/arnog/mathlive/issues/730

Could u please have a look on it? And also is it possible to make the virtual keyboard scrollable on vertical direction as well? Thanks!

Actual Behavior

(Required) The virtual keyboard height isn't fixed with 250px;

Expected Behavior

(Required) Whatever layout I choose, the keyboard height should usually be 250px

Environment

MathLive version 0.98.6 Framework: Vue 2

Is this a regression: No

Operating System Windows

Browser Firefox,