Okay
  Public Ticket #3054437
mobile view
Closed

Comments

  • adnaan qureshi started the conversation

    hello

    i’ve set up my wpdatatables for mobile responsiveness and left three columns uncollapsed. 

    it works fine until you expand then the three columns all get compressed to the left. 

    the only css i’ve applied is some width %s to the columns so they look correct on desktop. 

    photos are here 

    https://postimg.cc/gallery/8cccHPf

  •  3
    Jens replied

    Hello,

    You hide some columns in the table via CSS, aren't you? That doesn't work by the mobile view.

    Best regards
    Jens


  • adnaan qureshi replied

    thanks for the quick reply !

    i have one column which is hidden with css (i can’t hide it using the plugin as a jquery script needs it’s vakue)

    do you really think this is the cause of the faulty mobile view ? 

    i’ll remove the hidden css attribute and see if it changes anything. 

  •  1,851
    Miloš replied


    Hi, adnaan qureshi

    Thanks for reaching out to us

    And thank you for helping out, Jenssmile.png

    -

    Yes, if you have hidden something with CSS, that might be adding to the issue, we will see.

    The % for the width that you set on some columns, adnaad, it depends how you added the CSS;

    the width might be good for desktop, but sometimes it can be different for mobile screens, and that is why in that situation we have to add another "media query", or another responsive breakpoint;

    to add different % width for mobiles;

    But the best will be if we can take a look at your page where the table is, and at the Wp-Admin back end?

    Please provide me a temporary WP-admin (administrator) user for your site where this happens, so we could log in and take a look ‘from the inside’ as that’s the most efficient way to see and resolve the issue. 

    We do not interfere with any data or anything else except for the plugin (in case that’s a production version of the site), and of course, we do not provide login data to third parties. 

    You can write credentials here just check PRIVATE Reply so nobody can see them except us.

    And point me to the table ID, and the front page where the table is?


    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •  3
    Jens replied

    Hello adnaan,

    I'm sure because I have the same problem.
    https://tmsplugins.ticksy.com/ticket/3048869/

    Maybe we'll be lucky if the development team implements my suggestion.

    Best regards
    Jens

  • adnaan qureshi replied

    (ive deleted this as its irrelevent now)

  • adnaan qureshi replied

    actually. you are correct. if i remove the hidden class from one of the columns then the mobile view works fine. 

    I have one last issue which id love some advice on. 

    Im using the addOnDrawCallback like this to add two new icon links to the masterdetail cell:

    jQuery(document).ready(function(){
        var interv = setInterval(function(){
            
            if ( typeof wpDataTables.table_1 != 'undefined' ) {
                wpDataTables.table_1.addOnDrawCallback( function(){
                    if ( jQuery('#table_1').length ){
                        base_url = location.origin + '/rvi/';
                        jQuery('#table_1 tbody tr').each(function(){
                            if ( jQuery(this).find('.entry_id').length ) {
                                id = jQuery(this).find('.entry_id').text();
                                mrn = jQuery(this).find('.mrn').text();
                                edit_url = 'onclick="window.open(\''+base_url+'rvi-obstetrics-single-entry/entry/'+id+'\',\'popup\',\'scrollbars=yes,resizable=yes,status=no,location=no,toolbar=no,menubar=no,width=1000,height=800,left=200,top=200\')"';
                                sms_url = 'onclick="window.open(\''+base_url+'obs-sms-status-list?mrn='+mrn+'\',\'popup\',\'scrollbars=yes,resizable=yes,status=no,location=no,toolbar=no,menubar=no,width=600,height=500,left=200,top=200\')"';
                                jQuery(this).find('td:last-child').append( '<a '+edit_url+'="" href="#" class="edit-btn"><i class="fa fa-external-link fa-lg fa-border whiteincolor"></i></a>' );
                                jQuery(this).find('td:last-child').append( '<a '+sms_url+'="" href="#" class="edit-btn"><i class="far fa-comment-alt fa-lg fa-border whiteincolor"></i></a>' );
                            }
                            
                        });
                    }
                });
                clearInterval( interv );
            }
        }, 1000);

    It works fine on desktop. On mobile, does this action get triggered when the user changes page using the pagination links?

    Initially on mobile, the script works, but when the page is changed, the script doesn't do anything at all. 

    thanks for the great customer support guys - well worth the money. 

  •   adnaan qureshi replied privately
  •   Miloš replied privately
  •   Miloš replied privately