How to set a fixed height for all tables or charts in a panel?

[edrivera3]

Hi

I have the following panel that has to two different charts/visualizations. The table changes its height depending on the results. I would like to know how to set a fixed height for all charts/visualizations in this panel or at least for the table.

\<div class="dashboard-row"\>
<div class="dashboard-cell" style="width: 50%;">
    <div class="dashboard-panel">
    <div class="dashboard-element">
        <div class="panel-head">
        <h3> Transaction Heat Map</h3>
        <div class="panel-body">
            <div id="heat_transaction"></div>
        </div>
        </div>
    </div>
    </div>
</div>
<div class="dashboard-cell" style="width: 50%;">
    <div class="dashboard-panel">
    <div class="dashboard-element">
        <div class="panel-head">
        <h3>Transactions</h3>
        <div class="panel-body">
            <div id="tableTransaction"></div>
        </div>
        </div>
    </div>
    </div>
</div>
</div>    

{% block js %}
<script>
var deps = [
"splunkjs/ready!",
"jquery",
"splunk_wftoolkit/components/calendarheatmap/calendarheatmap",
"splunkjs/mvc/searchmanager",
"splunkjs/mvc/chartview",
"splunkjs/mvc/singleview",
"splunkjs/mvc/timelineview",
"splunkjs/mvc/tableview"

];
require(deps, function(mvc) {
// Load individual components
var SearchManager = require("splunkjs/mvc/searchmanager");
var ChartView = require("splunkjs/mvc/chartview");
var SingleView = require("splunkjs/mvc/singleview");
var TableView = require("splunkjs/mvc/tableview");
var TimelineView = require("splunkjs/mvc/timelineview");
var CalendarMap = require("splunk_wftoolkit/components/calendarheatmap/calendarheatmap");

// table
var transactions = new SearchManager({
        id: "transactions",
        preview: true,
        cache: true,
        status_buckets: 1000,
    search: 'index=transactions earliest="3/1/2015:00:00:00" latest="5/23/2015:00:00:00" | table id,trans'
    });

var tableTransaction = new TableView({
    id: "tableTransaction",
    managerid: "transactions",
    el: $("#tableTransaction")
}).render();

// Heat
    var trans_heat = new SearchManager({
    id: "trans_heat",
    preview: true,
    catche: true,
    status_buckets: 1000,
    search: 'index=transactions earliest="5/19/2015:00:00:00" latest="5/23/2015:00:00:00"  | timechart span=1h count by index',
});

var heat_transaction = new CalendarMap({
    id: "heat_transaction",
    managerid: "trans_heat",
    domain: "day",
    subDomain: "hour",
    el: $("#heat_transaction")
}).render();

});

</script>
{% endblock js %}

[edrivera3]

I added the js section of my app page.

[lguinn2]

So now you can use CSS and HTML style settings to set the widths, heights - whatever you want.

[edrivera3]

But how???

[lguinn2]

Now you will either need to learn some HTML and CSS, or hire someone who knows this stuff.

There are tons of resources on the Internet: I typed "learn CSS" into Google and got 45 million hits... http://www.w3schools.com/css/ is a nice resource.

[lguinn2]

There is nothing in Simple XML that will set fixed panel sizes. But you can convert your dashboard to HTML and then use HTML/CSS to format it however you want.

I suggest that you do everything you can using the visual editor and Simple XML - then convert and format.

[edrivera3]

How can I convert my app page to HTML?