Text field wrapping in index

[schonhoff]

• Laravel Version: 10.24.0
• Nova Version: 4.27.13
• PHP Version: 8.2.10
• Database Driver & Version: MySQL 8.0.30
• Operating System and Version: Windows 11
• Browser type and version: Chrome 117

Description:

Hello,

I tried out the following on a large text field:
#5525

But it won't work:

This is the field definition:

Text::make(__('Name'), 'name')
	->sortable()
	->rules('required', 'max:255')
	->displayUsing(function ($name) {
		return __($name);
	})
	->withMeta(['wrapping' => true]),

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

The reason why it isn't working is the class in the span for the field. Maybe it should be like the ResourceTableRow.vue with 'whitespace-nowrap': !field.wrapping? The field should be visible in the vue component.

In js/fields/Index/TextField.vue:

<span
   v-else-if="fieldValue && !field.copyable && !shouldDisplayAsHtml"
   class="whitespace-nowrap"
>
   {{ fieldValue }}
</span>

I saw the same class="whitespace-nowrap" in the following components:

• DateField.vue
• DateTimeField
• LineField
• SelectField
• StackField
• TextField
• UrlField

It shouldn't change anything because the default value for wrapping is "false". If more information is needed, I will try to provide it asap. Thanks for the great tool!

[davidhemphill]

It's not recommended to put large amounts of text in table views. The table cells are designed to avoid wrapping by default to allow for responsive scrolling, which is preferable (in our opinion) to larger height table rows.

[schonhoff]

First of all, thanks for the reply.

The reason I saw this problem is a user typed his company name, which was greater than 100 characters and I want to show the company name in the backend for our support because it is a possible searching field.

My suggested solution shouldn't break anything and would help in this scenario. If this isn't possible I need to truncate the text myself with displayUsing everytime we include the fields mentioned in the starting post, which would break the detail page because the field would be truncated there, too.

Maybe someone else have a solution for this problem with Nova.

[laravelwebdev]

this why i migrate to filament, just for wrap must rebuild asst, lol

[ekazda]

@davidhemphill I respect that you have opinions about your software, but there are an infinite number of use cases for everyone's unique needs/desires. If a developer implementing a CMS wants your software to allow for text to wrap because some client has demanded it, then there should be an option to allow for this. Just simply saying "it's not recommended" seems really short sighted. I can't take that response back to a client in a real world situation, but I often see those types of responses from the development team for Laravel Nova.

[ekazda]

@schonhoff Here is the solution I implemented. I simply fixed this with CSS. I had already added my own CSS file, implemented Tailwind and a build process. Here is the CSS code I used:

.component-resource-index.resource-[YOUR RESOURCE NAME] {
    .field-[YOUR FIELD NAME] {
        span {
            @apply !whitespace-normal;
        }
    }
}

If you need this in vanilla CSS, it would look like this:

.component-resource-index.resource-[YOUR RESOURCE NAME] .field-[YOUR FIELD NAME] span{ white-space: normal !important; }

Now the HTML markup in Nova is hard to work with. Very few classes exist when you get deeper into elements, so sometimes you have to do a lot of digging through div after div to target specific elements. However, this one was pretty easy to get at.

[schonhoff]

Thank you! I marked this as the answer, so everybody can use this.