How to edit modal

  • Resolved Mihkel Roomet

    (@mihkelroomet)


    2 years, 10 months ago

    I’d like to make some small changes to the layout and styling of the modal (the popup that appears when you click on the first column of a row in a table). What would be the best way of going about it?

    I tried assigning a custom function to responsive.details.renderer under Advanced options, but similarly to a previous issue I wrote about, it overrode the whole modal. I guess there’s no getting around that? Maybe it would be somehow doable with just some CSS? Or should I try and figure out how to build a similar modal myself, from scratch?

    The changes I’d like to make include enlarging an image (would be nice if in the details you could see it more clearly) and removing the line clamp I set earlier (I’d like it to display all the text in the details, no matter how long). I’m not sure how to do this, though, because it seems that the data shown in the modal is always exactly the same as in the table. All my custom render functions apply there as well, so also, the CSS classes for each data element are the same as in the table.

    I was also hoping I might able to someday make the data shown in the modal editable and assign custom functions to these data fields so you could use them to update values in the underlying database (it needs custom functions for sure, because it’s a view and not a table).

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter Mihkel Roomet

    (@mihkelroomet)

    2 years, 9 months ago

    I managed to use CSS to achieve some of it, using the selector .wpda-child-value .my_custom_class, where my_custom_class is the class I’ve assigned to text in cells using Javascript. I’ve adjusted the image alignment and size and removed text truncation this way.

    Plugin Contributor Kim L

    (@kimmyx)

    2 years, 9 months ago

    Hi @mihkelroomet,

    Thanks for the update and great job on getting the CSS to work.

    Pretty much all customization for your data table can be done using CSS, but it does get a bit tricky sometimes.

    If you want to explore more about customizing the modal, you can check out DataTable’s page here: DataTables example – Modal details display

    Hope that helps! Let us know if you have more questions. 😊

    Thread Starter Mihkel Roomet

    (@mihkelroomet)

    2 years, 9 months ago

    Thanks for the encouragement, I do hope using CSS will be enough for me 😄

    How exactly would you write the same thing as in that example in Advanced Options? It’s not

    "responsive": {
        "details": {
            "display": "DataTable.Responsive.display.modal()",
            "renderer": "DataTable.Responsive.renderer.tableAll()"
        }
    }

    is it? For me that’s not working, at least. I suspect the syntax for the values of "display" and "renderer” needs to be different, but I don’t know what. I feel like I’ve tried all the options I could find from DataTables docs.

    Plugin Contributor Kim L

    (@kimmyx)

    2 years, 9 months ago

    Hi @mihkelroomet,

    Just had a chance to take a closer look at your table.

    If you want to apply styling to the modal, you need to enclose your custom style within the “dtr-modal-content” div. This is definitely simpler than tinkering around with the Advanced Options. 😊

    For example:

    .dtr-modal-content img {
width: 250px;
}

    As for your second question:

    I was also hoping I might able to someday make the data shown in the modal editable and assign custom functions to these data fields so you could use them to update values in the underlying database

    This is currently not possible with Data Tables. If you want to update a table in the database, you have to use Data Forms.

    Hope that helps! Let us know if you have more questions. 😊

    Thread Starter Mihkel Roomet

    (@mihkelroomet)

    2 years, 9 months ago

    Thank you so much! I’ll for sure check out Data Forms and knowing about the dtr-modal-content class seems useful as well.

    Leeberty

    (@aaronvincentlee)

    2 years, 9 months ago

    Hi @mihkelroomet ,

    On behalf of Kim, you are most welcome!

    Feel free to reach out when you have concerns or suggestions. We’ll be glad to help you out.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘How to edit modal’ is closed to new replies.