Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Auto resize some textarea fields #2998

Merged
merged 3 commits into from
Apr 2, 2024
Merged

Auto resize some textarea fields #2998

merged 3 commits into from
Apr 2, 2024

Conversation

DL6ER
Copy link
Member

@DL6ER DL6ER commented Apr 1, 2024

What does this implement/fix?

Implements auto resizing for selected <textarea> input fields

Note

This feature is brand new and requires an up-to-date browser. To date, only Chrome 123.0+ supports this.

Examples:
0
1
many

regex

1
2
3

There is some protection installed to ensure fields can neither get too small...

Screenshot from 2024-04-01 19-54-44

... nor too large (scrolling is enabled in this case):

Screenshot from 2024-04-01 19-55-50


Related issue or feature (if applicable): https://discourse.pi-hole.net/t/autoresize-von-textarea-dhcp-hosts-form-control-static-dhcp-configuration/68855

Pull request in docs with documentation (if applicable): N/A


By submitting this pull request, I confirm the following:

  1. I have read and understood the contributors guide, as well as this entire template. I understand which branch to base my commits and Pull Requests against.
  2. I have commented my proposed changes within the code.
  3. I am willing to help maintain this change if there are issues with it later.
  4. It is compatible with the EUPL 1.2 license
  5. I have squashed any insignificant commits. (git rebase)

Checklist:

  • The code change is tested and works locally.
  • I based my code and PRs against the repositories developmental branch.
  • I signed off all commits. Pi-hole enforces the DCO for all contributions
  • I signed all my commits. Pi-hole requires signatures to verify authorship
  • I have read the above and my PR is ready for review.

…t is applied to automatically scale to the size of their content.

Signed-off-by: DL6ER <dl6er@dl6er.de>
…ng into an undesirable visual state. Previously, inputs had a fair amount of fixed sizes, but after applying field-sizing: content, the inputs can become much too small or much too large.

Signed-off-by: DL6ER <dl6er@dl6er.de>
@rdwebdesign
Copy link
Member

I'm not sure if we should limit the width using max-inline-size.

The current layout uses width: 100% for other form elements.

@DL6ER
Copy link
Member Author

DL6ER commented Apr 2, 2024

Where would we need ultra-wide textarea inputs? I have no objections against removing parts of the defensive CSS if they are breaking something. The rules are there to prevent odd results with extremely long inputs like you could have in dns.hosts for records IPv6 + very long hostnames, etc.

@rdwebdesign
Copy link
Member

Where would we need ultra-wide textarea inputs?

That's not the issue, but we would have screen sizes where every form element will take 100% of its parent container, except these textarea elements, breaking the layout.

The rules are there to prevent odd results with extremely long inputs like you could have in dns.hosts for records IPv6 + very long hostnames, etc.

We currently have width: 100%.
With this rule, form elements won't be wider than their containers. Long lines will simply break inside the textarea.

style/pi-hole.css Outdated Show resolved Hide resolved
Signed-off-by: Dominik <DL6ER@users.noreply.github.com>
style/pi-hole.css Show resolved Hide resolved
@DL6ER DL6ER merged commit 92cf92b into development-v6 Apr 2, 2024
8 checks passed
@DL6ER DL6ER deleted the new/field-sizing branch April 2, 2024 19:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants