Skip to main content
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user

This must be simple, but I cannot find the answer.

I want the label and the textfield on the same line. I tried this:

'odt-filter' => array(
  '#type' => 'textfield',
  '#title' => 'Filtra',
  '#attributes' => array(
    'id' => array(
      'odt-filter',
      ),
    'class' => array(
      'container-inline',
    ),
  ),
) ,

but then the class is applied to the input element, not to the item that contains both it and the label:

<div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-odt-filter form-item-odt-filter">
  <label for="edit-odt-filter">Filtra</label>
  <input id="odt-filter" class="container-inline form-text" data-drupal-selector="edit-odt-filter" name="odt-filter" value="" size="60" maxlength="128" type="text">
</div>

so that the class has not the desired effedt effect. I can (and I actually did, somewhere else) enclose the form element in a container which I can apply the class to, but since a container is already provided by default, I guess there should be a way to add a class to it... isn't there?

This must be simple, but I cannot find the answer.

I want the label and the textfield on the same line. I tried this:

'odt-filter' => array(
  '#type' => 'textfield',
  '#title' => 'Filtra',
  '#attributes' => array(
    'id' => array(
      'odt-filter',
      ),
    'class' => array(
      'container-inline',
    ),
  ),
) ,

but then the class is applied to the input element, not to the item that contains both it and the label:

<div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-odt-filter form-item-odt-filter">
  <label for="edit-odt-filter">Filtra</label>
  <input id="odt-filter" class="container-inline form-text" data-drupal-selector="edit-odt-filter" name="odt-filter" value="" size="60" maxlength="128" type="text">
</div>

so that the class has not the desired effedt effect. I can (and I actually did, somewhere else) enclose the form element in a container which I can apply the class to, but since a container is already provided by default, I guess there should be a way to add a class to it... isn't there?

This must be simple, but I cannot find the answer.

I want the label and the textfield on the same line. I tried this:

'odt-filter' => array(
  '#type' => 'textfield',
  '#title' => 'Filtra',
  '#attributes' => array(
    'id' => array(
      'odt-filter',
      ),
    'class' => array(
      'container-inline',
    ),
  ),
) ,

but then the class is applied to the input element, not to the item that contains both it and the label:

<div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-odt-filter form-item-odt-filter">
  <label for="edit-odt-filter">Filtra</label>
  <input id="odt-filter" class="container-inline form-text" data-drupal-selector="edit-odt-filter" name="odt-filter" value="" size="60" maxlength="128" type="text">
</div>

so that the class has not the desired effect. I can (and I actually did, somewhere else) enclose the form element in a container which I can apply the class to, but since a container is already provided by default, I guess there should be a way to add a class to it... isn't there?

edited title
Link
leymannx
  • 18.8k
  • 6
  • 72
  • 126

Add a class How to display form-item element and label inline

Source Link

Add a class to form-item

This must be simple, but I cannot find the answer.

I want the label and the textfield on the same line. I tried this:

'odt-filter' => array(
  '#type' => 'textfield',
  '#title' => 'Filtra',
  '#attributes' => array(
    'id' => array(
      'odt-filter',
      ),
    'class' => array(
      'container-inline',
    ),
  ),
) ,

but then the class is applied to the input element, not to the item that contains both it and the label:

<div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-odt-filter form-item-odt-filter">
  <label for="edit-odt-filter">Filtra</label>
  <input id="odt-filter" class="container-inline form-text" data-drupal-selector="edit-odt-filter" name="odt-filter" value="" size="60" maxlength="128" type="text">
</div>

so that the class has not the desired effedt effect. I can (and I actually did, somewhere else) enclose the form element in a container which I can apply the class to, but since a container is already provided by default, I guess there should be a way to add a class to it... isn't there?