web3ui / web3uikit

Lightweight reusable Web3 UI components for dapps.
https://web3uikit.com
MIT License
1.71k stars 265 forks source link

[InputNew]: description position to absolute #997

Open AbhinavMV opened 1 year ago

AbhinavMV commented 1 year ago

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 1 year ago

Hi, Can someone please assign this to me?

AbhinavMV commented 1 year ago

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 commented 1 year ago

Hey @uday03meh 👋🏻

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

AbhinavMV commented 1 year ago

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 1 year ago

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 1 year ago

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