diff --git a/CHANGELOG.md b/CHANGELOG.md index da6aaed5bb..0c4c528ee2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,13 +7,14 @@ and this project adheres to [Semantic Versioning](http://semver.org/). ## [0.14.0] - Unreleased -### Changes +### Changed - Breaking change: There is now only `post_message` to post events, which is non-async, `post_message_no_wait` was dropped. https://github.com/Textualize/textual/pull/1940 - Breaking change: The Timer class now has just one method to stop it, `Timer.stop` which is non sync https://github.com/Textualize/textual/pull/1940 - Breaking change: Messages don't require a `sender` in their constructor https://github.com/Textualize/textual/pull/1940 - Many messages have grown a `control` property which returns the control they relate to. https://github.com/Textualize/textual/pull/1940 - Dropped `time` attribute from Messages https://github.com/Textualize/textual/pull/1940 +- Updated styling to make it clear DataTable grows horizontally https://github.com/Textualize/textual/pull/1946 - Changed the `Checkbox` character due to issues with Windows Terminal and Windows 10 https://github.com/Textualize/textual/issues/1934 - Changed the `RadioButton` character due to issues with Windows Terminal and Windows 10 and 11 https://github.com/Textualize/textual/issues/1934 diff --git a/src/textual/widgets/_data_table.py b/src/textual/widgets/_data_table.py index 9759989d3d..6933343845 100644 --- a/src/textual/widgets/_data_table.py +++ b/src/textual/widgets/_data_table.py @@ -21,6 +21,7 @@ from .._two_way_dict import TwoWayDict from .._types import SegmentLines from ..binding import Binding, BindingType +from ..color import Color from ..coordinate import Coordinate from ..geometry import Region, Size, Spacing, clamp from ..message import Message @@ -880,6 +881,9 @@ async def on_styles_updated(self) -> None: self._clear_caches() self.refresh() + def on_resize(self, event: events.Resize) -> None: + self._update_count += 1 + def watch_show_cursor(self, show_cursor: bool) -> None: self._clear_caches() if show_cursor and self.cursor_type != "none": @@ -1682,6 +1686,25 @@ def _should_highlight( )[line_no] scrollable_row.append(cell_lines) + # Extending the styling out horizontally to fill the container + widget_width = self.size.width + table_width = ( + sum( + column.render_width + for column in self.ordered_columns[self.fixed_columns :] + ) + + self._row_label_column_width + ) + remaining_space = max(0, widget_width - table_width) + background_color = self.background_colors[1] + faded_color = Color.from_rich_color(row_style.bgcolor).blend( + background_color, factor=0.25 + ) + faded_style = Style.from_color( + color=row_style.color, bgcolor=faded_color.rich_color + ) + scrollable_row.append([Segment(" " * remaining_space, faded_style)]) + row_pair = (fixed_row, scrollable_row) self._row_render_cache[cache_key] = row_pair return row_pair diff --git a/tests/snapshot_tests/__snapshots__/test_snapshots.ambr b/tests/snapshot_tests/__snapshots__/test_snapshots.ambr index fa9c8eead2..ac2a53ff3e 100644 --- a/tests/snapshot_tests/__snapshots__/test_snapshots.ambr +++ b/tests/snapshot_tests/__snapshots__/test_snapshots.ambr @@ -10179,136 +10179,137 @@ font-weight: 700; } - .terminal-600825441-matrix { + .terminal-1071832686-matrix { font-family: Fira Code, monospace; font-size: 20px; line-height: 24.4px; font-variant-east-asian: full-width; } - .terminal-600825441-title { + .terminal-1071832686-title { font-size: 18px; font-weight: bold; font-family: arial; } - .terminal-600825441-r1 { fill: #dde6ed;font-weight: bold } - .terminal-600825441-r2 { fill: #1e1201;font-weight: bold } - .terminal-600825441-r3 { fill: #e1e1e1 } - .terminal-600825441-r4 { fill: #c5c8c6 } - .terminal-600825441-r5 { fill: #dfe4e7 } - .terminal-600825441-r6 { fill: #1e1405 } - .terminal-600825441-r7 { fill: #211505 } + .terminal-1071832686-r1 { fill: #dde6ed;font-weight: bold } + .terminal-1071832686-r2 { fill: #1e1201;font-weight: bold } + .terminal-1071832686-r3 { fill: #dde6ed } + .terminal-1071832686-r4 { fill: #c5c8c6 } + .terminal-1071832686-r5 { fill: #dfe4e7 } + .terminal-1071832686-r6 { fill: #1e1405 } + .terminal-1071832686-r7 { fill: #e1e1e1 } + .terminal-1071832686-r8 { fill: #211505 } - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - TableApp + TableApp - - - -  lane  swimmer               country        time   -  4     Joseph Schooling      Singapore      50.39  -  2     Michael Phelps        United States  51.14  -  5     Chad le Clos          South Africa   51.14  -  6     László Cseh           Hungary        51.14  -  3     Li Zhuhao             China          51.26  -  8     Mehdy Metella         France         51.58  -  7     Tom Shields           United States  51.73  -  1     Aleksandr Sadovnikov  Russia         51.84  - - - - - - - - - - - - - - + + + +  lane  swimmer               country        time   +  4     Joseph Schooling      Singapore      50.39  +  2     Michael Phelps        United States  51.14  +  5     Chad le Clos          South Africa   51.14  +  6     László Cseh           Hungary        51.14  +  3     Li Zhuhao             China          51.26  +  8     Mehdy Metella         France         51.58  +  7     Tom Shields           United States  51.73  +  1     Aleksandr Sadovnikov  Russia         51.84  + + + + + + + + + + + + + + @@ -10339,134 +10340,135 @@ font-weight: 700; } - .terminal-269830206-matrix { + .terminal-1710966859-matrix { font-family: Fira Code, monospace; font-size: 20px; line-height: 24.4px; font-variant-east-asian: full-width; } - .terminal-269830206-title { + .terminal-1710966859-title { font-size: 18px; font-weight: bold; font-family: arial; } - .terminal-269830206-r1 { fill: #dde6ed;font-weight: bold } - .terminal-269830206-r2 { fill: #e1e1e1 } - .terminal-269830206-r3 { fill: #c5c8c6 } - .terminal-269830206-r4 { fill: #1e1405 } - .terminal-269830206-r5 { fill: #dfe4e7 } + .terminal-1710966859-r1 { fill: #dde6ed;font-weight: bold } + .terminal-1710966859-r2 { fill: #dde6ed } + .terminal-1710966859-r3 { fill: #c5c8c6 } + .terminal-1710966859-r4 { fill: #1e1405 } + .terminal-1710966859-r5 { fill: #dfe4e7 } + .terminal-1710966859-r6 { fill: #e1e1e1 } - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - TableApp + TableApp - - - -  lane  swimmer               country        time   -  0  5     Chad le Clos          South Africa   51.14  -  1  4     Joseph Schooling      Singapore      50.39  -  2  2     Michael Phelps        United States  51.14  -  3  6     László Cseh           Hungary        51.14  -  4  3     Li Zhuhao             China          51.26  -  5  8     Mehdy Metella         France         51.58  -  6  7     Tom Shields           United States  51.73  -  7  10    Darren Burns          Scotland       51.84  -  8  1     Aleksandr Sadovnikov  Russia         51.84  - - - - - - - - - - - - - + + + +  lane  swimmer               country        time   +  0  5     Chad le Clos          South Africa   51.14  +  1  4     Joseph Schooling      Singapore      50.39  +  2  2     Michael Phelps        United States  51.14  +  3  6     László Cseh           Hungary        51.14  +  4  3     Li Zhuhao             China          51.26  +  5  8     Mehdy Metella         France         51.58  +  6  7     Tom Shields           United States  51.73  +  7  10    Darren Burns          Scotland       51.84  +  8  1     Aleksandr Sadovnikov  Russia         51.84  + + + + + + + + + + + + + @@ -10497,133 +10499,134 @@ font-weight: 700; } - .terminal-1288566407-matrix { + .terminal-2311386745-matrix { font-family: Fira Code, monospace; font-size: 20px; line-height: 24.4px; font-variant-east-asian: full-width; } - .terminal-1288566407-title { + .terminal-2311386745-title { font-size: 18px; font-weight: bold; font-family: arial; } - .terminal-1288566407-r1 { fill: #dde6ed;font-weight: bold } - .terminal-1288566407-r2 { fill: #e1e1e1 } - .terminal-1288566407-r3 { fill: #c5c8c6 } - .terminal-1288566407-r4 { fill: #211505 } + .terminal-2311386745-r1 { fill: #dde6ed;font-weight: bold } + .terminal-2311386745-r2 { fill: #dde6ed } + .terminal-2311386745-r3 { fill: #c5c8c6 } + .terminal-2311386745-r4 { fill: #e1e1e1 } + .terminal-2311386745-r5 { fill: #211505 } - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - TableApp + TableApp - - - -  lane  swimmer               country        time   -  4     Joseph Schooling      Singapore      50.39  -  2     Michael Phelps        United States  51.14  -  5     Chad le Clos          South Africa   51.14  -  6     László Cseh           Hungary        51.14  -  3     Li Zhuhao             China          51.26  -  8     Mehdy Metella         France         51.58  -  7     Tom Shields           United States  51.73  -  1     Aleksandr Sadovnikov  Russia         51.84  -  10    Darren Burns          Scotland       51.84  - - - - - - - - - - - - - + + + +  lane  swimmer               country        time   +  4     Joseph Schooling      Singapore      50.39  +  2     Michael Phelps        United States  51.14  +  5     Chad le Clos          South Africa   51.14  +  6     László Cseh           Hungary        51.14  +  3     Li Zhuhao             China          51.26  +  8     Mehdy Metella         France         51.58  +  7     Tom Shields           United States  51.73  +  1     Aleksandr Sadovnikov  Russia         51.84  +  10    Darren Burns          Scotland       51.84  + + + + + + + + + + + + + @@ -10654,135 +10657,136 @@ font-weight: 700; } - .terminal-2548097554-matrix { + .terminal-3008422431-matrix { font-family: Fira Code, monospace; font-size: 20px; line-height: 24.4px; font-variant-east-asian: full-width; } - .terminal-2548097554-title { + .terminal-3008422431-title { font-size: 18px; font-weight: bold; font-family: arial; } - .terminal-2548097554-r1 { fill: #dde6ed;font-weight: bold } - .terminal-2548097554-r2 { fill: #e1e1e1 } - .terminal-2548097554-r3 { fill: #c5c8c6 } - .terminal-2548097554-r4 { fill: #dfe4e7 } - .terminal-2548097554-r5 { fill: #1e1405 } - .terminal-2548097554-r6 { fill: #211505 } + .terminal-3008422431-r1 { fill: #dde6ed;font-weight: bold } + .terminal-3008422431-r2 { fill: #dde6ed } + .terminal-3008422431-r3 { fill: #c5c8c6 } + .terminal-3008422431-r4 { fill: #dfe4e7 } + .terminal-3008422431-r5 { fill: #e1e1e1 } + .terminal-3008422431-r6 { fill: #1e1405 } + .terminal-3008422431-r7 { fill: #211505 } - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - TableApp + TableApp - - - -  lane  swimmer               country        time   -  4     Joseph Schooling      Singapore      50.39  -  2     Michael Phelps        United States  51.14  -  5     Chad le Clos          South Africa   51.14  -  6     László Cseh           Hungary        51.14  -  3     Li Zhuhao             China          51.26  -  8     Mehdy Metella         France         51.58  -  7     Tom Shields           United States  51.73  -  1     Aleksandr Sadovnikov  Russia         51.84  - - - - - - - - - - - - - - + + + +  lane  swimmer               country        time   +  4     Joseph Schooling      Singapore      50.39  +  2     Michael Phelps        United States  51.14  +  5     Chad le Clos          South Africa   51.14  +  6     László Cseh           Hungary        51.14  +  3     Li Zhuhao             China          51.26  +  8     Mehdy Metella         France         51.58  +  7     Tom Shields           United States  51.73  +  1     Aleksandr Sadovnikov  Russia         51.84  + + + + + + + + + + + + + + @@ -10813,133 +10817,134 @@ font-weight: 700; } - .terminal-1660221063-matrix { + .terminal-2683041401-matrix { font-family: Fira Code, monospace; font-size: 20px; line-height: 24.4px; font-variant-east-asian: full-width; } - .terminal-1660221063-title { + .terminal-2683041401-title { font-size: 18px; font-weight: bold; font-family: arial; } - .terminal-1660221063-r1 { fill: #dde6ed;font-weight: bold } - .terminal-1660221063-r2 { fill: #e1e1e1 } - .terminal-1660221063-r3 { fill: #c5c8c6 } - .terminal-1660221063-r4 { fill: #211505 } + .terminal-2683041401-r1 { fill: #dde6ed;font-weight: bold } + .terminal-2683041401-r2 { fill: #dde6ed } + .terminal-2683041401-r3 { fill: #c5c8c6 } + .terminal-2683041401-r4 { fill: #e1e1e1 } + .terminal-2683041401-r5 { fill: #211505 } - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - TableApp + TableApp - - - -  lane  swimmer               country        time   -  4     Joseph Schooling      Singapore      50.39  -  2     Michael Phelps        United States  51.14  -  5     Chad le Clos          South Africa   51.14  -  6     László Cseh           Hungary        51.14  -  3     Li Zhuhao             China          51.26  -  8     Mehdy Metella         France         51.58  -  7     Tom Shields           United States  51.73  -  1     Aleksandr Sadovnikov  Russia         51.84  -  10    Darren Burns          Scotland       51.84  - - - - - - - - - - - - - + + + +  lane  swimmer               country        time   +  4     Joseph Schooling      Singapore      50.39  +  2     Michael Phelps        United States  51.14  +  5     Chad le Clos          South Africa   51.14  +  6     László Cseh           Hungary        51.14  +  3     Li Zhuhao             China          51.26  +  8     Mehdy Metella         France         51.58  +  7     Tom Shields           United States  51.73  +  1     Aleksandr Sadovnikov  Russia         51.84  +  10    Darren Burns          Scotland       51.84  + + + + + + + + + + + + + @@ -11162,162 +11167,163 @@ font-weight: 700; } - .terminal-52139843-matrix { + .terminal-3822425727-matrix { font-family: Fira Code, monospace; font-size: 20px; line-height: 24.4px; font-variant-east-asian: full-width; } - .terminal-52139843-title { + .terminal-3822425727-title { font-size: 18px; font-weight: bold; font-family: arial; } - .terminal-52139843-r1 { fill: #c5c8c6 } - .terminal-52139843-r2 { fill: #e3e3e3 } - .terminal-52139843-r3 { fill: #313437 } - .terminal-52139843-r4 { fill: #324f70 } - .terminal-52139843-r5 { fill: #4f9262 } - .terminal-52139843-r6 { fill: #a4823a } - .terminal-52139843-r7 { fill: #904354 } - .terminal-52139843-r8 { fill: #7c7d7e;font-weight: bold } - .terminal-52139843-r9 { fill: #75828b;font-weight: bold } - .terminal-52139843-r10 { fill: #192e1f;font-weight: bold } - .terminal-52139843-r11 { fill: #3a2a13;font-weight: bold } - .terminal-52139843-r12 { fill: #978186;font-weight: bold } - .terminal-52139843-r13 { fill: #101011 } - .terminal-52139843-r14 { fill: #0c1e39 } - .terminal-52139843-r15 { fill: #156034 } - .terminal-52139843-r16 { fill: #825210 } - .terminal-52139843-r17 { fill: #5b132a } - .terminal-52139843-r18 { fill: #7b7b7b } - .terminal-52139843-r19 { fill: #e1e1e1 } - .terminal-52139843-r20 { fill: #3a2a13 } - .terminal-52139843-r21 { fill: #78838b } - .terminal-52139843-r22 { fill: #7f8081 } - .terminal-52139843-r23 { fill: #7c7d7e } - .terminal-52139843-r24 { fill: #31220c;font-weight: bold } - .terminal-52139843-r25 { fill: #e2e3e3 } - .terminal-52139843-r26 { fill: #104e2d } - .terminal-52139843-r27 { fill: #7a7b7b } - .terminal-52139843-r28 { fill: #1c1c1c } - .terminal-52139843-r29 { fill: #191919 } - .terminal-52139843-r30 { fill: #181818 } - .terminal-52139843-r31 { fill: #7c7c7c } - .terminal-52139843-r32 { fill: #494949 } - .terminal-52139843-r33 { fill: #ddedf9 } + .terminal-3822425727-r1 { fill: #c5c8c6 } + .terminal-3822425727-r2 { fill: #e3e3e3 } + .terminal-3822425727-r3 { fill: #313437 } + .terminal-3822425727-r4 { fill: #324f70 } + .terminal-3822425727-r5 { fill: #4f9262 } + .terminal-3822425727-r6 { fill: #a4823a } + .terminal-3822425727-r7 { fill: #904354 } + .terminal-3822425727-r8 { fill: #7c7d7e;font-weight: bold } + .terminal-3822425727-r9 { fill: #75828b;font-weight: bold } + .terminal-3822425727-r10 { fill: #192e1f;font-weight: bold } + .terminal-3822425727-r11 { fill: #3a2a13;font-weight: bold } + .terminal-3822425727-r12 { fill: #978186;font-weight: bold } + .terminal-3822425727-r13 { fill: #101011 } + .terminal-3822425727-r14 { fill: #0c1e39 } + .terminal-3822425727-r15 { fill: #156034 } + .terminal-3822425727-r16 { fill: #825210 } + .terminal-3822425727-r17 { fill: #5b132a } + .terminal-3822425727-r18 { fill: #768189 } + .terminal-3822425727-r19 { fill: #e1e1e1 } + .terminal-3822425727-r20 { fill: #3a2a13 } + .terminal-3822425727-r21 { fill: #7b7b7b } + .terminal-3822425727-r22 { fill: #78838b } + .terminal-3822425727-r23 { fill: #7f8081 } + .terminal-3822425727-r24 { fill: #7c7d7e } + .terminal-3822425727-r25 { fill: #31220c;font-weight: bold } + .terminal-3822425727-r26 { fill: #e2e3e3 } + .terminal-3822425727-r27 { fill: #104e2d } + .terminal-3822425727-r28 { fill: #7a7b7b } + .terminal-3822425727-r29 { fill: #1c1c1c } + .terminal-3822425727-r30 { fill: #191919 } + .terminal-3822425727-r31 { fill: #181818 } + .terminal-3822425727-r32 { fill: #7c7c7c } + .terminal-3822425727-r33 { fill: #494949 } + .terminal-3822425727-r34 { fill: #ddedf9 } - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - WidgetDisableTestApp + WidgetDisableTestApp - - - - WidgetDisableTestApp - ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ - ButtonButtonButtonButtonButton - ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ -  Column 1  Column 2  Column 3  Column 4  -  0         0         0         0         - This is list item 0 - This is list item 1 - ▼ This is a test tree - ├── Leaf 0 - Hello, World! - - ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ - - ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ - ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ - This is an empty input with a placeholder - ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ - ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ - This is some text in an input - ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ - ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ - + + + + WidgetDisableTestApp + ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ + ButtonButtonButtonButtonButton + ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ +  Column 1  Column 2  Column 3  Column 4  +  0         0         0         0         + This is list item 0 + This is list item 1 + ▼ This is a test tree + ├── Leaf 0 + Hello, World! + + ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ + + ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ + ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ + This is an empty input with a placeholder + ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ + ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ + This is some text in an input + ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ + ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ +