Okay
  Public Ticket #3021919
Master-detail popup layout customization
Closed

Comments

  • Bharat Bhushan started the conversation

    I have created a table with help of wpDataTables plugin and also using the addon of Master Details Tables. With the help of this addon I have created a popup in which I need the customisation.

    1. I want to modify column strucutre of popup layout like (col-sm-3, col-sm-9 ) into  (col-sm-6, col-sm-6 ).

    2. How to add class in poup section like (form-group col-xs-12) into (form-group col-xs-12 main)

    3. How to manage mobile responsive things for the popup layout

    4. How to add custom js in wpDataTables

    5. How to add validataion in imported data files like (CSV, Excel, Google sheet etc.) to restrict specific column in any specific sequence.

  •  1,819
    Miloš replied

    Hi, Bharat

    Thanks for reaching out to us

    1. and 2. , for this i will have to double-check with our 2nd level Team, i am not 100 % sure about that, my apologies. As soon as i get a confirmation i will come back to you regarding that.

    3. Could you please elaborate in more detail what you mean by this?

    For example, if we take one of our Master Detail Demo pages, and test mobile responsiveness, here is how the Car details table looks:

    3159278982.png

    and the popup :

    5364157919.png

    This is if we check to "limit table witdth to page width" with "word wrap", for example, and enable "responsiveness" in the Display tab.

    But please let me know what you need to achieve, and we will do our best to help.

    4. 

    Adding custom JS in wpDataTables, you can do this in the main plugging settings, and in the tab "Custom JS and CSS"

    5423425736.png

    5.

    Generally speaking, we don't have any validation features. The only way idea i have on how that might be set up is by, possibly some SQL constricting functions, on SQL tables, but i am not sure exactly what you need,

    , could you give us more details, please?

    You can additionally take a look at these pages from our Documentation that are explaining with examples on:

    Linking table with Google Spreadsheet;

    linking table with Excel;

    linking table with CSV;

    importing data from files to create a Manual table in the WP database.

    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

  • Bharat Bhushan replied

    Subject: Master-detail popup layout customization

    1. I want to manage Master-detail popup layout setting by backend. But I didn't get any option form the backend. There are only show and hide options in the Master-details. Also I want to mange the column stucture of the popup layout as per my requirement. How to add specific class name for the hightlighted sections in Master-details from backend. Please provide the solutions ASAP.

    Note: please have a look for the attached screenshot and provide the solution for the same.

  •  1,819
    Miloš replied

    Hi, Bharat

    Thank you for clarifying , i believe that now i understand what you need to achieve by looking at the screenshots.

    Sorry about the waiting time, but I am still testing out if we can achieve what you need regarding assigning custom classes ;

    I will work more on this with my senior colleagues from our 2nd level, we will be as quick as possible - I will  advise you as soon as we confirm it.

    Thank you very much for your patience.

    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

  • Bharat Bhushan replied

    Hi,

    Thanks to understand what I am trying to achieve with the help of Master detail addon. Please provide the best solution to me ASAP to fulfill my requirements for the popup. So that I can add custom classes in the popup from backend according to my requiement.

  •  1,819
    Miloš replied

    Hi, Bharat

    I am truly sorry to disappoint you, but after i checked everything -  this is not possible to create using any plugin's built-in functionalities.

    Maybe it can be done with a high level of custom work, but I am not sure, to be honest.
    Our developers are very busy at the moment, working on some priority tasks and fixing bugs and issues with our plugins, so they won't be having the time for custom work in the near future.

    We can recommend if you need help with this,  reaching out to someone who does custom solutions, such as WP Kraken,
    but we can't advise on their pricing.

    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

  • Bharat Bhushan replied

    Hi,

    We hope you will be achieve your goal to assigning the custom classes in the plugin. In the current stage We have lot of tables to add or update in our websites. We want some modifications in Master details popup design to make it more stylish. Also we want to add some custom classes and more styling to the popup as per the requirement. But there is not much option for now in the popup styling. We would like to request you to please provide some solution to add some custom classes or styling from the backend in the Master details popup setting ASAP.

  •  1,819
    Miloš replied

    Hi, Bharat

    Our developers will add more customization built-in options in the future.

    At this time, we can only assist with providing built-in solutions, and we provide support if there are any issues with the plugin not functioning, and some basic CSS modifications.

    But we don't provide building tables or creating custom designs.

    Our developers are very busy at the moment, working on some priority tasks and fixing bugs and issues with our plugins, so they won't be having the time for custom work in the near future.

    -

    If you need to hire someone to provide custom styling, design or general custom solutions,

    we can recommend reaching out to WP Kraken, but we can't advise on their pricing.


    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

  •  1
    Jean replied

    Hi Milos, Nice to E Meet.

    i work with Bharat, we will be launching three more sites they all need a table. 

    we are an online brokerage company. that tables like yours are essential to our work. we are part of hundreds of brokers looking for a neet solution. 

    please try to help us with the customisation; we will highly appreciate this.

    IT will never stop working but you need to increase the sales right now. 

    Thank you in advance 


  •  1,819
    Miloš replied

    Hi, Jean , and Bharat

    I will pass this request to our developers, they will do their best to add more customization for styling from the backend in the Master details popup as soon as possible.

    Please feel free to search on our suggestions page

     to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there,  and as more people vote, the feature will move higher on the priority list.

    You can certainly follow our changeLog page if you'd like ( it is also available in the plugin dashboard), where we state any changes/new features/bug fixes during updates;

    and our newsletter, so you're informed about new features, bug fixes, freebies, etc.

    -

    At this time, as i mentioned earlier, if you have some knowledge of CSS, you could style the Pop Up, or you can also hire a developer to do it for you.

    I can only try to give you some CSS selectors, to get you started.

    Here are some selectors you can use. You can experiment and try various CSS properties/styles, and place them in the custom CSS on the customize Tab of the Table settings ( or you can please them directly on WP page as custom CSS) :

    /* responsive breakpoint width, if device screen is equal or more than 768 px */
    @media (min-width: 768px)
    .wpdt-c .modal-dialog {    width: 600px;   
     margin: 30px auto;
    }
    @media (min-width: 768px)
    .wpdt-c .modal-content {  
      -webkit-box-shadow: 0 5px 15px rgb(0 0 0 / 50%); 
       box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
    }
    .wpdt-c .modal-dialog {  
      position: relative;  
      width: auto;  
      margin: 10px; 
       text-align: left;
        display: inline-block; 
       vertical-align: middle;
    }
    .wpdt-c .modal .modal-content {   
     box-shadow: 0 5px 20px rgb(0 0 0 / 31%); 
       border-radius: 3px;
    }
    .wpdt-c .modal-content {  
      position: relative;   
     background-color: #fff;   
     border: 1px solid transparent;
    }
    .wpdt-c .modal-dialog {  
      position: relative;  
      width: auto;   
     margin: 10px;  
      text-align: left; 
       display: inline-block; 
       vertical-align: middle;
    }
    /* modal header */
    .wpdt-c .modal .modal-header {  
      background: none;
    padding: 23px 26px;
    border-bottom: 1px solid transparent;
    }
    /* image inside the modal*/
    .wpdt-c img {   
     vertical-align: middle;
    }
    .wpdt-c img {  
      border: 0;
    }
    .wpdt-c .modal .modal-body {  
      padding: 0 26px 10px;
    }
    .wpdt-c .modal-body {   
     position: relative;    padding: 15px;
    }
    

    This one is for images in the modal -

    .wpDataTableID-27 th.column-image {  
      width: 200px !important;
    }

    On this resource you can find a lot of useful tips & tricks on CSS customizations.

    -

    I am sorry that we are not able to provide custom work at this time, but i hope this might help get you started.


    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