Problem/Motivation
The wording after the add button has incorrect spacing by default. There needs to be a space added between the word "to" and the emphasis tag. While there is such a space in the underlying code, it does not appear to be rendered properly as a visible space in Chrome, Safari or Firefox.
Steps to reproduce
1. Go to https://simplytest.me
2. In the field, type "Core" (without the quotes)
3. Choose Drupal core
4. Click the add project button
5. In the project field, type "Paragraphs"
6. Choose Paragraphs
7. Click the button to create the site
8. Once the site has been created, log in as admin
9. In the admin menu, choose Manage, then Structure, then Paragraphs types
10. Click Add paragraph type
11. Type label "Single contact"
12. Click Save and manage fields
13. Click Create a new field
14. Choose Plain text
15. Click Continue
16. Type label "Contact name"
17. Choose text
18. Click Continue
19. Change Allowed number of values to unlimited
20. Click Save settings
19. Choose Structure, then Content types, then, on the row for Basic page, choose Manage fields
20. Click Create a new field
21. Choose Paragraphs
22. Click Continue
23. Type label "Contact information"
24. Click Continue
25. Under paragraph types, check Single contact
26. Click Save settings
27. In the admin menu, choose Manage, then Content, then Add content, then Basic page
Expected result:
The Contact info field uses the wording "Add Single contact" on the button, followed by "to Contact information" with a space between "to" and "Contact".
Actual result:
The Contact info field uses the wording "Add Single contact" on the button, followed by "toContact information" with no apparent space between "to" and "Contact". While the underlying code reads:
<div class="field-actions"><div class="paragraphs-dropbutton-wrapper paragraphs-add-wrapper button--small js-form-wrapper form-wrapper" data-drupal-selector="edit-field-contact-information-add-more" id="edit-field-contact-information-add-more"><input class="field-add-more-submit button--small button js-form-submit form-submit" data-drupal-selector="field-contact-information-single-contact-add-more" formnovalidate="formnovalidate" type="submit" id="field-contact-information-single-contact-add-more" name="field_contact_information_single_contact_add_more" value="Add Single contact"/><input class="paragraph-type-add-delta dropdown" data-drupal-selector="edit-field-contact-information-add-more-add-more-delta" type="hidden" name="field_contact_information[add_more][add_more_delta]" value=""/></div>
to <em class="placeholder">Contact information</em></div>
with a space, that's space does not appear to be rendered by Firefox, Safari, or Chrome (all Mac).
Proposed resolution
The easiest solution might be to remove the emphasis. Alternatively, choose some more appropriate class than "placeholder".
Remaining tasks
User interface changes
API changes
Data model changes
| Comment | File | Size | Author |
|---|---|---|---|
| #5 | After.png | 42.81 KB | adwivedi008 |
| #5 | before.png | 42.86 KB | adwivedi008 |
Issue fork paragraphs-3424486
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
charles belovComment #5
adwivedi008 commentedAble to reproduce the issue reported by @Charles Belov
Fixed the issue and also added the screenshot of the before and after issue
Moving the issue to needs review.
Comment #6
adwivedi008 commentedComment #7
silvi.addweb commentedworking fine for me
Comment #9
berdirI think this was fixed with CSS in #3417771: Some styling no longer applies due to form-actions -> field-actions html change. I'm not sure if HTML or CSS is better for that, but if we change to this we probably need to remove the extra CSS margin.
Comment #10
charles belovComment #11
charles belovHave these changes been pushed to the release version yet? I'm still getting the same results - no space between "to" and Contact even though the source code has a space between "to" and the emphasis tag - in simplytest.me using the (adjusted to reflect current behavior) steps above.
Comment #12
charles belov