web3ui/web3uikit

[InputNew]: description position to absolute

AbhinavMV opened this issue · 6 comments

AbhinavMV commented

Behaviour: When adding margin or gap style property on input.
Margin is added between input and description

image

Expected: Description should be fixed and margin should be below input

Solution: Fix description using absolute position similar to invalid message.

uday03meh commented

Hi, Can someone please assign this to me?

  • 🎉1
AbhinavMV commented

Hey @uday03meh 👋🏻
Sure will assign you this issue, If you have any questions or get stuck somewhere, reach out to us on discord -> Moralis server -> web3uikit channel and we will help you out 🙌🏻
thankyou

  • ❤️1
AbhinavMV commented

Hey @uday03meh 👋🏻

How is this issue going? Do let us know if you are facing any issues or need any help 😄 🙌🏻

  • ❤️1
AbhinavMV commented

Hey @uday03meh

Please let us know if you need any help with this issue or if you are not working on it anymore. 😄

BillyG83 commented

hey @AbhinavMV using absolute is by design, otherwise the page jumps when the description / error message is rendered. I would just wrap the element in a div and add the padding to the bottom of the parent dev

AbhinavMV commented

Hey @BillyG83 , yes but in the input component, the description is not being used as absolute which is why this issue is happening. This is what we have right now.

const StrongStyledDescription = styled.strong`
    ${resetCSS}
    ${fonts.text}
    color: ${color.blueGray50};
    font-size: 12px;
    padding: 0 16px;
`;