Cannot see password in Forms while field required (icon overlaps) + see icon not working in chrome #103

gbrault · 2023-10-05T10:02:29Z

Describe the bug

The smart-password-text-box overlaps with the Ok or Ko icon in all browers while used in a form
In Chrome, the see icon don't allows to actually see the password
- see: https://vscode.seadev.xyz/signin.html

To Reproduce

<body class="viewport">
        <div class="smart-grid-layout">
            <div class="row">
                <div class="col-sm-4"></div>
                <div class="col-sm-4">
                    <smart-card class="basic-card" style="width: fit-content;">
                        <div class="card-content" style="padding: 1% 1% 1% 1%;">
                            <h1  class="card-title">Sign In to SeaDev.xyz dev</h1>
                            <div class="smart-form-row">
                                <form id="signInForm" onsubmit="return false;">
                                    <div class="smart-form-row">
                                        <label>
                                            User Name:
                                        </label>
                                        <smart-input class="underlined" form-control-name="userName" id="userName"></smart-input>
                                    </div>

                                    <div class="smart-form-row">
                                        <label>
                                            Password:
                                        </label>
                                        <smart-password-text-box class="underlined" form-control-name="Password" id="Password"></smart-password-text-box>
                                    </div>

                                    <div class="smart-form-row submit">
                                        <smart-button class="success" form-control-name="submit" type="submit" onClick="auth()">Submit</smart-button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </smart-card>
                </div>
                <div class="col-sm-4"></div>
            </div>
        </div>
        <script type="module" src="/source/modules/smart.form.js"></script>
        <script type="module" src="/source/modules/smart.input.js"></script>
        <script type="module" src="/source/modules/smart.button.js"></script>
        <script type="module" src="/source/modules/smart.validator.js"></script>
        <script type="module" src="/source/modules/smart.passwordtextbox.js"></script>
        <script type="module" src="/source/modules/smart.card.js"></script>
</body>

Expected behavior

Ability to have the required icon and the see icon active (they overlap)
Clicking on see (which is always overlapped on any browser)
- don't work (Chrome): i.e. clecking on see icon don't show password
- works on Firefox and Edge
  Screenshots
  You can see the see icon rigth behind the green check (very small)

Desktop (please complete the following information):

OS: [e.g. iOS]: Windows 11
Browser
- Chrome Version 117.0.5938.150 (Build officiel) (64 bits)
- Edge Version 117.0.2045.55 (Version officielle) (64 bits)
- Firefox 118.0.1 (64 bits)

gbrault mentioned this issue Oct 5, 2023

Wrong font on user directives (in red) #104

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot see password in Forms while field required (icon overlaps) + see icon not working in chrome #103

Cannot see password in Forms while field required (icon overlaps) + see icon not working in chrome #103

gbrault commented Oct 5, 2023 •

edited

Cannot see password in Forms while field required (icon overlaps) + see icon not working in chrome #103

Cannot see password in Forms while field required (icon overlaps) + see icon not working in chrome #103

Comments

gbrault commented Oct 5, 2023 • edited

gbrault commented Oct 5, 2023 •

edited