Filament•4mo ago

Text overflow ellipsis

Hi all, I'am looking for a way to the size the textcolumn according to the screen size. If the size get below a certain the overflow needs to be shown with css ellipsis. I have tried it using extraAttributes but that doesn’t work since that styling gets applied to the outside div instead of the span Is their a way to do this? Thanks!

7 Replies

Blackpig•4mo ago

https://filamentphp.com/docs/3.x/tables/columns/text#limiting-text-length or maybe this https://filamentphp.com/docs/3.x/tables/columns/text#customizing-the-text-size

Text column - Table Builder - Filament

dissto•4mo ago

->extraCellAttributes([
    'class' => 'xxx',
])

->extraCellAttributes([
    'class' => 'xxx',
])

Lars van Herwijnen•4mo ago

This adds the styling to the TD element instead of the span the element where de text is in. With limit the text is always limited to the same amount of characters in my case in should work based on the available space

dissto•4mo ago

Well I suppose you could ->formatStateUsing() then and return the span however you like?! But even if its on the td itself it should cascade?

Lars van Herwijnen•4mo ago

Could i return html in formatStateUsing();

dissto•4mo ago

Sure

->formatStateUsing(function($state){
  return new HtmlString('<span class="yay">'. $state .'</span>');
})

->formatStateUsing(function($state){
  return new HtmlString('<span class="yay">'. $state .'</span>');
})

(from memory -> untested) 🤣

Lars van Herwijnen•4mo ago

Ah oke, I will try that then thanks!

Gaming

Programming

Text overflow ellipsis