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 Resizing of textArea and editor Input Fields. #266

Open
GudBoiNero opened this issue Mar 23, 2024 · 2 comments
Open

Auto Resizing of textArea and editor Input Fields. #266

GudBoiNero opened this issue Mar 23, 2024 · 2 comments
Labels
feature request New feature or request

Comments

@GudBoiNero
Copy link

Is your Feature Request Related to a Problem?

I am not exactly happy with the styling of the textArea or editor due to their scaling behaviors. They're less visually customizable than I would like, but the functionality is great.

Describe the Feature you'd Like

I wish that the textArea and editor input fields allowed for an option that would keep the height at the minimum height, so if there was no text it would look like an empty input box, then once you put a bunch of text in it would auto resize to fit the content.

I'm attempting to make a CSS snippet to do this right now, but it's really frustrating. Having this built-in would be amazing and I'm confident others would benefit from it.

Additional Context

No response

@GudBoiNero GudBoiNero added the feature request New feature or request label Mar 23, 2024
@GudBoiNero GudBoiNero changed the title Auto Resizing of [textArea](https://www.moritzjung.dev/obsidian-meta-bind-plugin-docs/reference/inputfields/textarea/) and [editor](https://www.moritzjung.dev/obsidian-meta-bind-plugin-docs/reference/inputfields/editor/) Input Fields. Auto Resizing of textArea and editor Input Fields. Mar 23, 2024
@GudBoiNero
Copy link
Author

GudBoiNero commented Mar 23, 2024

Using this little CSS snippet I made you can do auto resizing with ONLY the markdown rendered version. Unfortunately the actual editing mode is made with a textarea element and resizing those automatically requires JS.

INPUT[editor(class(mb-editor-scaling))]
body {
    --mb-editor-min-height: 5rem;
}

.mb-editor-scaling {
    > .editor-input {
        // Removes strange bottom and right padding.
        overflow: hidden !important;
        // Settings change this
        min-height: var(--mb-editor-min-height) !important;
    }

    // `textarea` is the editable element, only shown when being interacted with
    // `div` is the markdown rendered element, it automatically resizes with this snippet.
    > div:has(textarea + div) {
        div {
            position: relative !important;
        }
    }
}

/* @settings

name: Meta Bind Editor Scaling
id: mb-editor-scaling
settings:
- id: mb-editor-min-height
  title: Editor Min Height
  type: variable-text
  default: 5rem

*/

@mProjectsCode
Copy link
Owner

I might consider adding this as an argument in a future release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants