Remove object spacing/padding in layout container

How-to
,
1

Description

I am creating a custom menu which will ultimately contain controls within each item (so they are a bit more than just a list of labels). For this I am using a container with the alignment set to LV_LAYOUT_COL_M and then I add my custom obj items. However there is spacing/padding between each item which I do not want.

I’m believe this is something to do with the style but nothing I have tried as worked.

What MCU/Processor/Board and compiler are you using?

Visual Studio simulation. LittleVgl6.0

What do you want to achieve?

Aligned objects without spacing between them (see screenshot below).

What have you tried so far?

See code below. I have tried changing the body.padding to top and bottom but made no difference.

Code to reproduce

static lv_style_t titlestyle;
static lv_style_t helpstyle;

static void CreateNewMenu()
{
	// Base container ************************************
	lv_obj_t* base = lv_list_create(lv_scr_act(), NULL);
	lv_obj_set_size(base, 800, 400);
	lv_cont_set_layout(base, LV_LAYOUT_COL_M);

	// Setup styles ************************************
	lv_style_copy(&titlestyle, &lv_style_plain);
	lv_style_copy(&helpstyle, &lv_style_plain);

	titlestyle.text.color = LV_COLOR_WHITE;
	titlestyle.text.font = &lv_font_roboto_28;
	titlestyle.body.main_color = lv_color_hex(0x134b8e);
	titlestyle.body.grad_color = lv_color_hex(0x134b8e);
	//titlestyle.body.padding.bottom = 0;
	//titlestyle.body.padding.top = 0;

	helpstyle.text.color = LV_COLOR_CYAN;
	helpstyle.text.font = &lv_font_roboto_12;

	// Creating menu items ************************************
	CreateMenuItem(base, "Item1");
	CreateMenuItem(base, "Item2");
	CreateMenuItem(base, "Item2");
	CreateMenuItem(base, "Item2");
	CreateMenuItem(base, "Item2");
	CreateMenuItem(base, "Item2");
	CreateMenuItem(base, "Item2");
	CreateMenuItem(base, "Item2");
	CreateMenuItem(base, "Item2");
}

static void CreateMenuItem(lv_obj_t* parent, char * titleText)
{
	lv_obj_t* base = lv_obj_create(parent, NULL);
	lv_obj_set_size(base, 800, 50);
	lv_obj_set_style(base, &titlestyle);

	lv_obj_t* title = lv_label_create(base, NULL);
	lv_label_set_text(title, titleText);
	lv_obj_set_pos(title, 10, 2);
	lv_obj_set_style(title, &titlestyle);
}

Screenshot and/or video

I want to remove the white space between each item. Simply changing the parents background colour to match the items is not suitable for my use.

image
image.png802×512 5.06 KB

2

At style for LV_LIST_STYLE_SCRL
set body.padding.inner to 0.

https://docs.littlevgl.com/en/html/object-types/list.html#_CPPv417lv_list_set_styleP8lv_obj_t15lv_list_style_tPK10lv_style_t

1 Like
3

That worked, many thanks.

Related question, do you know how to get the horizontal line separators to appear like in the example
image
Or should it be automatic but mine isnt because I am not adding list buttons, i am just assigning my controls to the list control as the parent?

4

at style LV_BTN_STYLE_REL
LV_BTN_STYLE_PR
LV_BTN_STYLE_TGL_REL
LV_BTN_STYLE_TGL_PR

set
body.radius = 10; // or as you want
body.border.width = 1;
body.border.part = LV_BORDER_BOTTOM;

1 Like
5

Thanks again @TridentTD. I do find the Styles/themes quite confusing

6

Any suggestions for improvements? What part is confusing?