Skip to content

Add placeholder support #101

New issue

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

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

Already on GitHub? # to your account

Open
yaphanlong opened this issue May 25, 2023 · 3 comments
Open

Add placeholder support #101

yaphanlong opened this issue May 25, 2023 · 3 comments
Labels
enhancement New feature or request

Comments

@yaphanlong
Copy link

Hi, is it possible to include placeholder support as shown below? Current workaround is to use javascript and target each input to inject placeholder.

Screenshot 2023-05-25 at 2 10 54 PM

@AlexMiniApps
Copy link
Owner

@yaphanlong Hi, I will research it, but it seems that this placeholder will not be native for the HTML.

@AlexMiniApps AlexMiniApps added the enhancement New feature or request label May 25, 2023
@rbalet
Copy link
Contributor

rbalet commented Feb 8, 2024

@AlexMiniApps @yaphanlong It would be actually possible by

  1. Adding the has-value class up in the span (or adding a new class)
  2. Displaying the following css in the span, if it doesn't have the class
span {
  &.has-value {
          &:after {
            content: "";
            position: absolute;
            height: 8px;
            width: 8px;
            top: calc(50% - 4px);
            left: calc(50% - 4px);
            background-image: radial-gradient(
                    circle at center,
                    lightgray 5px,
                    transparent 5px
            );
            border-radius: 100%;
            background-size: 20px;
            background-position: top center, bottom center;
            background-repeat: no-repeat;
    }
   }
}

I can make a pull-request if you wish

@AlexMiniApps
Copy link
Owner

@rbalet Thanks for the suggestion

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

No branches or pull requests

3 participants