How to apply theme small size to all componets

Support
#1

Hi all,
I am using customizing helium theme for my Jmix application. However, I want to apply small size to all visual components- as a result I am using jmix.ui.theme.sizes = small in the application.properties.
I can see that there is no change in the size- the entire screen is as large as ever.
I want to be able to display small-size visual estate for all my users- at the moment, I am trying to resize my browser zoom % to a small value.

How can I do this with the Jmix theme?

Thanks

#5

Hello!

The jmix.ui.theme.sizes property defines the available list of predefined sizes. Take a look at: Helium Theme Presets :: Jmix Documentation

To use small preset by default use the following property:

jmix.ui.theme.default-size-to-use=small
1 Like
#7

Hi Roman,
Thanks, the small size works for me. However, i am still looking for something smaller- maybe tiny. The screen is still a bit big even with small preset. Do ypu have idea of how to get smaller screen size without need to zoom in the browser zoom %?

Thanks

#8

You can globally change the value of $v-unit-size--small SCSS variable to something smaller. For instance, Vaadin has $v-unit-size--tiny which is calculated by:

$v-scaling-factor--tiny: 0.75 !default;
$v-unit-size--tiny: round($v-unit-size * $v-scaling-factor--tiny) !default;

Add the following code to <theme-name>-default.scss in the extended Helium theme:

$v-unit-size--small: $v-unit-size--tiny;

How to extend theme you can find here: Creating a Custom Theme :: Jmix Documentation
How to change default values of SCSS variables see Modifying Common Parameters
:: Jmix Documentation

#9

Thanks Roman