Okay
  Public Ticket #1735907
Table not responsive for iPhone8
Closed

Comments

  •  1
    timjo started the conversation

    I need a phone solution. Table (linked) is not reducing in font size and is rendering useless on phones.

    Attempt to create a duplicate that i can style separately failed. Can't find where to change class for element in order to style for smaller size, ie: column headings have failed

    I shot phone screen w/ photobooth so image is backwards. 

  •  471
    Isidora replied

    Hi timjo,

    Thank you for your purchase.

    Responsiveness (in web design) is a feature that allows presenting the same content differently depending on the display size of device that is used to view it. In other words, the same website can be presented differently on a laptop, mobile phone or a tablet.

    Any wpDataTable can be responsive, it doesn’t matter which data source do you use – MySQL, Excel, or any other. In this WordPress responsive table plugin you can choose which columns do you want to be visible or hidden on tablets and/or mobiles. The hidden columns data will be still available for the users that would like to see it in a dropdown; it will collapse under an expandable block in the first visible column.You can read more in our documentation about Responsive WordPress tables.

    Best regards.

    Kind Regards, 

    Isidora Markovic

    wpDataTables: FAQFacebookTwitterFront-end and back-end demoDocs

    Amelia: FAQFacebookTwitter |  Amelia demo sites | Docs

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

    Powerful FiltersGravity Forms Integration for wpDataTablesFormidable Forms Integration for wpDataTables

  •  1
    timjo replied

    That seems to be working very well. Thank you.

    If I may ask how I can style the little drop down button plus/minus symbol? 

    So far I have not been able to hook it with any of below: 

    span.responsiveExpander:: after, .responsiveExpander, 

    span.responsiveExpander, 
    .wpDataTablesWrapper table.has-columns-hidden span.responsiveExpander, 
    table.has-columns-hidden>tbody>tr>td>span.responsiveExpander, 
    table.has-columns-hidden>tbody>tr.detail-show>td span.responsiveExpander{
        background-color: #E56A0E !important;
        background-image: none !important;
        color: #E56A0E !important;
    }


  •  471
    Isidora replied

    Hi timjo,

    Sorry for late response. 

    We are located in Serbia and our working time is from 10:00 to 17:00 CET. business days.

    You are welcome.

    That plus sign is the image like you can see from Inspect element.

    If you want to remove it and insert own css you can use:

    table.has-columns-hidden > tbody > tr > td > span.responsiveExpander:after, 
    table.has-columns-hidden > tbody > tr.detail-show > td span.responsiveExpander:after{
        background-color: #E56A0E !important;
        background-image: none !important;
        color: #E56A0E !important;
    }
    

    About the future questions:

    When you are posting on ticket that are not yours or have questions or issues which are not related to the title of the active ticket can you please open a new one and we will help you there. In that way, issues and questions which are related to different subjects will be in different tickets so other customers or our support agents can find it easily. Our policy is to have one issue or question per ticket because of the reasons that is describe already.

    Thank you for understanding.

    best regards.

    Kind Regards, 

    Isidora Markovic

    wpDataTables: FAQFacebookTwitterFront-end and back-end demoDocs

    Amelia: FAQFacebookTwitter |  Amelia demo sites | Docs

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

    Powerful FiltersGravity Forms Integration for wpDataTablesFormidable Forms Integration for wpDataTables