Okay
  Public Ticket #3233319
Width and number of columns in filter modal dialog - Aqua skin
Closed

Comments

  • Ulrik Andersen started the conversation

    Hi

    How can I change the width of the "filter modal window" in Aqua skin? For example to 70% of the screen width.

    How can I change the number of columns from 3 to 5 in the "filter modal window" in Aqua skin?

    I have attached 2 screenshots where you can see that modal dialog in aqua skin. At the moment the width is only 1/3 of my of screen width. Instead of very long modal window with a lot of rows I would like to have more columns. 

    I know how to insert the css code and I have also been looking in "assets/css/wdt-skins/aqua.css but I did not find the setting. 

    Best Regards

    Ulrik

    Attached files:  aqua skin filter modal dialog -1.PNG
      aqua skin filter modal dialog -2.PNG

  •  1,850
    Miloš replied

    Hi, Ulrik 

    Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets and we had a break during our National Holiday, which additionally slowed the response time.

     I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.

    -

    It seems i found a solution with some custom CSS, while playing around on our Demo Sandbox site.

    8100892802.png

    I found two elements that you can manipulate with CSS for the width, this one :

    .modal-dialog {
        max-width: 1200px !important;
        width: 1200px !important;
    }

    7824150694.png

    But then i also add this CSS, in order to get it to look more centered, for the other element :

    .modal-content {  
      max-width: 1200px !important;   
     width: 1200px !important;}
    8852894188.png

    Now, it looks like that, it seems more centered while being able to set a custom width.

    So, both CSS combined :

    .modal-dialog {
        max-width: 1200px !important;
        width: 1200px !important;
    }
    .modal-content {
        max-width: 1200px !important;
        width: 1200px !important;
    }

    If you need this only for one specific table, add this to table settings/Customize/Custom CSS,

    but if you need this same style for all tables, copy it to main plugin settings/Custom JS and CSS/Custom CSS.

    Let me know if that helps.smile.pngThank you

    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