Solved: Re: How to add css to table inside a popup modal

mjlsnombrado · ‎06-04-2018

Hi all,

I have created a dashboard with a pop-up modal, I want to add css on the table inside the pop up modal, the problem is i do not know how can I set a class/id to the table inside the pop up can someone help me with this.

thanks in advance.

niketn · ‎06-04-2018

@mjlsnombrado you can override the Table CSS directly from Simple XML or an independent CSS file using Simple XML CSS Extension, without having to depend on jquery to add CSS().

Looking at you code you can add the following in Dashboard to test:

  <row depends="$alwaysHideCSSPanel$">
    <panel>
      <html>
        <style>
          #detailTable table td{
            padding: 3px; 
            text-align: center
          }

          #detailTable table table{
            border-collapse:collapse;
            width: 100%;
            font-family: arial;
            font-size: 10px;
            margin-left:20px
          }

          #detailTable table th{
            position: absolute;
            top: -9999px !important;
            left: -9999px !important
          }

          #detailTable table tr{
            border-radius: 12px;
            width: 10%;
            display: inline-block;
            margin-right: 8px;
            margin-bottom: 8px
          }

          #detailTable table td{
            border: none;
            position: relative;
            padding-left: 12%;
            text-align: left
          }

          #detailTable table td:before{
            position: absolute;
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 5px;
            white-space: nowrap
          }
        </style>
      </html>
    </panel>
  </row>

PS: I think display: inline-block; should be display: inline-grid; but not sure about your final layout. So you would need to test and apply yourself.
Once you are done testing you can move the code in <style>...</style> block to separate css file and keep it clubbed along with JS for modal view.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketn · ‎06-04-2018

@mjlsnombrado you can override the Table CSS directly from Simple XML or an independent CSS file using Simple XML CSS Extension, without having to depend on jquery to add CSS().

Looking at you code you can add the following in Dashboard to test:

  <row depends="$alwaysHideCSSPanel$">
    <panel>
      <html>
        <style>
          #detailTable table td{
            padding: 3px; 
            text-align: center
          }

          #detailTable table table{
            border-collapse:collapse;
            width: 100%;
            font-family: arial;
            font-size: 10px;
            margin-left:20px
          }

          #detailTable table th{
            position: absolute;
            top: -9999px !important;
            left: -9999px !important
          }

          #detailTable table tr{
            border-radius: 12px;
            width: 10%;
            display: inline-block;
            margin-right: 8px;
            margin-bottom: 8px
          }

          #detailTable table td{
            border: none;
            position: relative;
            padding-left: 12%;
            text-align: left
          }

          #detailTable table td:before{
            position: absolute;
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 5px;
            white-space: nowrap
          }
        </style>
      </html>
    </panel>
  </row>

PS: I think display: inline-block; should be display: inline-grid; but not sure about your final layout. So you would need to test and apply yourself.
Once you are done testing you can move the code in <style>...</style> block to separate css file and keep it clubbed along with JS for modal view.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

mjlsnombrado · ‎06-04-2018

Hi @nicketnilay,

Thanks for answering I've tried your suggestion but it does not produce result the table inside the popup is still the same.

niketn · ‎06-04-2018

@mjlsnombrado when the modal pop up appears can you use Browser Inspector Tool to get the CSS Selector for the table and verify with the selectors I have used?

Is the issue with CSS style or data not showing up in Modal table?

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

mjlsnombrado · ‎06-05-2018

Hi @nicketnilay, the issue is with the CSS not applying to the table inside the modal, I've just removed the contents because it contains sites/info and I'm not sure if I'm allowed to share it so I just remove it, I've already used the inspector tool and it shows the table attributes inside the modal is the same with the normal Splunk table and when I edit these attributes it applies to all the tables on the dashboard, what I want is to apply an id/class to the table inside the popup modal so that it will not affect the other tables but I do not know how can I apply an id to the table inside the modal, the modal view I am using is based on the hurricane labs. thanks 🙂

https://www.hurricanelabs.com/splunk-tutorials/splunk-custom-modal-view-creation-part-1-revealing-a-...

mjlsnombrado · ‎06-06-2018

It worked, I've used the other i.d. #modalVizualization and created an inline css thanks Nicketnilay

niketn · ‎06-06-2018

You are referring to great blog and its author can be summoned on Slack Chat or Splunk answers @rjthibod 🙂

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

mjlsnombrado · ‎06-04-2018

Here is the code where I am inserting the csss

 define([
        'underscore',
        'backbone',
        'jquery',
        'splunkjs/mvc',
        'splunkjs/mvc/searchmanager',
        'splunkjs/mvc/simplexml/element/table',
        ], function(_, Backbone, $, mvc, SearchManager, TableElement) {
        var modalTemplate = "<div id=\"pivotModal\" class=\"modal\">" +
                            "<div class=\"modal-header\" style=\"font-size:14px;\"><b><%- title %></b></div>" +
                            "<div class=\"modal-body\"></div>" +
                            "<div class=\"modal-footer\"><button "+
                            "class=\"dtsBtn close\">Close</button></div>" +
                            "</div>" +
                            "<div class=\"modal-backdrop\"></div>";

        var ModalView = Backbone.View.extend({

            defaults: {
                title: 'Not Set'
            },

            initialize: function(options) {
                this.options = options;
                this.options = _.extend({}, this.defaults, this.options);
                this.childViews = [];
                this.template = _.template(modalTemplate);
                console.log('Success: ' + this.options.title);
            },

            events: {
                'click .close': 'close',
                'click .modal-backdrop': 'close'
            },

            render: function() {
                var data = { title : this.options.title }
                this.$el.html(this.template(data));
                return this;
            },

            show: function() {
                $(document.body).append(this.render().el);

                $(this.el).find('.modal-body').append('<div id="modalVizualization"/>');

                $(this.el).find('.modal').css({
                width:'80%',
                height:'auto',
                left: '9%',
                top: '14%',
                'margin-left': '0',
                'max-height':'100%',
                'background-color':'#f5f5f5',
                border: '2px solid #00BFFF'
                });

                /*$(this.el).find('table table').css({});
                $(this.el).find('table thead').css({});
                $(this.el).find('table tbody').css({});
                $(this.el).find('table th').css({});
                $(this.el).find('table td').css({});
                $(this.el).find('table tr').css({});*/

                $(' table td').css({ 'padding': '3px', 'text-align': 'center'});

                $(' table table').css({'border-collapse': 'collapse', 'width': '100%', 'font-family': 'arial', 'font-size': '10px', 'margin-left':'20px'});

                $(' table th').css({'position': 'absolute', 'top': '-9999px !important', 'left': '-9999px !important'});

                $( table tr').css({'border-radius': '12px', 'width': '10%', 'display': 'inline-block', 'margin-right': '8px', 'margin-bottom': '8px'});

                $(' table td').css({  'border': 'none', 'position': 'relative', 'padding-left': '12%', 'text-align': 'left'});

                $(' table td:before').css({'position': 'absolute', 'top': '6px', 'left': '6px', 'width': '45%', 'padding-right': '5px', 'white-space': 'nowrap'});


                var search = mvc.Components.get(this.options.search.id);
                console.log(search);
                var detailTable = new TableElement({
                id: "detailTable",
                managerid: search.name,
                pageSize: "10",
                el: $('#modalVizualization')
                }).render();



                this.childViews.push(detailTable);
                search.startSearch();


                },

            close: function() {
                this.unbind();
                this.remove();

                _.each(this.childViews, function(childView){
                childView.unbind();
                childView.remove();
                });
            }

        });

        return ModalView;
    });

How to add css to table inside a popup modal

Splunk Custom Visualizations App End of Life

Introducing Splunk Enterprise 9.2

Adoption of RUM and APM at Splunk