Okay
  Public Ticket #2963264
Force opening the first row on mobile
Closed

Comments

  • Warzone_Loadout started the conversation

    Hello, 

    First of all let me tell you that i simply love WPDatatable, i use it on ALL of my pages!

    I have a new challenge though. I want to display a table on mobile, but i would like the first row to be automatically un-collapsed when user loads the page.

    Instead on having all my line collapsed and user has to click on the + to see the other fields, i would love to be able to have all the rows collpased except the first one that is opened. Check the attachments. 


    I saw on the code that when click on the +, the CSS class="odd detail-show" is added to the TR. How do i force this class on the first TR?

    Thank you so much!

    Alex

  •  1,667
    Miloš replied

    Hi, Warzone_Loadout

    I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.

    - Thank you very much for the kind words. We are always happy to see that our plugin is helping display tabular data as it is intended to be.

    - You have a very interesting challenge there. Well, using built-in plugin features, I can suggest this example, not sure if it will be ideal for you; there might be a more elegant solution, but here is my first idea ( might be the simplest solution):

    I took a dummy table that we have, containing some countries - the first row is "Germany", so I use conditional formatting, to add a class to that row - and I add class "odd detail-show". In your case, from the screenshot, I guess you would type "Long Range", instead of "Germany".

    9989342460.png

    Try this out, and see how it looks on your table? 

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    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