There are some formatting issues around the prefix and suffix on text fields. Themes like bartik display the fields inline to ensure prefix and suffix are displayed correctly. Bootstrap uses display: block and causes a number of formatting issues here.

Bootstrap:
Bootstrap

Bartik:
Bartik

CommentFileSizeAuthor
bartik.png10.91 KBbverc
bootstrap.png10.51 KBbverc
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

bverc’s picture

Issue summary: View changes
bverc’s picture

After looking through the code in form-element.func.php, I can see that to get the expected prefix behavior, #input_group is required to be set. However there seems to be no location to set that on node edit fields.

I therefore make the suggestion that the code be changed to implement the input_group by default and perhaps include an opt-out when not required. Alternatively include a theme wide setting to enable this.

markhalliwell’s picture

Status: Active » Closed (duplicate)
Related issues: +#2110765: Add settings to toggle #input_group on fields in UI
bverc’s picture

@markcarver can you explain why this needs to be in a separate module? Even if you want to add the input_group ability to the Bootstrap UX module, surely those not using that module should have prefixes and suffixes displayed inline like in Bartik. The prefix next to the label and suffix below the field look silly.

markhalliwell’s picture

The reason #input_group is necessary is because in Bootstrap, input elements are full width. That is why the prefix appears above it and the suffix appears below it. If the input element wasn't full width, I believe the prefix and suffix are wrapped with classes that would keep the DOM elements inline with the input element.

Considering we would like to keep parity with the external framework as much as possible, overriding the input width is not an option. The only alternative is to use the input group component of Bootstrap instead whenever possible.

We cannot simply add $element['#input_group'] = TRUE; to each and every input element as, that too, would have an adverse effect.

The only real option is to either do a case by case basis in the base theme code (based on field names, which is completely unrealistic) or to have a configurable alternative that can be exported as part of the field configuration.

The later is something a theme cannot do. Only modules can implement the necessary hooks to alter a field element via the Field API (like that issue does).

bverc’s picture

Understood.

We cannot simply add $element['#input_group'] = TRUE; to each and every input element as, that too, would have an adverse effect.

Would we be able to do a check for prefix or suffix, and then apply input_group in that instance, or has that also got unintended ramifications? (This is what I'm currently doing)

markhalliwell’s picture

If we applied this check to every input element, then anytime there is a prefix or suffix, #input_group would be set. This has adverse effects because there are use cases where you don't want that property to be applied to every input element. I have had 3 projects already where it's only ever really been needed a few times. Prefixes and suffixes can be used for more than just simple text. Often times, for complicated field requirements, there may be extra markup that's injected into them. These don't need to be wrapped in an extra wrapper that turns it into an input group.

bverc’s picture

Fair enough. I shall eagerly await the Bootstrap UX patch, in the meantime using my hack to the field template.

Thanks for all your work on this.