Zenn
🎻

[Symfony] EasyAdminBundleでネストしたFormTypeを使ったときの見た目の調整

2020/05/28に公開
PHP
Symfony
tech

EasyAdminBundleでネストしたFormTypeを使ったらイマイチな見た目になった

小ネタです。

EasyAdminBundleでネストしたFormTypeを使ったらデフォルトでイマイチな見た目になりました。

具体的には、

  • 住所を入力するための AddressType というFormTypeがある
  • EasyAdminBundleのフォーム画面で AddressType を使う

ということをしました。コードとしては以下のようなイメージです。

class AddressType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('zipCode', TextType::class, [
                'label' => '郵便番号',
            ])
            ->add('prefecture', TextType::class, [
                'label' => '都道府県',
            ])
            ->add('city', TextType::class, [
                'label' => '市区郡',
            ])
            ->add('line1', TextType::class, [
                'label' => '番地まで',
            ])
            ->add('line2', TextType::class, [
                'label' => '建物名・号室',
            ])
        ;
    }
}

# config/packages/easy_admin.yaml
easy_admin:
  entities:
    Foo:
      form:
        fields:
          # ... 略
          - { property: address, label: 住所, type: App\Form\AddressType }
          # ... 略

これをレンダリングすると、以下のような見た目になりました。

イマイチです。

いい感じにするには

はじめはテンプレートを拡張しようかとか色々難しく考えてしまったのですが、よく考えたら 子フォームのラベルをCSSで左に寄せるだけで十分な見た目になるじゃん ということに気付きました。

というわけで、以下のようなCSSを書いて、

body.easyadmin.new .form-group .form-group label,
body.easyadmin.edit .form-group .form-group label {
  text-align: left;
}

EasyAdminBundleに読み込ませました。

# config/packages/easy_admin.yaml
easy_admin:
  design:
    assets:
      css:
        - /path/to/easy_admin.css

これで、見た目は以下のようになりました。

ザ・十分！🙌

まとめ

何事もシンプルに考えるのは大事ですね。

余談

EasyAdminBundleに読み込ませるcssは固定のURLパスでしか指定できない（webpack-encoreによってバージョニングされたアセットは指定できない）ので、scss等は使わず生cssを書いています。

僕の場合は assets/statics というディレクトリを作って、そこに置いたファイルは public/build 直下にコピーされるようにしています。

// webpack.config.js
Encore
  .copyFiles({
    from: './assets/statics/',
    to: '/[path][name].[ext]',
  })

/* assets/statics/css/easy_admin.css */
body.easyadmin.new .form-group .form-group label,
body.easyadmin.edit .form-group .form-group label {
  text-align: left;
}

# config/packages/easy_admin.yaml
easy_admin:
  design:
    assets:
      css:
        - /build/css/easy_admin.css

参考までに僕が普段使っている ttskch/symfony-skeleton のコードのリンクを貼っておきます✋

GitHubで編集を提案

Discussion