I've been seeing this issue for a while on a number of sites where I've installed Fences. Drupal comes with the ability to show/hide the field label, and if it's shown to make it inline or block. With Fences installed, the inline label is not in fact inline, it behaves as if it is block as well.

I'm going to look into this deeper today (it finally got filed as a bug on a client site). I'll post more about what I find.

Comments

jensimmons’s picture

Ok, so it looks like the label itself is being wrapped in a span, groovy. But the element immediately after it is wrapped in a div (in this case, because I set the Fences spec to div). <span><div> displays as if the label is block...

Here's a screenshot to explain the problem more clearly.

code sample

jensimmons’s picture

Ok — here's what's happening.

Core without Fences

Drupal creates this markup for a field that has an inline label.

<div class="field field-name-[fieldname] field-type-text field-label-inline clearfix">
     <div class="field-label">Label:</div>
     <div class="field-items"><div class="field-item even">This too, it's just a Core field</div></div>
</div>

Note the class on the outer div, field-label-inline.

Then there is CSS that floats the label (wrapped in a div) to the left so that the field content (also wrapped in a div) will appear to be inline. Both elements are still actually block, they just appear inline.

line 6 of field.css in core:

.field-label-inline .field-label, 
.field-label-inline .field-items {
    float: left;
}

When we use Fences, the outer wrapper is removed (yay!) and therefore there's nothing to mark whether the label is inline or not. I think we need a class on the label's <span> so we can float it left.

alanburke’s picture

johnalbin’s picture

What if we added a class (ugh.) to the content wrapper to make it display: inline; only when the label is marked as being inline?

hanpersand’s picture

As a front-end coder, I prefer John's suggestion of adding a class that has display: inline on it. Then it will be converted to a true inline element and not a block with a float left.

jensimmons’s picture

Yes, we three agree. We need a class on the element that wraps the Label. I think that should do it Alan, yes? There might be use-cases for more markup, but to simply get an inline label to be inline, I think moving the class from the (no-longer-existing)-outer-div to the element (div or span) that directly wraps the label will do it. We just need something to toggle between 'inline' and nothing so that the needed CSS can be written.

<div class="field-label inline">Label:</div>

<span class="field-label inline">Label:</div>

Not having any more inline labels doesn't work.

alanburke’s picture

Will this work for multi-valued fields?
What about multiple fields with inline labels?
Sorry - don't have time to test properly, but they were issues I hit without the wrapper div.

jensimmons’s picture

I haven't tested multiple value fields either. But can we open a separate issue for that? Let's at least fix this one thing. Then if there are more problems, we can fix those as well.

If my memory is right, multi-vaule fields get a separate set of tpls to handle the fact they are different.

Also — hi Alan!

mstrelan’s picture

Wouldn't the desired output be something like this?

<div class="field-gender">
  <span class="label-inline">Gender:</span> Male
</div>

If you had an inline label and inline value, and no wrapper, then when you have two fields in a row they appear in the same line. I don't think this really works with multiple value fields though, but hey, that's what the verbose markup in core is designed for!

Anonymous’s picture

some news for this issue?

merilainen’s picture

So this module breaks core functionality? I know clean html is awesome, but you don't need to be religious about it. Shouldn't there be an option to use core's markup? Then you could inline the labels in the "manage display" page.

mrpauldriver’s picture

Issue summary: View changes

It would be good to see this issue resolved.

cosmin-hm’s picture

Still looking for a solution.

giorgosk’s picture

johnalbin’s picture

Version: 7.x-1.0 » 7.x-2.x-dev

  • JohnAlbin committed 6f04a75 on 7.x-2.x
    Issue #2158333: Always use semantic h3 for field labels
    Issue #1788082:...
johnalbin’s picture

Status: Active » Fixed

I've added a inline-sibling class to the field label so that the label and its sibling get display: inline styling.

  • JohnAlbin committed bd12f33 on 7.x-2.x
    Issue #1788082: Inline labels are not inline
    

  • JohnAlbin committed f0c30f0 on 7.x-2.x
    Issue #1788082: Inline labels are not inline
    

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.