Labels in tables need some left padding

how can i reproduce this error

Have the same error on my install.

In my case the table contains unlimited number of nodereference fields (Autocomplete widget) and from the screenshot above it seems mfer is using unlimited media fields (Media file selector widget).

The offending CSS is in field.css

form .field-multiple-table th.field-label {
    padding-left: 0;
}

I agree, there should be some padding on the left of these labels. This code fixes the problem.

form .field-multiple-table th.field-label {
    padding-left: 6px;
}

Meanwhile, I've been getting around this bug by creating an custom administration theme that's a child of Seven, and putting this code into that child theme.

Ok, here's a patch with that change.

Is this a bug only experienced in contrib? I never saw it in core, and cant find a place to reproduce it.

This is in core. It's been there for a long time. It's a bug in the Seven theme — one that you will see even with a brand new install and nothing downloaded from contrib.

How to reproduce:
1) Create a multivalue field in any content type. (Doesn't matter what kind of field).
2) Go to enter content for that content type.
3) Look at the table header for the multivalue field form. :(

Actually, this code looks better and I believe is closer to what was originally intended.

form .field-multiple-table th.field-label {
    padding-left: 10px;
    padding-top: 4px;
}

A patch with the code from comment 8. I hope.

Re-rolled patch.

The proposed change looks good to me. Note that the Drupal 8.x patch will need to be rerolled, because the core directory structure for Drupal 8 has now changed. (For more information, see #22336: Move all core Drupal files under a /core folder to improve usability and upgrades). When the patch has been rerolled, please set the issue back to "Needs Review."

Tagging as novice for the task of rerolling the Drupal 8.x patch.

If you need help rerolling this patch, you can come to core office hours or ask in #drupal-gitsupport on IRC.

Rerolled due to file structure change.

remove styles, keep it same as other TH head

#14 is interesting; I wonder why that CSS was there to begin with? Are we altering the rendering of anything else by making this change?

I guess it had padding-left on LABEL

<th class="field-label" colspan="2"><label>test: </label></th>

I have reviewed this patch and I can confirm that the latest 8.x patch fixes this bug as droplet describes. It also fixes the identical problem in Bartik. (should the component be changed to field system or CSS?)

The line in field.css was added 3 years ago in what appears to be an unrelated commit:
http://drupalcode.org/project/drupal.git/commit/4ac090eb54ecc7ad5bf5df42...

To answer the question "Are we altering the rendering of anything else by making this change?": No. The CSS selector includes the class "field-multiple-table" and this string occurs just once in core outside of the css files this patch touches: in core/modules/field/field.form.inc where tables are generated for multi-value fields.

Thanks @ezheidtmann! We should probably double-check this fix looks correct in:

• Core themes
• Supported browsers
• RTL

Checked D8 before the patch to verify I could see the reported problem; then ran the D8 patch and verified that it sets padding acceptably for the label of multi-value fields, as seen under Firefox, Safari and Chrome, under Seven and Bartik; checked RTL as well. (I wasn't able to get a test site to where I could get at it from IE.) Looks good.

Verified also under IE8 as well.

Thanks! Committed/pushed to 8.x, there's a 7.x patch here already so leaving RTBC.

I tried the Drupal 7 patch in Garland and it didn't look good:

Before:

After:

So, it introduces a misalignment in the field label where there wasn't one before.

Not sure what to do about that, because overall the patch does make sense.

I think the issue is that Garland is doing some weird stuff with its table layouts (in fact, if the original change was made 3 years ago as described above, I think that was back when Garland was still the default theme so maybe it was done to "fix" Garland)... So, we could leave the change as is and then do something else to fix Garland, but that also makes me wonder if there are other themes out there that this generic fix will break.

Moving back to "needs review" since it seems we need a little more thought on how to handle this for Drupal 7.

Going to take a quick glance at this during a meetup tonight as an example.

It does seem a little wonky in Garland, but should we fix that with some theme-specific CSS, or should we leave it be?

In my testing, I found the exact same thing happened as David_Rothstein.

I tried the patch in #14 (1038356-seven-table-th-label.patch) in Drupal 7.42-dev and I like the padding that is given in the label. I tested this in themes (Seven, and Bartik), Firefox and Chrome, and the RTL language Arabic which works for me too.

Hi,
I have checked this issue in drupal7. Its working fine.

Add padding to your table form field i.e

form .field-multiple-table th.field-label {
padding-left: 0;
}

Add this CSS to active theme file.

Cheers,

Steps I followed to test the patch #14:
1) I installed the Drupal 7.52-dev.
2) Then I saw the issue in the labels of the table.
3) I downloaded the patch #14 and applied it in the Bartik theme.
4) I checked the patch for firefox and chrome and it is working fine for the both.
I'm attaching the screenshots of before and after applying the patch.

Applied the patch successfully in Seven 7.55-dev and Stark 7.55-dev ( Drupal 7.x) and the labels alignment looks good.

This is the same patch as before, and it has the same problem that I identified previously in #24.