Constraining the display size of a cell

  • Resolved charlesgodwin

    (@charlesgodwin)


    2 years, 1 month ago

    This is not a bug, but a problem.
    We have a database where the description column can vary in size from empty to over 10,000 characters long. We want to make this available for column search/filter but then displaying these VERY long fields is a problem.

    We are using server side processing

    We currently overcome the display problem by displaying with a VIRTUAL field as follows

    short_description varchar(255) GENERATED ALWAYS AS (
  (
    case
      when isnull(description) then 'N/A'
      when (char_length(TRIM(description)) = 0) then 'N/A'
      when (char_length(description) < 255) then description
      else concat(substr(description, 1, 238), '...See details')
    end
  )
) VIRTUAL,

    But this doesn’t solve the search/filter problem as search of full text at column is not possible.

    I searched datatables forums but could find a solution. What I think is needed is a browser level solution, either css to limit display size of JS code the do similar to the MySQL code.

    Any suggestions.

    Thanks in advance

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor Kim L

    (@kimmyx)

    Hi @charlesgodwin,

    You can certainly limit text display using CSS.

    Please try adding this code in Appearance > Customize > Additional CSS:

    #master_catalogue14 .short_description{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
}

    Hope this helps!

    Thread Starter charlesgodwin

    (@charlesgodwin)

    Thanks @kimmyx

    If it works I’ll inject it code-manager. ??

    Thread Starter charlesgodwin

    (@charlesgodwin)

    Thanks again. I found your solution too restrictive for our purpose (not displaying enough text for normal cases). But you pointed me in the right direction.

    We are using this, and injecting it with Code Manager, another fabulous Passionate Programmer offering.

    #master_catalogue14 .description{
  overflow:hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Constraining the display size of a cell’ is closed to new replies.