How do I remove whitespace between columns in a table (lv_table_t)?

How-to
1

Description

Note: I solved this in the process of describing the details of what I had tried so far, but I thought I would go ahead and post it, hoping it will be helpful to others – because I had studied the current (8.3) documentation on lv_table, and also I could not find any other posts that related to working with table column widths, and yet I struggled with this for a few hours before solving it.

The problem I was running into is:

I had a 4-column table that should fit easily within 3/4 of the width of my screen (480) using lv_font_montserrat_30, but nothing I have tried so far has kept it from overflowing the screen width on the right.

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

PIC32MZ1024EFF100, production board, compiler: XC32 v2.41

What LVGL version are you using?

I am using 8.3.9+ (the “+” is because I am out on the tip of the release/v8.3 branch past the v8.3.9 tag).

What do you want to achieve?

Have all 4 columns of the table display well within the width of the display panel (480).

What have you tried so far?

I tried:

  1. Reducing the font (montsarrat_30 => 16).
    lv_style_init(&RTS_TextStyle);
    lv_style_set_text_font(&RTS_TextStyle, &font_montserrat_16);
    lv_obj_add_style(screen, &RTS_TextStyle, LV_STATE_DEFAULT | LV_PART_MAIN);

  1. Setting table size: lv_obj_set_size(tbl, 480, 320); This had no effect, so I am guessing that table size is being governed by other things.

  2. The best success I have had so far is setting column widths, but as it is, if I reduce them any more, they start wrapping the cell contents.

    lv_table_set_col_width(tbl, 0, 115);
    lv_table_set_col_width(tbl, 1, 130);  // <-- right-justified in column
    lv_table_set_col_width(tbl, 2,  90);  // <-- right-justified in column
    // 4th column is also right justified (handled in drawing event when
    // `if (dsc->part == LV_PART_ITEMS)`.

Here is one mistake because I was assuming the 4th column width would adjust to fill the rest of the screen width. But the table width (judging by tbl->coords.x2) is 515!

So I assumed I was down to bare minimum, but there were still LARGE swaths of whitespace between columns.and that the only thing left would be cell padding.

  1. I set vertical cell padding by:

    lv_obj_set_style_pad_ver(tbl, 5, LV_PART_ITEMS);

    Note: this worked really well! I found this in another HOW-TO post on reducing the vertical padding. Table is much more readable now and most of it now fits on the screen vertically. (Note I don’t need the user to be able to select cells or rows so a narrow height works well in this case.)

So I thought sure it had to be down to horizontal padding.

  1. So I tried

    lv_obj_set_style_pad_hor(tbl, 2, LV_PART_ITEMS);

    but did not yet pull in the last column from overflowing the right edge.

Code to reproduce

    lv_obj_t  * tbl;

    my_screen_init();    // Creates screen object with a TabView widget with 5 tabs.
    lv_style_init(&RTS_TextStyle);
    lv_style_set_text_font(&RTS_TextStyle, &font_montserrat_16);
    lv_obj_add_style(screen, &RTS_TextStyle, LV_STATE_DEFAULT | LV_PART_MAIN);

    tbl = RTS_gtblpaTables[eRTStatsTable_tasks]    = lv_table_create(ui_tabTasks);
    lv_table_set_col_cnt(tbl, 4);
    lv_obj_set_style_pad_ver(tbl, 5, LV_PART_ITEMS);
    lv_obj_set_style_pad_hor(tbl, 2, LV_PART_ITEMS);
    lv_table_set_col_width(tbl, 0, 100);
    lv_table_set_col_width(tbl, 1, 100);
    lv_table_set_col_width(tbl, 2,  90);

Here is what I was missing:

My lv_conf.h setting for LV_DPI_DEF is 170, which matches the characteristics of my display panel.

Examining lv_table_constructor() gave me the hint that I needed: it assigned the first column width and first row height to LV_DPI_DEF!

This suggested that when I later did this: lv_table_set_col_cnt(tbl, 4); that it did the same (set a 170px column width). And sure enough! That was it. The 4th (right-justified) column was being set to a width of 170, which caused it to spill over past the width of the display panel.

Handling that with

    lv_table_set_col_width(tbl, 3,  90);

solved the problem completely, and everything appears to be working correctly now! :slight_smile:

Two suggestions that would have saved me the time of struggling with this:

  1. That the documentation for lv_table be updated to be very clear that the default column width of LV_DPI_DEF is used when new columns are added, so column widths that need to differ from this width need to be set AFTER all columns are added. (Same with default row height and when it is used – I note that I don’t see LV_DPI_DEF being used in lv_table_set_row_cnt() though I have not studied the code closely to work out the designer-intended method of controlling row height.)

  2. That the same documentation be further updated to include that cell padding can be controlled with:

	lv_obj_set_style_pad_ver(tbl, pad_value_v, LV_PART_ITEMS);
	lv_obj_set_style_pad_hor(tbl, pad_value_h, LV_PART_ITEMS);

Plus any other way it can (or should) be controlled, as envisioned by the designer of lv_table_t.

Aside from those things, I am a happy camper again! :slight_smile: