I've been having trouble using element Ids to customize buttons in my project. Button class selectors work but button element selectors do not. I've taken the same section of code and it works as a plain HTML file outside of AA. I was wondering if AA overrides button element Id's that I've assigned and uses it's own and that's why my CSS is not applying.
So in the case below the #main-clear-filter-btn is not green it has no color and takes the parent section's background color. The div element Id's work but maybe the buttons are reassigned. I'm not sure what is wrong.
The section below is from the onSummarySectionRender event and inserted into the innerHTML of div#summary above.
So in the case below the #main-clear-filter-btn is not green it has no color and takes the parent section's background color. The div element Id's work but maybe the buttons are reassigned. I'm not sure what is wrong.
HTML Code:
<style> button { font-family: Arial; color: #ffffff; font-size: 15px; padding: 5px 10px 5px 10px; text-decoration: none; outline: none; border: none; } #main-clear-filter-btn { background: #45B449; width: 50%; } td { padding-left:10px; padding-right:10px; } #search-table { width: 100%; font-weight: 12px; margin: 10px; } .searchheader { padding-top:100px; } #search-field{ width: = 100%; } #advanced{ font-weight: 10px; } .search-cells { width: 100%; } .search-fields-rows { top: 0px; } </style> <div id="summary"></div> <table id="search-table"> <tr><td id="advanced">Advanced Filter:</td></tr> <tr class="searchheader"> <td class="search-cells" id="SiteId">Site Id</td><td class="search-cells" id="StartDate">Start Date Range Start</td><td class="search-cells" id="Initiative">Initiative</td> </tr> <tr class="search-fields-rows"> <td class="search-cells">{SiteId}</td><td class="search-cells">{StartDate:search_start}</td><td class="search-cells">{Initiative}</td> </tr> <tr class="searchheader"> <td class="search-cells" id="ProjectName">Project Name</td><td class="search-cells" id="To.StartDate">Start Date Range End</td><td class="search-cells" id="EquipmentType">Equipment</td> </tr> <tr class="search-fields-rows"> <td class="search-cells">{ProjectName}</td><td class="search-cells">{StartDate:search_end}</td><td class="search-cells">{EquipmentType}</td> </tr> <tr class="searchheader"> <td class="search-cells" id="City">City</td><td class="search-cells" id="EndDate">Completion Date Range Start</td><td class="search-cells" id="Status">Status</td> </tr> <tr class="search-fields-rows"> <td class="search-cells">{City}</td><td class="search-cells">{EndDate:search_start}</td><td class="search-cells">{Status}</td> </tr> <tr class="searchheader"> <td class="search-cells" id="State">State</td><td class="search-cells" id="To.EndDate">Completion Date Range End</td><td class="search-cells" id="Milestone">Milestone</td> </tr> <tr class="search-fields-rows"> <td class="search-cells">{State}</td><td class="search-cells">{EndDate:search_end}</td><td class="search-cells">{Milestone}</td> </tr> <tr class="searchheader"> <td class="search-cells" id="Zip">Zip</td><td class="search-cells" id="Incentive">Incentive Range Lower</td><td class="search-cells" id="RebateProgram">Rebate Program</td> </tr> <tr class="search-fields-rows"> <td class="search-cells">{Zip}</td><td class="search-cells">{Incentive:search_start}</td><td class="search-cells">{RebateProgram}</td> </tr> <tr class="searchheader"> <td id="Id">RWW Id</td><td id="To.Incentive">Incentive Range Upper</td> </tr> <tr class="search-fields-rows"> <td class="search-cells">{Id}</td><td class="search-field">{Incentive:search_end}</td><td><button id="advanced-filter-btn" class="filter" onclick="{grid.object}.submitSearchForm(); return false;">Search</button><button id="main-clear-filter-btn" onclick="clearAllFilters()">Clear Filters</button></td> </tr> </table>
HTML Code:
<tr> <style> #summary-table{ border-collapse: separate; border-spacing: 0px; border-color: gray; font-family: Arial; font-size: 16px; margin: 10px; text-align: right; width: 100%; } #summary-title{ font-weight: bold; font-size:20px; padding-bottom: 10px; text-align:justify; } .filter { font-family: Arial; color: #ffffff; font-size: 15px; background: #2F5FAC; padding: 5px 10px 5px 10px; text-decoration: none; outline: none; border: none; } .filter:hover { background: #1b4b98; text-decoration: none; } .clear-filter-btn { font-family: Arial; color: #ffffff; font-size: 10px; background: #45B449; padding: 5px 8px 5px 8px; text-decoration: none; outline: none; border: none; visibility: visible; } .clear-filter-btn:hover { background: #32a038; text-decoration: none; visibility: visible; } .summary-row-labels{ position: relative; left: 0px; text-align: left; } .filter-btn-cells { } .dynamic-clear-filter-btn-div { } td.dynamic-clear-filter { width: 5%; } </style> <!--<tr><td colspan="{colspan}"style="padding-left:10px;">--> <!--<fieldset style="width: 50%;-moz-border-radius:0px;-webkit-border-radius: 0px;">--> <!--<legend style="font-weight: bold;font-size: 12pt;">Projects Summary</legend>--> <!--<table width="100%" border="1" cellspacing="0" cellpadding="2">--> <table id="summary-table"> <tr><td id="summary-title" colspan = 4><center>Projects Summary</center></td></tr> <tr><td></td><td> # Count </td><td> $ Sum Total </td></tr> <tr id="row-check-received"><td class="summary-row-labels">Total Rebate Checks Received</td><td>{totalchecks}</td><td>{sumchecks}</td><td class="filter-btn-cells"><button class="filter" onclick="filterChecksReceived()">Show Projects</button></td><td class="dynamic-clear-filter"><div class="dynamic-clear-filter-btn-div" id="btn-check-received"></div></td></tr> <tr id="row-final-app"><td class="summary-row-labels">Total Final Applications Submitted</td><td>{totalfinalapps}</td><td class="filter-btn-cells">{sumfinalapps}</td><td><button class="filter" onclick="filterFinalApps()">Show Projects</button></td><td class="dynamic-clear-filter"><div class="dynamic-clear-filter-btn-div" id="btn-final-app"></div></td></tr> <tr id="row-pre-app"><td class="summary-row-labels">Total Pre-Approval Applications Submitted</td><td>{totalpreapps}</td><td class="filter-btn-cells">{sumpreapps}</td><td><button class="filter" onclick="filterPreApps()">Show Projects</button></td><td class="dynamic-clear-filter"><div class="dynamic-clear-filter-btn-div" id="btn-pre-app"></div></td></tr> <tr id="row-active"><td class="summary-row-labels">Total Active Projects Not Submitted</td><td>{totalactivepresubmit}</td><td class="filter-btn-cells">{sumactivepresubmit}</td><td><button class="filter" onclick="filterActive()">Show Projects</button></td><td class="dynamic-clear-filter"><div class="dynamic-clear-filter-btn-div" id="btn-active"></div></td></tr> <tr id="row-termed"><td class="summary-row-labels">Total Projects Terminated</td><td>{totaltermedprojects}</td><td>NA</td><td class="filter-btn-cells"><button class="filter" onclick="filterTerminated()">Show Projects</button></td><td class="dynamic-clear-filter"><div class="dynamic-clear-filter-btn-div" id="btn-termed"></div></td></tr> <tr><td></td><td></td><td></td><td id="clear-filter-holder"></td></tr> <!--</table>--> <!--</fieldset>--> </tr>
Comment