Cannot use fullwidth and stacked at the same time

[mrleblanc101]

• Laravel Version: 9.52.4
• Nova Version: 4.22.2

Description:

Hi,
In our app we want to make a custom field, the field should be stacked (label above the field) and fullwidth.
Currently, this is not possible.

Stacked field:

Fullwidth:

Stacked and fullwidth:

Here is what it should look like:

Detailed steps to reproduce the issue on a fresh Nova installation:

\Hgm\Media\MultipleMedia::make('Media')->fullWidth()->stacked()->rules('required')->required()

[crynobone]

Default

Stacked

Full-width

Stacked + Full-width

---

We don't handle issues generated by 3rd party custom fields, you have 100% control over the UI and should be able to tweak the styling depending on your requirement.

[mrleblanc101]

@crynobone This issue is with Nova, not the custom field. You can see the issue on your own screenshot.

Clearly this (fullwidth + stacked) is NOT fullwidth lol

I have no control over the width of the field other than those 2 options.

[mrleblanc101]

This is clearly not fullwidth.

My field can't be fullwidth because of how Nova wrap the fields as seen here:

[mrleblanc101]

So the label is w-1/5 and the field is w-4/5.

When using fullwidth and stacked togerther; The flex direction is changed to column, but the field is still w-4/5 instead of w-5/5 or w-full which defeat the purpose of calling if "fullwidth".

[crynobone]

This behaviour has been reviewed before and is considered as expected. Create a custom CustomField component if you want a different behaviour.

[mrleblanc101]

@crynobone Kind of a bad API name don't you think ? Calling something fullwidth when it's clearly 4/5.

[mrleblanc101]

If you tell me this is so all field are aligned. Why is fullwidth when not stacked make the field go to the far right (it's the only way to make it larger) ? This create a misalignement !

[mrleblanc101]

@crynobone
Changing this

      :class="{
        'md:w-4/5': fullWidthContent,
        'md:w-3/5': !fullWidthContent,
        'w-full md:py-5': !field.stacked,
        'w-full md:pt-2': field.stacked,
      }"

to this fixed our problem:

      :class="{
        'md:w-4/5': fullWidthContent && !field.stacked,
        'md:w-3/5': !fullWidthContent,
        'w-full md:py-5': !field.stacked,
        'w-full md:pt-2': field.stacked,
      }"

Kinda odd to override a component to change a single line.

[cjholowatyj]

I'm in agreement with @mrleblanc101 on this one (I'm in a similar situation). I want to be able to use a Markdown field that makes use of both stacked() AND fullWidth() at the same time...

Can a use case be thought of for why stacked() shouldn't always start out as w-4/5 and extend to w-5/5 on fullWidth()? I cannot imagine a scenario where I would want stacked() to result in a w-3/5 situation. Either the field runs to 4/5 to match the right margin of all the other fields, or it runs to 5/5 because you need max space. What reason would someone have for needing it 3/5?

It seems a little like tunnel-vision to make the assumption that the current behaviour is what every developer should expect. If you give developers an additional increment of control over the layout of individual fields, we wouldn't have to rewrite, override, and extend code so much that should already give the developer the freedom to mould it to their use case.