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

Add margin between radio buttons/checkboxes and their labels/strings #17948

Closed
wants to merge 1 commit into from
Closed

Add margin between radio buttons/checkboxes and their labels/strings #17948

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions web/xfa_layer_builder.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,10 @@
max-height: 100%;
}

.xfaRight > :is(.xfaRadio, .xfaCheckbox) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't we need a rule for .xfaLeft as well? Moreover, in the Bugzilla ticket the margin directions are reversed, so .xfaRight sets a margin-left but here we set a margin-right; is that correct?

Copy link
Author

@Joewebsta Joewebsta Apr 23, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The styles in the bugzilla ticket target the .xfaCaption and .xfaCaptionForCheckButton classes which leads to the unexpected html element movement we observed last week (See calixteman's comment re: xfa_issue14071.pdf).

I took an alternative approach by targeting the .xfaRadio and .xfaCheckbox classes instead and as a result had to swap the margin left/right properties.

The xfaRight styles below work correctly and are included in the PR:

.xfaRight > :is(.xfaRadio, .xfaCheckbox) {
  margin-right: 4px;
}

The xfaLeft styles below do not work correctly and were not included in the PR (I apologize, I should have explained my rationale for this). These styles once again lead to unexpected HTML element movement.

.xfaLeft > :is(.xfaRadio, .xfaCheckbox) {
  margin-left: 4px;
}

See the attached examples of incorrect element movement. The green background was add by me to highlight the element shift.

xfa_issue13994
xfa_issue14150
xfa_issue13213

Any suggestions on how to proceed?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Joewebsta Can you share a link to the pdf you used ?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The images above were taken from the following test pdfs:

  • xfa_issue13994
  • xfa_issue14150
  • xfa_issue13213

Some additional examples are:

  • xfa_bug1716816.pdf
  • xfa_bug1716980.pdf
  • xfa_bug1718735.pdf
  • xfa_dhl_shipment.pdf
  • xfa_hsbc_closure.pdf
  • xfa_issue13597.pdf

margin-right: 4px;
}

.xfaTop {
display: flex;
flex-direction: column;
Expand Down