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.

Sign up for GitHub

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

Jump to bottom

Margin issue with 'width: 90%' on wide text blocks #2784

Open
jamiecarter7 opened this issue Oct 12, 2023 · 0 comments
Open

Margin issue with 'width: 90%' on wide text blocks #2784

jamiecarter7 opened this issue Oct 12, 2023 · 0 comments

Comments

@jamiecarter7
Copy link

jamiecarter7 commented Oct 12, 2023 •
edited
Loading

When creating a wide text block in the dashboard - I've noticed a strange margin issue.

Its being caused by the following line

width: '90%',

link -> https://github.com/dhis2/dashboard-app/blob/9c6c0c65a20852fd0f1187cc5a359c9180d5b43b/src/components/Item/TextItem/Item.js#L30C19-L30C19

Seems to create a weird styling bug when using the text block in a wide variant resulting in huge X margins. Its caused because the 'width: 90%' of the texy body a ;margin: 0 auto; used to center it.

Screenshot 2023-10-12 at 14 00 04

Screenshot 2023-10-12 at 13 59 55

It means for some strange margins breaking the visual flow of the cards. Here are 2 examples:

Screenshot 2023-10-24 at 16 04 19 Screenshot 2023-10-24 at 16 04 28
@jamiecarter7 jamiecarter7 changed the title Margin issue with width: 90% on wide text blocks Margin issue with 'width: 90%' on wide text blocks Oct 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@jamiecarter7