Crud: [question] Custom form layout

[gavinhewitt]

Maybe I'm not reading the docs well enough but I'm wondering how customize the form layout. For instance, how would you structure a 2-column layout? How would you tell backback that these elements go in col 1 and the others go in col 2?

[AurelDragut]

i think the best way to do that is to create some column divs (bootstrap's col-xx-*) by using "custom html" fields in which you add the other fields you want. The other way i can think about now would be to create a custom template that contains those two/three/etc. columns, in which you would set a section for each column and then add it to the field's parameters, though it sounds quite complicated.

[tabacitu]

Hi @gavinhewitt ,

Yes, this feature isn't that well documented, if at all. On any field you can declare "wrapperAttributes", which will place those attributes on the field's wrapper element. And if you place a class like col-md-6, you can get a two-column aspect.

For example, this would make two fields show up on the same row, in two columns:

$this->crud->addField([
   'name' => 'start_date',
   'type' => 'date',
   'label' => 'Date',
   'wrapperAttributes' => [
        'class' => 'form-group col-md-6'
   ]
]);
$this->crud->addField([
   'name' => 'end_date',
   'type' => 'date',
   'label' => 'Date',
   'wrapperAttributes' => [
        'class' => 'form-group col-md-6'
   ]
]);

[gavinhewitt]

Thanks for the quick replies.

@tabacitu Ok, so you can control the width of a form element by attaching an extra col-* class, but this is not what I meant. What I meant is a way to make a basic layout and 'instruct' the fields what col they should hook in to. For instance, imagine 2 columns where col-1 has the form inputs to edit a user, and next to that a preview/upload button for his userimage. Sure, I can set the wrapper classes so they are shown nicely together, but it doesn't wrap those 2 cols in a row (not tested yet), needed to start the next section. Understand what I mean?

[tabacitu]

Oh. Then I think @AurelDragut's solution would fit you better. Cheers!

[gavinhewitt]

Yes, I thought so :)

[westernstatesflooring]

Hi @gavinhewitt ,

Yes, this feature isn't that well documented, if at all. On any field you can declare "wrapperAttributes", which will place those attributes on the field's wrapper element. And if you place a class like col-md-6, you can get a two-column aspect.

For example, this would make two fields show up on the same row, in two columns:

$this->crud->addField([
   'name' => 'start_date',
   'type' => 'date',
   'label' => 'Date',
   'wrapperAttributes' => [
        'class' => 'form-group col-md-6'
   ]
]);
$this->crud->addField([
   'name' => 'end_date',
   'type' => 'date',
   'label' => 'Date',
   'wrapperAttributes' => [
        'class' => 'form-group col-md-6'
   ]
]);

This definitely needs to be documented, so helpful!

[samuk190]

It does not fit correctly
https://prnt.sc/phxp8g

   $this->crud->addField([ // select_from_array
            'name' => 'no_processo',
            'label' => "Numero do Processo",
            'type' => 'number',
            'wrapperAttributes' => [
                'class' => 'form-group col-md-6',
            ]
            // 'allows_multiple' => true, // OPTIONAL; needs you to cast this to array in your model;
        ]);

        $this->crud->addField([ // select_from_array
            'name' => 'no_processo_ant',
            'label' => "Numero do Processo Anterior",
            'type' => 'number',
            'wrapperAttributes' => [
                'class' => 'form-group col-md-6',
            ]
            // 'allows_multiple' => true, // OPTIONAL; needs you to cast this to array in your model;
        ]);

[johnpuddephatt]

@samuk190 I've just added the col-md-6 class to two adjacent fields in the backpack demo and it looks right to me. I copied and pasted your wrapperAttributes code:

[samuk190]

@samuk190 I've just added the col-md-6 class to two adjacent fields in the backpack demo and it looks right to me. I copied and pasted your wrapperAttributes code:

did you paste inside a tab? because inside a tab it works. but without a tab it doesnt work.

If that isnt the case, can you share the views (create view, field view or your project? I will compare the files)