Closed (fixed)
Project:
Fences - Semantic field markup and classes
Version:
7.x-2.x-dev
Component:
Markup
Priority:
Normal
Category:
Bug report
Assigned:
Unassigned
Reporter:
Created:
18 Sep 2012 at 16:49 UTC
Updated:
13 Oct 2015 at 04:04 UTC
Jump to comment: Most recent, Most recent file
Comments
Comment #1
jensimmons commentedOk, 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.
Comment #2
jensimmons commentedOk — here's what's happening.
Core without Fences
Drupal creates this markup for a field that has an inline label.
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:
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.Comment #3
alanburke commentedWill a class be enough?
See #1343578: [3.x] Add optional wrapper around field items and fix class structure for further discussion
Comment #4
johnalbinWhat if we added a class (ugh.) to the content wrapper to make it
display: inline;only when the label is marked as being inline?Comment #5
hanpersand commentedAs 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.
Comment #6
jensimmons commentedYes, 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.
Comment #7
alanburke commentedWill 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.
Comment #8
jensimmons commentedI 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!
Comment #9
mstrelan commentedWouldn't the desired output be something like this?
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!
Comment #10
Anonymous (not verified) commentedsome news for this issue?
Comment #11
merilainen commentedSo 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.
Comment #12
mrpauldriver commentedIt would be good to see this issue resolved.
Comment #13
cosmin-hm commentedStill looking for a solution.
Comment #14
giorgoskI think the solution lies here #1343578: [3.x] Add optional wrapper around field items and fix class structure
Comment #15
johnalbinComment #17
johnalbinI've added a
inline-siblingclass to the field label so that the label and its sibling getdisplay: inlinestyling.