-
Notifications
You must be signed in to change notification settings - Fork 832
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
TagInput Styling issues #1516
Comments
Hey @JayYoungman, Can you provide a minimal code sandbox with the version you are currently on and the version you're trying to upgrade to that has the static width issue? The TagInput was recently updated a few times - primarily for the autocomplete capability, (#1400) and later to fix how the underlying Finally, I'd encourage you to take a look over our Code of Conduct for future questions or issues you might raise. While we provide Evergreen free for the community to build with, it primarily exists as the design system for our own applications. We don't have a full team dedicated to features, maintenance, etc., so your patience is appreciated while we triage issues. |
First off, apologies for the tone of the message, it's been quite frustrating with this migration from v5 to v6. Im afraid it really hasn't been very well documented. We have raised a few issues, but again I must apologise, as we was not aware this was not fully maintained, it does state on the github it is maintained and supported, as well as documentation being a priority. Evergreen is now a huge part of our production app, i'd probably ask that the Github gets updated so people are aware this this project is not fully maintained and its main use case is for your own applications, If we had known this, we would probably have gone with a different UI library. Thanks for taking the time to reply to the ticket, will paste the sandbox asap Thanks |
Here is a link to the sandbox https://codesandbox.io/s/inspiring-mcclintock-ohsq9h As you can see, i have a flex container, with 3 elements inside, they are % based widths, notice when inspecting the input element in dev tools, the tag input overflow its field, in our application it expands off the page, or in places where there is a button or element to right, it expands overt the top of it. This can be avoided by adding width: 0 in inputProps, however this causes other issues, and a bit of the border still gets cut off. Thanks for taking a look. Jay |
Hey @JayYoungman, it looks like this was a regression with #1476. Using v6.9.11 doesn't seem to have this issue. I'll look into a fix for this. Thanks for flagging! |
@brandongregoryscott Thanks very much for your time and patience. we will try downgrading to 6.9.11 for the time being. thanks again. |
FYI there seems to still be an issue on 6.9.11, there is a strange padding left: 4px, on the container div for the TagInput, not sure if this is fixed in a later version, but the TagInput component on the evergreen docs doesnt have this 4px padding-left on the container div. Cheers |
Can you provide a screenshot of that? I'm not seeing it on your Codesandbox example pointed @ 6.9.11 |
Yep just checked out the sandbox and you are right it does not show on there. However here is a screenshot of our application, with the appended class ub-pl_4px being appended to it, very confused with this one! |
We've temporarily fixed with InputProps width 99% |
@JayYoungman I think it's actually from the |
@brandongregoryscott ah that will explain it then! I'm wondering if there is any point in us continuing to use the classicTheme, but as there has been so much design changes and this app is in production i'd need to run this by the directors! Thank you so much for your time, i honestly really appreciate it. |
There seems to be some issues with the TagInput styling in the latets upgrade. 10.5.3. We are trying to migrate from v5, with various issues, but aren't getting any response from here when creating tickets. Heres another;
The changelog suggests the tag input gets a 100% width, when in fact its default width is 280px if no width is provided, this is causing all kinds of issues, and when we are trying to pass a new width in via input props, these don't even get added to the input, but the parent div. It seems you've really regressed with your components in this update. Adding static heights and widths onto inputs like this makes it really difficult to use. I've added some screenshots but won't hold my breath waiting to hear from you.
Notice our parent width is 40%, based on a reponsive size. And your tag input is just overflowing this, with 280px.
The text was updated successfully, but these errors were encountered: