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

Fix CoreComponents margin between inputs and labels #5884

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

NTurchi
Copy link

@NTurchi NTurchi commented Jul 28, 2024

Description

This is a minor issue with the input component from the core_components.ex file (used in phx.gen.live)
A margin top is added by default on inputs for the spacing between the label and the input.

However it is not removed if a label is not provided. Which causes alignment issue when combining the input component with other elements.

As suggested by José Valim, putting the margin on the label itself is more appropriate.

Changes

  • Added a class attr to the label component
  • Remove mt-2 from inputs in CoreComponents
  • Add mb-2 to label with input

Closes #5832

before: margin on the input after: margin on the label
image demo

@NTurchi NTurchi marked this pull request as ready for review July 28, 2024 09:27
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

Successfully merging this pull request may close these issues.

Remove margin top on the input component if no label is provided in core_components.ex
1 participant