Can't get responsive to work as expected.

classic12

code below.

I have tried various methods to obtain the following.

on desktop show all the columns
On smaller devices show the first 3 columns and the + button to show the modal popup.

With this setting I get a reasonable layout the first time I run it in a desktop browser.
On mobile It works as expected.
On desktop when I hit the refresh button. (Which is the same code below + calling the Ajax ) the layout goes weird.
ie the 2nd column fills the page nearly.

What is the correct settings:

Do I set the width of the columns to px / % / leave them and set autowidth: true.

Cheers

Steve Warby

tableDataChanged =  $('#dtDataChanged').DataTable( {
              //scrollY : 800,
              //deferRender : true,
              //scroller : true,
            responsive: {
                details: {
                renderer: $.fn.dataTable.Responsive.renderer.tableAll(),
                display: $.fn.dataTable.Responsive.display.modal( {
                header: function ( row ) {
                    var data = row.data();
                    return 'Details for Deal No:  '+data.quoteID;
                }
            } )
        }
    },

 pagingType: "simple",
        lengthChange : false,
        order: [[0, 'desc']],
        dom: "Bfrtip",
        //dom: '<"top"i>rt<"bottom"flp><"clear">',
        
        //autoWidth : true,
        data : dataChanged,
        
        buttons: [
        {
            text: "Refresh",
            action: function (e, dt, node, config) {
                getQuoteDetails();
                //table.column(3).search(null).draw();
            }
        }
        
        ],

              columns: [

            { data: "quoteID" , responsivePriority: 1 ,title : "Deal No" , width : '10px' },
            { data : null,  responsivePriority: 1 ,width : '10px' , title : 'Email details' , width : '10px' ,class : 'form-control' ,'defaultContent': '<button style="  color : black ">Email Deal </button> '},
            {
            data: "web_path",
            title : ' Info 1 ',
            width : '150px',
            responsivePriority: 1,
            render: function(data, type, row)
              {
                   
                  //console.log(' web_path1 = '+ data );
            if (data !== undefined ){ 
                //console.log('data web_path1 = ' + data); 
                 var ext = data.substr(data.lastIndexOf('.') + 1);
                    if ( (ext === 'jpeg' ) || ( ext === 'jpg' ) || ( ext === 'JPG' ) || ( ext === 'jp2' ) || ( ext === 'png' )|| ( ext === 'gif' ) || ( ext === 'pdf' ))
                        {
                           // return '<img src=" ' + data + ' "' + imageSize + ' " style="margin: 5" class="info1">';
                            return '<img src=" ' + data + ' "' + imageSize + ' class="info1">';
                           
                        }
 // now check if it is a video                     
                 if ( (ext === 'mp4')|| ( ext === 'MOV' ))
                    {
                          return ' <video width="320" height="240" controls>  <source src=" ' +data + ' " type="video/mp4">  <source src="movie.ogg" type="video/ogg">  Your browser does not support the video tag.   </video>'
                     }
 // last here so must be download                    
                    {
                          var fullPath = data.split('.')[0];
                          var filename = fullPath.replace(/^.*[\\\/]/, '');  
                          return ' Click to Download <br/> <a href=" '+ data + ' " target="_blank"  > '+ data +  " </a> ";
                }
             }   else { return '' };
                            }
                           
          } ,
            { data: "quoteTitle" , responsivePriority: 2 , title : "Title" , width : '150px'},
            {data: "notes", 
            responsivePriority: 3,
            title : "Details",
            //width : '60%',
            render: function ( data, type, row ) {
            return  "<div class='setRowHeight' "  + data + " </div>";
            }
            },

          
                      ]

classic12

Also different result on windows.

MS Edge on left and Chrome on the right.

classic12

Sorry forgot link....

http://www.surplusanywhere.com/surplusAnywhere7

allan

"<table id='dtDataChanged' class='table table-striped table-bordered' style=''>",

Can you make that:

"<table id='dtDataChanged' class='table table-striped table-bordered'  style='width: 100%'>",

Allan

classic12

Thats working great thanks.

In my ide there is a setting for the datatable width that I have set to 100% already.

What's the difference between that and adding the style.

Cheers

Steve Warby

classic12

I'm still having the issue when I hit the refresh button

http://www.surplusanywhere.com/surplusAnywhere7

The refresh button calls getQuotes() which is what I call when the app runs.

Cheers

Steve Warby

allan

What's the difference between that and adding the style.

Probably none, but it depends upon what exactly the IDE is doing. DataTables will look for both the style and width attributes on the table.

I'm still having the issue when I hit the refresh button

That's odd. I'll try to take a look into it later on today if I can (quite a backlog at the moment).

Allan