@bmendez0428 try replacing button section in HTML (between Dashboard Title and first row) i.e. <div style="float: right;">
<input type="button" onclick="location.href='tem_search_ui_html?form.sTime.earliest=-24h%40h&form.sTime.latest=now';" value="Go to Search Screen" />
<input type="button" onclick="location.href='http://spwaitbussvs/ts/itbs/tem/Shared%20Documents1/Automation/QA%20Availability%20Dashboard%20issue%20tracker.xlsx';" value="Issue log" />
<input type="button" onclick="location.href='http://spwaitbussvs/ts/itbs/tem/Shared%20Documents1/Automation/TEM%20QA%20Availability%20Dashboard%20FAQ.docx';" value="FAQ" />
<p></p>
</div> With the following <div id="row_header" class="dashboard-row dashboard-row1">
<div id="panel_header" class="dashboard-cell" style="width: 100%;">
<div class="dashboard-panel clearfix">
<div class="panel-element-row">
<div id="html_header" class="dashboard-element html" style="width: 100%">
<div class="panel-body html">
<style>
#element1 th[data-sort-key="Application Name"],
#element1 th[data-sort-key="Test Case"]{
width: 10% !important;
padding-left: 0px;
padding-right: 0px;
}
#element1 th[data-sort-key^="QA"],
#element1 th[data-sort-key^="STG"],
#element1 th[data-sort-key^="PVE"]{
width: 8% !important;
padding-left: 0px;
padding-right: 0px;
}
div.panel-body.html{
display: flex;
padding-left: 0px !important;
padding-right: 0px !important;
}
#html_header #button_options{
width: 10% !important;
border-style: solid;
}
#html_header .p.swimlane{
width: 10% !important;
}
#html_header div.p{
border-style: solid;
text-align: center;
}
#html_header div.p{
width: 8% !important;
}
#html_header .p.Major_Release{
width: 16% !important;
}
#html_header #button_options a{
border-width: 2px;
border-style: solid;
border-radius: 50%;
margin-right: 5px;
}
#html_header #button_options a i{
text-align: center;
width: 15px;
}
</style>
<div id="button_options">
<a onclick="location.href='tem_search_ui_html?form.sTime.earliest=-24h%40h&form.sTime.latest=now';" title="Go to search screen">
<i class="icon-search"></i>
</a>
<a onclick="location.href='http://spwaitbussvs/ts/itbs/tem/Shared%20Documents1/Automation/QA%20Availability%20Dashboard%20issue%20tracker.xlsx';" title="Issue log">
<i class="icon-menu"></i>
</a>
<a onclick="location.href='http://spwaitbussvs/ts/itbs/tem/Shared%20Documents1/Automation/TEM%20QA%20Availability%20Dashboard%20FAQ.docx';" title="Issue log">
<i class="icon-question"></i>
</a>
</div>
<div class="p swimlane">
<p>Swimlane Upcoming Releases</p>
</div>
<div class="p asm">
<p>ASM</p>
</div>
<div class="p may_mr">
<p>May MR</p>
</div>
<div class="p april_mr">
<p>April MR</p>
</div>
<div class="p dry_run">
<p>Dry Run</p>
</div>
<div class="p AUP_NG">
<p>AUP NG</p>
</div>
<div class="p Major_Release">
<p>Major Release</p>
</div>
<div class="p Late_Regres">
<p>Late Regress.</p>
</div>
<div class="p Web_Perform">
<p>Web Perform.</p>
</div>
<div class="p empty">
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div> Could you also describe as to why you are using HTML Dashboard instead of Simple XML JS extension as that would have made dashboard coding and editing a lot easier? Following is a Simple XML example (JS would need to be coded for handling click on buttons). <dashboard>
<label>Table with Header</label>
<row>
<panel>
<html id="html_header">
<style>
#element1 th[data-sort-key="Application Name"],
#element1 th[data-sort-key="Test Case"]{
width: 10% !important;
padding-left: 0px;
padding-right: 0px;
}
#element1 th[data-sort-key^="QA"],
#element1 th[data-sort-key^="STG"],
#element1 th[data-sort-key^="PVE"]{
width: 8% !important;
padding-left: 0px;
padding-right: 0px;
}
div.panel-body.html{
display: flex;
padding-left: 0px !important;
padding-right: 0px !important;
}
#html_header #button_options{
width: 10% !important;
border-style: solid;
}
#html_header .p.swimlane{
width: 10% !important;
}
#html_header div.p{
border-style: solid;
text-align: center;
}
#html_header div.p{
width: 8% !important;
}
#html_header .p.Major_Release{
width: 16% !important;
}
#html_header #button_options a{
border-width: 2px;
border-style: solid;
border-radius: 50%;
margin-right: 5px;
}
#html_header #button_options a i{
text-align: center;
width: 15px;
}
</style>
<div id="button_options">
<a title="Go to search screen"><i class="icon-search"></i></a>
<a title="Issue log"><i class="icon-menu"></i></a>
<a title="FAQ"><i class="icon-question"></i></a>
</div>
<div class="p swimlane">
<p>Swimlane Upcoming Releases</p>
</div>
<div class="p asm">
<p>ASM</p>
</div>
<div class="p may_mr">
<p>May MR</p>
</div>
<div class="p april_mr">
<p>April MR</p>
</div>
<div class="p dry_run">
<p>Dry Run</p>
</div>
<div class="p AUP_NG">
<p>AUP NG</p>
</div>
<div class="p Major_Release">
<p>Major Release</p>
</div>
<div class="p Late_Regres">
<p>Late Regress.</p>
</div>
<div class="p Web_Perform">
<p>Web Perform.</p>
</div>
<div class="p empty">
<p></p>
</div>
</html>
</panel>
</row>
<row>
<panel>
<table id="element1">
<search>
<query>| makeresults
| fields - _time
| eval "Application Name"="ABCD","Test Case"="ABCD",QA1="warn",QA2="warn",QA3="warn",QA4="ok",QA5="warn",QA6="warn",QA7="critical",STG="critical",STG2="N/A",PVE="ok"
| table "Application Name", "Test Case", QA*, STG*,PVE</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">10</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
</row>
</dashboard>
... View more