Change the text area size of a spinbox in LVGL

Important: unclear posts may not receive useful answers.

Before posting

  • Get familiar with Markdown to format and structure your post
  • Be sure to update lvgl from the latest version from the master branch.
  • Be sure you have checked the FAQ and read the relevant part of the documentation.
  • If applicable use the Simulator to eliminate hardware related issues.

Delete this section if you read and applied the mentioned points.


How to change the size of text area of a spinbox? by changing the size of spinbox, just size of spinbox changed but it’s text size didnt effect! how to increase the text size after increasing the spinbox size?

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

on simulator

What LVGL version are you using?


What do you want to achieve?

changing the size of spinbox with it’s text area

What have you tried so far?

lv_obj_set_style_text_font(spinbox, LV_FONT_MONTSERRAT_30, LV_PART_INDICATOR);

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:

/*void lv_example_spinbox_1(void)
    spinbox = lv_spinbox_create(lv_scr_act());
    lv_spinbox_set_range(spinbox, -1000, 25000);
    lv_spinbox_set_digit_format(spinbox, 5, 2);
    lv_obj_set_width(spinbox, 300);
    lv_obj_set_height(spinbox, 300);
    lv_obj_set_style_text_font(spinbox, LV_FONT_MONTSERRAT_30, LV_PART_INDICATOR);
    lv_coord_t h = lv_obj_get_height(spinbox);
    lv_obj_t * btn = lv_btn_create(lv_scr_act());
    lv_obj_set_size(btn, h, h);
    lv_obj_align_to(btn, spinbox, LV_ALIGN_OUT_RIGHT_MID, 5, 0);
    //lv_obj_set_style_bg_img_src(btn, LV_SYMBOL_PLUS, 0);
    lv_obj_set_style_bg_img_src(btn, LV_SYMBOL_RIGHT, 0);
    lv_obj_add_event(btn, lv_spinbox_increment_event_cb, LV_EVENT_ALL,  NULL);
    btn = lv_btn_create(lv_scr_act());
    lv_obj_set_size(btn, h, h);
    lv_obj_align_to(btn, spinbox, LV_ALIGN_OUT_LEFT_MID, -5, 0);
    //lv_obj_set_style_bg_img_src(btn, LV_SYMBOL_MINUS, 0);
    lv_obj_set_style_bg_img_src(btn, LV_SYMBOL_OK, 0);
    lv_obj_add_event(btn, lv_spinbox_decrement_event_cb, LV_EVENT_ALL, NULL);

Screenshot and/or video

If possible, add screenshots
and/or videos about the current state.

AFAIK text won’t scale linearly with LVGL, so you’d need to swap out the font selection with a different sized font whenever the spinbox size reaches a certain threshold.

My main problem is how to target the text area of spinbox?
using this function lv_obj_set_style_text_font(spinbox, LV_FONT_MONTSERRAT_30, LV_PART_INDICATOR) dosent work.

Are you sure that’s the part that needs to be modified? I would try LV_PART_MAIN or LV_PART_ANY to confirm.

tried it, it dosent work!

with another custom font this code works.
lv_obj_set_style_text_font(spinbox, &ui_font_Bahnschrift40, LV_PART_MAIN | LV_STATE_DEFAULT);