简体   繁体   中英

Sonata admin form field on same line

Is there a way in configureformsfields method from admin to show field on a same line and not one below the other? A CSS class for example?

You can add CSS class with an appropriate display option to the selected field as:

->add('fieldname', null, [
          'attr' => ["class" => "your-custom-class"]
      ])

Also you can modify .form-group class (to make all fields inline):

.form-group {
    display: inline-block;
}

If you want your input to be inline with its label:

div.sonata-ba-field.sonata-ba-field-standard-natural {
    display: inline-block;
}

Tutorial how to create a CSS file and load it into Sonata template could be found here .

There is some workaround: - Create custom form type to add new option to form field

class CustomTextType extends AbstractType
{
/**
 * {@inheritdoc}
 */
public function buildView(FormView $view, FormInterface $form, array $options)
{
    $view->vars['parent_div_class'] = $options['parent_div_class'];
}

/**
 * {@inheritdoc}
 */
public function getParent()
{
    return TextType::class;
}

/**
 * {@inheritdoc}
 */
public function getBlockPrefix()
{
    return 'custom_text_type';
}

/**
 * {@inheritdoc}
 */
public function configureOptions(OptionsResolver $resolver)
{
    $resolver->setDefaults(
        [
            'parent_div_class' => null,
        ]
    );
}
  • Create custom form theme that extends sonata one

{% extends '@SonataDoctrineORMAdmin/Form/form_admin_fields.html.twig' %}

{% block form_row %}

{% if parent_div_class is defined and parent_div_class %}

  <div class="{{ parent_div_class }}"> {{ parent() }} </div> 

{% else %} {{ parent() }} {% endif %} {% endblock %}

  • Set this theme in your admin class

    $this->setFormTheme(['@Admin/form/form_theme.html.twig']);

enjoy.

The SonataCoreBundle provides the form_type option for this.

# app/config/config.yml

sonata_core:
    form_type: horizontal

In symfony 4 you can configure it globally in the config/packages/sonata_admin.yaml

sonata_admin:
    options:
        form_type: 'horizontal'

Gives: 在此输入图像描述

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM