From 34e87fe299b9d0853f49121f42621b91b4e40244 Mon Sep 17 00:00:00 2001 From: Antony Milne Date: Mon, 15 Jul 2024 12:13:21 +0100 Subject: [PATCH] Update optionsHeight critical value to 30 --- vizro-core/src/vizro/models/_components/form/dropdown.py | 6 ++++-- .../unit/vizro/models/_components/form/test_dropdown.py | 7 ++++--- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/vizro-core/src/vizro/models/_components/form/dropdown.py b/vizro-core/src/vizro/models/_components/form/dropdown.py index 7527ae7f3..619b28f2e 100755 --- a/vizro-core/src/vizro/models/_components/form/dropdown.py +++ b/vizro-core/src/vizro/models/_components/form/dropdown.py @@ -63,10 +63,12 @@ def validate_multi(cls, multi, values): @_log_call def build(self): full_options, default_value = get_options_and_default(options=self.options, multi=self.multi) - # 37 is the cut-off character length where the text inside the dropdown starts to wrap. + # 30 characters is roughly the number of "A" characters you can fit comfortably on a line in the dropdown. + # "A" is representative of a slightly wider than average character: + # https://stackoverflow.com/questions/3949422/which-letter-of-the-english-alphabet-takes-up-most-pixels # We look at the longest option to find number_of_lines it requires. Option height is the same for all options # and needs 24px for each line + 8px padding. - number_of_lines = math.ceil(max(len(str(option)) for option in full_options) / 37) + number_of_lines = math.ceil(max(len(str(option)) for option in full_options) / 30) option_height = 8 + 24 * number_of_lines return html.Div( diff --git a/vizro-core/tests/unit/vizro/models/_components/form/test_dropdown.py b/vizro-core/tests/unit/vizro/models/_components/form/test_dropdown.py index 1ab6ba483..b401f89aa 100755 --- a/vizro-core/tests/unit/vizro/models/_components/form/test_dropdown.py +++ b/vizro-core/tests/unit/vizro/models/_components/form/test_dropdown.py @@ -190,9 +190,10 @@ def test_dropdown_without_all_option(self): [ (["A", "B", "C"], 32), ([10, 20, 30], 32), - (["A text with a length of 36..........", "B", "C"], 32), - (["A text with a length of 37...........", "B", "C"], 56), - (["A text with a length of 37..........." + "A text with a length of 37...........", "B", "C"], 80), + (["A" * 30, "B", "C"], 32), + (["A" * 31, "B", "C"], 56), + (["A" * 60, "B", "C"], 56), + (["A" * 61, "B", "C"], 80), ], ) def test_dropdown_dynamic_option_height(self, options, option_height):