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;
});
... View more