How to scroll in the individual cells so that there is no overflow?

How to scroll in the individual cells so that there is no overflow?

mmcnair80mmcnair80 Posts: 83Questions: 21Answers: 7
edited November 2016 in Free community support

My tables have many comment fields that are very long, i also set a max width of 350px for the TD's. How can I make the cells have the same scroll function as setting overflow-x: auto; that I have in my CSS from before I started with DataTables.

For example here's one table that the cells overflow and I don't want them to.

Update

I have found that the scroll-x: auto; works in Chrome, it has a scroll bar and doesn't overflow into the other columns.

In IE11 it shows the scroll bar, but you can't scroll with it and you can't select all of what is in the cell.

In Firefox it just overflows across the other columns and onto the right side of the page causing the entire page to need scrolling to see all of it,

Answers

  • mmcnair80mmcnair80 Posts: 83Questions: 21Answers: 7
    edited December 2016

    Never mind I got this working by editing my modified version of the ssp.class.php file so that the data_output function now looks like this:

    static function data_output($columns,$data)
    {
        print_r($data);
        $DateFields = include 'DateFields.php';
        $out = array();
        for($i=0,$ien=count($data);$i<$ien;$i++)
        {
            $row = array();
            for($j=0,$jen=count($columns);$j<$jen;$j++)
            {
                $column = $columns[$j];
                if(isset($column['Formatter']))
                {
                    echo "Formatter<br>";
                    $row[$column['dt']] = $column['Formatter']($data[$i][$column['db']],$data[$i]);
                }
                else
                {       //This is were I added the <div> around the values to allow the scrolling to work in all browsers.             
                    $row[$column['dt']] = "<div class='Scrollable'>" .$data[$i][$columns[$j]['db']]. "</div>";
                    if(in_array($column['db'],$DateFields,TRUE) && $row[$column['dt']] != '')
                    {
                        $row[$column['dt']] = substr($data[$i][$columns[$j]['db']],5,2) . "/" . substr($data[$i][$columns[$j]['db']],8,2) . "/" . substr($data[$i][$columns[$j]['db']],2,2);
                    }
                }
            }
            $out[] = $row;
        }
        return $out;
    }
    

    I had to add a div inside the individual td so that the scroll would work.

This discussion has been closed.