Skip to content
OverviewSolutions
22
Comments
4
Boyan Liu
@BoyanLiuu

All comments

  • Boyan Liu•465
    @BoyanLiuuPosted almost 4 years ago

    Hello , Iqbal Everything looks good to me , but I would like to give some suggestion for the css part. I notice that you are using rem , which is nice. I am suggesting you can set font-size:62.5% in the root. It would turn default 16 px into 10 px which you could easily do the math in the future. Another one is You can add box-sizing: border-box; in the root element as well. It guarantees that the content box shrinks to make space for the padding and borders. Therefore, if you set your element width to 200 pixels, border-box makes sure that the content, padding, and borders fit in this number

    https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

    Happy coding!

    2
  • Kristian Dunne•305
    @KristianDunneSubmitted almost 4 years ago

    First time using Formik and wow I am impressed at how easy it all was!

    I could improve the readability and maintainability of the form by creating my own custom input field components.

    I also need an elegant for the icons in the input fields upon a validation error. Suggestions would be appreciated!

    React App styled with Tailwind and sign up form built using Formik

    1
    Boyan Liu•465
    @BoyanLiuuPosted almost 4 years ago

    I can suggest one

    It is use position absolute for the icon you can have a div include both input and error icon div for the error icon div, you can set background image for the error icon. Then you use position absolute for the icon dive and position relative for the outter div that wrapper both input and error icon div. Then you use top bottom to put the error icon div in the proper position.

                            <div class="input-container">
                            <input
                                aria-label="first name"
                                type="text"
                                name="first-name"
                                id="first-name"
                                placeholder="First Name"
                            />
                            <div class="error-icon first-icon"></div>
                            <div class="error-message">
                                First Name cannot be empty
                            </div>
                        </div>
    1
  • Boyan Liu•465
    @BoyanLiuuPosted almost 4 years ago

    Thanks for your comment! I forget there is a password input type. Thanks for pointing out.

    0
  • Boyan Liu•465
    @BoyanLiuuPosted almost 4 years ago

    One thing I can suggest is to have a max-width property in your container when it is in the phone viewpoint. So It would not stretch all the way. Other than that It looks good to me.

    1