2

I would like to get rid of the ajax "add more items" button at the bottom of a multiple elements form item.

The D8 webform I'm building has a custom composite element with multiple values allowed. The table form display has nice + and – buttons in each row. The "Add x more items" element below the table is not needed.

In the advanced tab, under "Multiple settings", there is only an option to hide the +/– buttons, not the "Add x more items" element.

Additional information:

Webform module version: 8.x-5.0-rc7
YAML Source (excerpt):

   fieldset_teilnehmer:
    '#type': fieldset
    '#title': Teilnehmer
    teilnehmer:
      '#type': custom_composite
      '#title': Teilnehmer
      '#required': true
      '#required_error': 'Bitte tragen Sie die Teilnehmer ein.'
      '#multiple__label': Teilnehmer
      '#multiple__labels': Teilnehmer
      '#multiple__min_items': '5'
      '#multiple__empty_items': '5'
      '#multiple__sorting': false
      '#element':
        teilnehmer_name:
          '#type': textfield
          '#title': Name
        teilnehmer_alter:
          '#type': select
          '#options':
            18: ≥18
            17: 17
            16: 16
            15: 15
            14: 14
            13: 13
            12: 12
            11: 11
            10: 10
            9: 9
            8: 8
            7: 7
            6: 6
            5: 5
            4: 4
            3: 3
            2: 2
            1: 1
            0: 0
          '#title': Alter
2
  • 1
    You can always hide it with css !!
    – GiorgosK
    Commented Mar 27, 2018 at 10:18
  • Yes, CSS is something I will consider – looking at the code, I will have to make both #edit-fieldname-add-submit and .form-item-fieldname-add-more-items invisible.
    – Hendrik
    Commented Mar 27, 2018 at 11:25

1 Answer 1

4

If you set the "Minimum amount of items" and "Number of empty items" to the same number the add more won't appear.

Here is a screenshot

enter image description here

Here is the YAML source for basic multiple text field

textfield:
  '#type': textfield
  '#title': textfield
  '#multiple': 5
  '#multiple__min_items': '5'
  '#multiple__empty_items': '5'

Here is the YAML source for multiple custom composite

custom_composite:
  '#type': custom_composite
  '#title': custom_composite
  '#multiple': 5
  '#multiple__min_items': '5'
  '#multiple__empty_items': '5'
  '#multiple__sorting': false
  '#multiple__operations': false
  '#element':
    textfield:
      '#type': textfield
      '#title': textfield
    select:
      '#type': select
      '#options': days
      '#title': select
7
  • Unfortunately, this does not work for. I've tried your example, with various equal values for min_items and empty_items.
    – Hendrik
    Commented Mar 27, 2018 at 11:17
  • What version of the Webform module are you using? Please post an example of the generated YAML.
    – jrockowitz
    Commented Mar 27, 2018 at 13:10
  • Sure. See edits above.
    – Hendrik
    Commented Mar 27, 2018 at 13:42
  • 1
    The key trick is '#multiple', '#multiple__min_items', and '#multiple__empty_items' all have to be same value.
    – jrockowitz
    Commented Mar 27, 2018 at 16:19
  • 1
    Okay, that is not currently supported. You should use CSS. On mobile, the 'Add more' is needed because the add/remove buttons are hidden.
    – jrockowitz
    Commented Mar 28, 2018 at 10:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.