Label doesn't take long names into account

[Beee4life]

• I've read and understood the contribution guidelines.
• I've searched for any related issues and avoided creating a duplicate issue.

Please give us a description of what happened.

A label is not aligned properly when the previous label is long(er).
This is due to the fact spans are used instead of divs.
Now <br class="clear"> doesn't do the trick (see screenshot)

Please describe what you expected to happen and why.

I expected the fields to align properly.

How can we reproduce this behavior?

1. Create a post type with a long name
2. Add a taxonomy
3. Activate breadcrumbs

Technical info

• If relevant, which editor is affected (or editors):

• Classic Editor
• Gutenberg
• Classic Editor plugin

• Which browser is affected (or browsers):

• Chrome
• Firefox
• Safari
• Other

Used versions

• WordPress version: 5.0.3
• Yoast SEO version: 9.4
• Classic Editor plugin version: 1.3
• Tested with theme: Twentyseventeen

Suggested fix

Place every input + label in their own div.

[Djennez]

Hi @Beee4life and thank you for your submission. I tried to reproduce the issue, but even going over the top on name lengths I was unable to reproduce the indentation issue that you are showing:

The vertical alignment isn't the best, but I was really hoping to somehow recreate the indent of the middle label on your screenshot. Anything else that you can think of that might cause that?

[Beee4life]

I just checked, it still occurs in my installation.

But regardless if you can reproduce it, the code would be better if every element had its own row/container/div. Now it's just a bunch of spans separated by <br class="clear">.
That is what causing it (imho)....

This is the screenshot with the label selected in the inspector. As you can see the sd_date_type element is not properly aligned, because it's 'stuck' against the label of sd_company_type.

Solution: every row/input in it's own element

[jonoalderson]

Ah, we should definitely wrap these fields in containers. Makes sense.

[Beee4life]

I just noticed this issue still occurs, so I thought I check if there might be something on my side interfering with it.

When playing with the css I noticed if you remove the line margin: 5px 0; (or only the top or bottom margin) in yst_plugin_tools-1100.min.css the output shows as expected.

It's only a quick fix, but every row should still 'needs' to be in its own element.

[Djennez]

The issue is with the plugin, not on your side :)

I found that we already had an issue open regarding this problem, so I will close this thread in favor of that one.

As it currently doesn't break functionality I don't see it happening that we'll be picking this up quickly. However, we welcome any patches that the community may have to fix this.

[Beee4life]

No prob... Seems I also missed this one when creating it. Will follow that one.