web3uikit icon indicating copy to clipboard operation
web3uikit copied to clipboard

[InputNew]: description position to absolute

Open AbhinavMV opened this issue 2 years ago • 6 comments

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.

AbhinavMV avatar Jan 04 '23 15:01 AbhinavMV

Hi, Can someone please assign this to me?

uday03meh avatar Jan 05 '23 13:01 uday03meh

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

AbhinavMV avatar Jan 05 '23 17:01 AbhinavMV

Hey @uday03meh 👋🏻

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

AbhinavMV avatar Jan 12 '23 09:01 AbhinavMV

Hey @uday03meh

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

AbhinavMV avatar Feb 09 '23 14:02 AbhinavMV

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

BillyG83 avatar Feb 26 '23 11:02 BillyG83

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;
`;

AbhinavMV avatar Feb 26 '23 17:02 AbhinavMV