Hi,
Here is another couple of lines I always need to undo in my child themes. Is there a reason for the base theme to add the class "form-inline" to all elements of a certain type? It makes the forms elements display in an inconsistant manner.
Maybe this behaviour could be opted in with a setting in the appearance form?

@@ -66,9 +66,6 @@ public static function process(array $element, FormStateInterface $form_state, a
     if ($e->hasClass('container-inline')) {
       $e->replaceClass('container-inline', 'form-inline');
     }
-    if ($e->isType(['color', 'date', 'number', 'range', 'tel', 'weight'])) {
-      $e->addClass('form-inline', 'wrapper_attributes');
-    }
 
     // Process input groups.
     if ($e->getProperty('input') && ($e->getProperty('input_group') || $e->getProperty('input_group_button'))) {

Comments

joos created an issue. See original summary.

markcarver’s picture

Title: Remove form-inline from numeric fields » Allow overriding of elements that are automatically converted to "form-inline"
Priority: Minor » Normal

This is, inherently, an opinionated topic.

These elements were designed to be inline because their inputs usually only require small amounts of data.

Also, simply removing this would break other people sites that either a) already like that this is implemented for them automatically or b) implemented workarounds to deal with this.

Instead of removing this completely, I would say that this plugin should implement a property on the class that can be overridden by a sub-theme as needed. This would allow developers to either a) remove the elements completely (as show above) or b) extend it with additional elements.

An example of how this has already been accomplished in the ThemeSuggestions alter plugin can be seen here:

https://www.drupal.org/node/2838155#after
https://drupal-bootstrap.org/api/bootstrap/src%21Plugin%21Alter%21ThemeS...
https://drupal-bootstrap.org/api/bootstrap/src%21Plugin%21Alter%21ThemeS...

joos’s picture

Hi Mark,
Yea, what to do and not to do is probably gonna be a popular topic i theme-project like this. I'm with the do-less side of that debate. :)

I know, we can't change that behaviour, thats why I suggested a setting for that so one could get a consistant behaviour, but the out-of-the box version still would function like it do today. Im not personally found of making code that undo stuff later in the execution chain since that is only gonna make sites slower. But what you suggest is maybe not like that at all. Gonna look at the links later.

Thanks for your reply.

JordiK’s picture

Hi Mark,

agree with you, that the 5 fields listed will most of the time require a narrower field and a small amount of data.
But the placement of the label is always inline, which makes the forms look weird, when all other field types have the label above.
What would be the preferred way to set the label position of a field (UI or a property or ...)?

Thanks in advance!

markcarver’s picture

But the placement of the label is always inline, which makes the forms look weird, when all other field types have the label above.

Hm. I hadn't thought about that. Yeah, that is a little off-putting.

What would be the preferred way to set the label position of a field

Probably via CSS.

---

The main problem is that Bootstrap (the framework) does not provide any way to natively reduce a form element's width. They're all 100% width, unless inline. This, as you pointed out, also comes with it's own assumptions applied to the label.

I think, perhaps, we'll need to add a special class in this base theme that, when applied, will just reset only the input element's width back to the natural auto setting.

joos’s picture

But the placement of the label is always inline, which makes the forms look weird, when all other field types have the label above.

Exactly what I ment with "inconsistant behaviour". Thanks for putting it in plain english!

My solution sofar is to revert the form-inline styles with a more specific css rule in my sass files. But I just tried an alternative, I made a copy of the template "form-element.html.twig" in my base theme and added ".removeClass('form-inline')" at row #73.

<div{{ attributes.addClass(classes).removeClass('form-inline') }}>

Looks promising and could perhaps also be an option on how to customize forms in other bootstrap ways, inline, horizontal etc.