Skip to content
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

First tag is clipped because of random placement in small screen #84

Open
knishant opened this issue Jun 25, 2024 · 0 comments
Open

First tag is clipped because of random placement in small screen #84

knishant opened this issue Jun 25, 2024 · 0 comments

Comments

@knishant
Copy link

Current behavior
I am using this module for a mobile app. For a display in portrait mode, where the width is 375 px, the first word added is often clipped. The word is long "conscientiousness" but it should easily fit in the width.

Expected behavior
The tag should be shown in the middle but it is shown on the left or right at random location and hence the text is clipped often.

Angular version:
Angular 17

angular-tag-cloud-module version:
17.0.1

I checked the code and the issue is with line 530. Randomness without bounds can place the tag outside of the div, hence it is clipped.
The following code

wordStyle.left = left + (Math.random() - 0.5) * 2 * (this.calculatedWidth / 5) + 'px';

can be replaced by the following by just placing some limits on the left value.

const maxLeft = this.calculatedWidth - width - 2;
left = left + (Math.random() - 0.5) * 2 * (this.calculatedWidth / 5);
wordStyle.left = Math.max(2, Math.min(maxLeft, left)) + 'px';

Now it will clip only when the text is larger than the screen.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant