Providing more space between controls for mobile access

Hi,

Is there any ‘general’ styling that can be changed to have the web UI provide more space between the controls? I would like to make the UI more mobile friendly (but not responsive all the way) and it would help a lot if the space between fields - especially on the field group and grid controls - to provide more spacing in between.

I tried to fiddle around a little with style overrides but did not find anything that does the trick. Only on the tables I could improve the spacing by setting a min-height on the table cell wrapper:


.v-table-cell-wrapper {
	min-height: 40px;
}

Is there anything that can be tweaked to improve spacing on the field group and grid controls as well?

Hi,

You can use these SCSS variables to tune default component sizes and spacings in your theme extension:


$v-line-height: 1.55;

$v-unit-size: 35px;

$v-layout-margin-top: 13px;
$v-layout-margin-left: 13px;
$v-layout-margin-right: 13px;
$v-layout-margin-bottom: 13px;

$v-layout-spacing-vertical: 13px;
$v-layout-spacing-horizontal: 13px;

$v-table-row-height: 35px;
$v-table-cell-padding-horizontal: 10px;

You can set them in halo-ext-defaults.scss file and restart your application. Also you will need to tune a bit some CSS rules, for example height of menu header, in halo-ext.scss file:


/* Define your theme modifications inside next mixin */
@mixin com_company_mobilesize-halo-ext {
  .cuba-inverse-header {
    height: 50px !important;
  }
}

And you will see the following result:

You can find more useful SCSS variables here: https://doc.cuba-platform.com/manual-6.3/web_theme_extension.html

mobile-friendly-sizes

Hi Yuriy,

Thank you. I played around a little with these before but without success. I guess you need to use them in some consistent combination which I didn’t before. Especially the unit size escaped my attention as well as the vertical and horizontal spacing. They turn out to be exactly what i was looking for.