How to remove vertical table cell padding?

How-to
, ,
1

Hi all,

I am trying to incorporate a table into my project and need to fit numerous lines on a 800x480 display. I am however finding I am unable to fit everything in the one page without scroll, even though there is ample room.

Description

There seems to be some vertical padding being applied to the table cells somewhere that I can’t remove.

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

ESP32-S3 LCD Dev board with ESP-IDF.

What LVGL version are you using?

8.4

What do you want to achieve?

I need to reduce the vertical padding to the point that all rows can be displayed on a single screen.

What have you tried so far?

Adding the following lines, which is what I could find in my searches thus far:

lv_obj_set_style_pad_ver(table, 0, LV_PART_ITEMS);
lv_obj_set_style_pad_top(table, 0, LV_PART_ITEMS|LV_STATE_DEFAULT);
lv_obj_set_style_pad_bottom(table, 0, LV_PART_ITEMS|LV_STATE_DEFAULT);

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be formatted like:

static void draw_part_event_cb(lv_event_t * e)
{
    lv_obj_t * obj = lv_event_get_target(e);
    lv_obj_draw_part_dsc_t * dsc = lv_event_get_draw_part_dsc(e);
    /*If the cells are drawn...*/
    if(dsc->part == LV_PART_ITEMS) {
        uint32_t row = dsc->id /  lv_table_get_col_cnt(obj);
        uint32_t col = dsc->id - row * lv_table_get_col_cnt(obj);
    
        if(col == 1 || col == 2 || col == 4 || col == 5) {
            dsc->label_dsc->align = LV_TEXT_ALIGN_RIGHT;
        }

    }
}

void table_init(void) {
    lvl_obj_t * table = lv_table_create(tableContainer);

    lv_table_set_col_cnt(table, 6);
    lv_table_set_row_cnt(table, 9);

    lv_obj_center(table);
    lv_obj_set_height(table, 480);
    lv_obj_set_width(table, 800);
    lv_obj_set_align(table, LV_ALIGN_CENTER);

    lv_obj_set_style_pad_ver(table, 0, LV_PART_ITEMS);
    lv_obj_set_style_pad_top(table, 0, LV_PART_ITEMS|LV_STATE_DEFAULT);
    lv_obj_set_style_pad_bottom(table, 2, LV_PART_ITEMS|LV_STATE_DEFAULT);

    /*Add an event callback to to apply custom drawing*/
    lv_obj_add_event_cb(table, draw_part_event_cb, LV_EVENT_DRAW_PART_BEGIN, NULL);
}

Screenshot and/or video

20240525_224537
20240525_2245371752×963 198 KB

Thanks for reading :slight_smile:

2

Hi,

Try this:

    lv_obj_set_style_pad_top(calendartable, 2, LV_PART_ITEMS);
    lv_obj_set_style_pad_bottom(calendartable, 4, LV_PART_ITEMS);
    lv_obj_set_style_pad_left(calendartable, 10, LV_PART_ITEMS);
    lv_obj_set_style_pad_right(calendartable, 2, LV_PART_ITEMS);

That seemed to do the trick for me.

3

Hi elgerg,

Thanks for your message.
Unfortunately as per the example above, I have already implemented lv_obj_set_style_pad_top and lv_obj_set_style_pad_bottom with no luck.

4

Update, not sure what changed that it started working but I managed to fit the table to the screen correctly using the following lines:

lv_obj_set_style_pad_top(table, 0, LV_PART_ITEMS|LV_STATE_DEFAULT);
lv_obj_set_style_pad_bottom(table, 37, LV_PART_ITEMS|LV_STATE_DEFAULT);

My next gremlin is this weird spacing issue - it looks as if there is a margin at the end of the table that prevents the lines running the whole way across the screen? The table is set to the screen with with no horizontal padding.

Untitled
Untitled337×1528 51.9 KB

If anyone has ideas I’m keen to hear them.