Filament•8mo 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•8mo 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•8mo ago

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

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

LarsOP•8mo 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•8mo 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?

LarsOP•8mo ago

Could i return html in formatStateUsing();

dissto•8mo 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) 🤣

LarsOP•8mo ago

Ah oke, I will try that then thanks!

Gaming

Programming

Text overflow ellipsis