0

I noticed that when ComboBox is really close to the page bottom part but still have some small space, the ComboBox element is trying to open its popup with minimal height and scrollbar, instead of open the popup window above to the top. How to properly setup ComboBox with popup min height and let him know to use the space above when there is no enough space at the bottom?

UPDATED

I added the following code to the styles.css:

@import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';

registerStyles(
    'vaadin-combo-box-overlay',
    css`
    #overlay {
        min-height: 100px;
    }
  `,
);

but UI compilation failed with the following error:

No issues found.
 [webpack-dev-middleware] wait until bundle finished: /jobs/49455/candidates

WARNING in InjectManifest has been called multiple times, perhaps due to running webpack in --watch mode. The precache manifest generated after the first call may be inaccurate! Please see https://github.com/GoogleChrome/workbox/issues/1790 for more information.

ERROR in ./themes/mytheme/styles.css?inline
Module build failed (from ../node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(5:11) \ui\frontend\themes\myproject\styles.css Unknown word

  3 | @import url('lumo-css-framework/all-classes.css');
  4 | 
> 5 | @import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
    |           ^
  6 | 
  7 | registerStyles(

 [build-status] 1 error and 1 warning were reported.

How to properly add such styles?

alexanoid
  • 24,051
  • 54
  • 210
  • 410
  • 1
    Workaround can be found here. https://github.com/vaadin/flow-components/issues/2820#issuecomment-1127329437 – Knoobie Sep 17 '22 at 13:48
  • Thank you. I have updated my question with the error I have right now – alexanoid Sep 17 '22 at 14:10
  • 1
    That was not the workaround I've linked. Create a css file vaadin-combo-box-overlay.css in the components folder and apply the single rule. – Knoobie Sep 17 '22 at 14:25
  • what is a `components` folder and where it should be located ? – alexanoid Sep 17 '22 at 19:19
  • 2
    https://vaadin.com/docs/latest/styling/custom-theme/creating-custom-theme/#theme-folder-structure – Knoobie Sep 18 '22 at 04:29
  • 1
    Just to clarify why the code posted cannot work: there are two ways to apply CSS to Vaadin components: 1) the easy way, in a regular css file, as exemplified by the linked workaround code by tomivirkki, and 2) by adding it with javascript, as exemplified by novosadt's code snippet. The latter goes into a javascript file, whereas the former into a css file. – Rolf Sep 19 '22 at 13:54

0 Answers0