Hi, I try to render with form api an input form element with the output syling like the image attached, using bootstrap input-group.

I try to do it of this way;

    $form['sales_fee'] = [
      '#type' => 'number',
      '#step' => 'any', // Allow float numbers
      '#min' => 0,
      '#title' => $this->t('Applicable sales fee'),
      '#default_value' => $config->get('sales_fee'),
        //@todo This doesn't work
//      '#prefix' => '<div class="input-group">',
//      '#suffix' => '<span class="input-group-addon">€</span></div>',
    ];

The problem of this way is that he prefix are rendered BEFORE the input label, and the output aren't correct (see attached image 2). What is the best way to do this property?

I'm not sure if it's a support request, a bug or a feature request. Please change it if you see fit.

Thank in advance.

CommentFileSizeAuthor
input-groups_2.png5.79 KBestoyausente
input-groups.png103.27 KBestoyausente

Comments

estoyausente created an issue. See original summary.

markhalliwell’s picture

markhalliwell
Primary language English
commented
Status: Active » Closed (works as designed)

That's because you need to use #field_prefix and/or #field_suffix along with #input_group:

    $form['sales_fee'] = [
      '#type' => 'number',
      '#step' => 'any', // Allow float numbers
      '#min' => 0,
      '#title' => $this->t('Applicable sales fee'),
      '#default_value' => $config->get('sales_fee'),
      '#field_prefix' => '',
      '#field_suffix' => '€',
      '#input_group' => TRUE,
    ];
estoyausente’s picture

estoyausente
Primary language Spanish
commented

aaarg! Sorry :) Really thanks! It works perfect! :)