Long title in Resources view not wrapping

[lesaff]

Some of my database entries have a quite long titles (see screenshot). When I view those entries in my Resources, it extended the width of the table. It would be nice to make these long titles wrap around to the next line.

Thanks

[dillingham]

Update

Made a package for index only string limits https://github.com/dillingham/nova-index-textarea

Im using a field override to set a character length to avoid multiple lines and long ones

<?php

namespace App\Nova\Fields;

use Laravel\Nova\Fields\Field;

class ShortenText extends Field
{
    public $component = 'text-field';

    public function length($amount)
    {
        return $this->displayUsing(function ($value) use ($amount) {
            return str_limit($value, $amount, '...');
        });
    }
}

You can also override the styles

.whitespace-no-wrap {
    white-space: normal;
}

could also do it on the field directly

Text::make('title')->displayUsing(function ($value) {
    return str_limit($value, '10', '...');
});

[davidhemphill]

No plans to do this as it tends to make the tables look really bad with a lot of rows breaking to the next line.

[lesaff]

@dillingham thanks for the idea, I ended up limiting the length of the title by doing the following

Text::make('Title')->resolveUsing(function ($title) {
    return substr($title, 0, 35) . '...';
})->sortable(),

[zagreusinoz]

This also affects the detail page. I get that it breaks the styling but maybe add the ability to combine styling to a field element so, e.g. we could add overflow-wrap: break-word; which would fix this issue.

In my case I want to show an API key so it makes no sense to make an excerpt as in @lesaff 's idea.

[MitchellMcKenna]

@davidhemphill Would be great if there was a ->resolveForDisplayOnIndex() to alter display on index only, like here to truncate the field only there.

[beerwin]

No plans to do this as it tends to make the tables look really bad with a lot of rows breaking to the next line.

Well, this looks definitely better than that >:( (I'm trying to create a simple comments view):

[tpetry]

@MitchellMcKenna If you only want to change it for the index or detail page you can add the attribute twice with different definitions:

Text::make('Subject', 'subject')
  ->sortable()
  ->onlyOnIndex()
  ->displayUsing(function($value) {
    return str_limit($value, 50, '...');
  }),

Text::make('Subject', 'subject')
  ->hideFromIndex(),

[dillingham]

@tpetry @beerwin

You can do index only string limits like I do in this package

https://github.com/dillingham/nova-index-textarea

[dddeeemmmooonnn]

Added

    <style>
        .whitespace-no-wrap {
            white-space: normal;
        }
    </style>

to end of head in /resources/views/vendor/nova/layout.blade.php wich copied from nova sources folder. works fine

[jeff-h]

If so many people have given a thumbs-up to the above style rule reversal I think it indicates a problem with the default.

In my case I'd much prefer a default for wide table columns to by truncated by CSS, with text-overflow: ellipsis; It seems the perfect answer to ruining the table by having it hang off the side, or breaking the vertical rhythm.

[fabiov]

I think it would be better to let to decide on a case-by-case what is better, maybe with a method, samething like this: Text::make('name')->wrap()

[salmanhijazi]

Until a better way is available, solved it like so:

Text::make('Comment')
    ->displayUsing(fn ($value) => '<div style="white-space: break-spaces">'. $value .'</div>')
    ->asHtml()

[vankov1]

Unfortunately this solution breaks the click events. :/

[hayatbiralem]

I solved my issue with a Line field like following:

<?php

Stack::make('Title', [
    Line::make('Title')->extraClasses('!whitespace-normal'),
])
->onlyOnIndex()

To make !whitespace-normal works as expected I defined an asset and added following styles into it:

/* Nova Asset CSS */
.\!whitespace-normal {
    white-space: normal !important;
}

Hope it helps.

[Shr3yashhh]

This is how I've done i hope this might help you
Text::make('Short Description', 'short_description') ->rules('required') ->displayUsing(function ($value) { return Str::limit($value, 30, "..."); }),

[clementmas]

This is what I used to integrate @dddeeemmmooonnn's solution in Nova v4:

// NovaServiceProvider.php, boot method
Nova::footer(fn () => Blade::render('
    <style>
        /* Fixes display of long texts on index views */
        .whitespace-nowrap {
            white-space: normal;
        }
    </style>

    // ...
'));

Having a helper function would be much better than this hack. Meanwhile it does the trick.