html - Custom CSS styled table not working in ArcGIS Online -
in arcgis online (browser map), have been pasting html , css code several different plotted points. goal have styled table pop in dialog box/small window when point clicked on. @ first, table looks , functions properly, however; after saving layer, removing it, reloading it, see raw css code , table 0 styling.
after reviewing arcgis supported html page, noticed online browser version not support "style" tag (external, internal, , inline), , gets filtered out of code. caused table show raw code after reloading it.
the options list "div" , "span," cannot seem these work properly. there way make work way intend to?
arcgis online supported html page
actual full code below:
<style type="text/css"> (this style tag doesn't work , automatically filtered out) .datagrid table { border-collapse: collapse; text-align: left; width: 1280px; } .datagrid { font: normal 12px/150% arial, helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #006699; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .datagrid table td, .datagrid table th { padding: 12px 10px; } .datagrid table thead th { background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #4d1a75)); background: -moz-linear-gradient( center top, #006699 5%, #4d1a75 100%); filter: progid: dximagetransform.microsoft.gradient(startcolorstr='#006699', endcolorstr='#4d1a75'); background-color: #006699; color: #ffffff; font-size: 17px; font-weight: bold; border-left: 1px solid #0070a8; } .datagrid table thead th:first-child { border: none; } .datagrid table thead th:nth-child(1) { border: none; background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9643d6), color-stop(1, #4d1a75)); background: -moz-linear-gradient( center top, #9643d6 5%, #4d1a75 100%); background-color: #9643d6; } .datagrid table thead th:nth-child(2) { border: none; background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d05649), color-stop(1, #7a281f)); background: -moz-linear-gradient( center top, #d05649 5%, #7a281f 100%); background-color: #d05649; } .datagrid table thead th:nth-child(3) { border: none; background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #159d82), color-stop(1, #094338)); background: -moz-linear-gradient( center top, #159d82 5%, #094338 100%); background-color: #159d82; } .datagrid table tbody td { color: #00496b; border-left: 1px solid #4d1a75; font-size: 12px; border-bottom: 1px solid #4d1a75; font-weight: normal; } .datagrid table tbody .alt td { color: #00496b; } .datagrid table tbody td:first-child { border-left: none; } .datagrid table tbody td:nth-child(1) { background: #f4e3ff; } .datagrid table tbody .alt td:nth-child(1) { background: #ffffff; } .datagrid table tbody td:nth-child(2) { background: #f9d9d6; } .datagrid table tbody .alt td:nth-child(2) { background: #ffffff; } .datagrid table tbody td:nth-child(3) { background: #a5f3e3; } .datagrid table tbody .alt td:nth-child(3) { background: #ffffff; } .datagrid table tbody tr:last-child td { border-bottom: none; } .datagrid table tfoot td div { border-top: 1px solid #652299; background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #939393), color-stop(1, #ffffff)); background: -moz-linear-gradient( center top, #737373 5%, #ffffff 10%); background-color: #737373; } .datagrid table tfoot td { padding: 0; font-size: 12px } .datagrid table tfoot td div { padding: 2px; } .datagrid table tfoot td ul { margin: 0; padding: 0; list-style: none; text-align: right; } .datagrid table tfoot li { display: inline; } .datagrid table tfoot li { text-decoration: none; display: inline-block; padding: 4px 8px; margin: 1px; color: #ffffff; border: 1px solid #652299; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #652299), color-stop(1, #4d1a75)); background: -moz-linear-gradient( center top, #006699 5%, #4d1a75 100%); filter: progid: dximagetransform.microsoft.gradient(startcolorstr='#652299', endcolorstr='#4d1a75'); background-color: #652299; } .datagrid table tfoot ul.active, .datagrid table tfoot ul a:hover { text-decoration: none; border-color: #652299; color: #ffffff; background: none; background-color: #0682b8; </style> (this style tag doesn't work , automatically filtered out) <div class="datagrid"> <table style="text-align:center"> <thead> <tr> <th style="text-align:center">header</th> <th style="text-align:center">header</th> <th style="text-align:center">header</th> </tr> </thead> <tfoot> <tr> <td colspan="3"> <div id="paging"> <ul> <li><a href="address inserted here"><span>temporary blank</span></a> </li> <li><a href="address inserted here"><span>temporary blank</span></a> </li> <li><a href="address inserted here"><span>temporary blank</span></a> </li> </ul> </div> </tr> </tfoot> <tbody> <tr> <td>data</td> <td>data</td> <td>data</td> </tr> <tr class="alt"> <td>data</td> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> </tr> <tr class="alt"> <td>data</td> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> </tr> <tr class="alt"> <td>data</td> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> </tr> <tr class="alt"> <td>data</td> <td>data</td> <td>data</td> </tr> </tbody> </table> </div>
it full
<style type="text/css"> .datagrid table { border-collapse: collapse; text-align: left; width: 1280px; } .datagrid { font: normal 12px/150% arial, helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #006699; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .datagrid table td, .datagrid table th { padding: 12px 10px; } .datagrid table thead th { background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #4d1a75)); background: -moz-linear-gradient( center top, #006699 5%, #4d1a75 100%); filter: progid: dximagetransform.microsoft.gradient(startcolorstr='#006699', endcolorstr='#4d1a75'); background-color: #006699; color: #ffffff; font-size: 17px; font-weight: bold; border-left: 1px solid #0070a8; } .datagrid table thead th:first-child { border: none; } .datagrid table thead th:nth-child(1) { border: none; background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9643d6), color-stop(1, #4d1a75)); background: -moz-linear-gradient( center top, #9643d6 5%, #4d1a75 100%); background-color: #9643d6; } .datagrid table thead th:nth-child(2) { border: none; background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d05649), color-stop(1, #7a281f)); background: -moz-linear-gradient( center top, #d05649 5%, #7a281f 100%); background-color: #d05649; } .datagrid table thead th:nth-child(3) { border: none; background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #159d82), color-stop(1, #094338)); background: -moz-linear-gradient( center top, #159d82 5%, #094338 100%); background-color: #159d82; } .datagrid table tbody td { color: #00496b; border-left: 1px solid #4d1a75; font-size: 12px; border-bottom: 1px solid #4d1a75; font-weight: normal; } .datagrid table tbody .alt td { color: #00496b; } .datagrid table tbody td:first-child { border-left: none; } .datagrid table tbody td:nth-child(1) { background: #f4e3ff; } .datagrid table tbody .alt td:nth-child(1) { background: #ffffff; } .datagrid table tbody td:nth-child(2) { background: #f9d9d6; } .datagrid table tbody .alt td:nth-child(2) { background: #ffffff; } .datagrid table tbody td:nth-child(3) { background: #a5f3e3; } .datagrid table tbody .alt td:nth-child(3) { background: #ffffff; } .datagrid table tbody tr:last-child td { border-bottom: none; } .datagrid table tfoot td div { border-top: 1px solid #652299; background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #939393), color-stop(1, #ffffff)); background: -moz-linear-gradient( center top, #737373 5%, #ffffff 10%); background-color: #737373; } .datagrid table tfoot td { padding: 0; font-size: 12px } .datagrid table tfoot td div { padding: 2px; } .datagrid table tfoot td ul { margin: 0; padding: 0; list-style: none; text-align: right; } .datagrid table tfoot li { display: inline; } .datagrid table tfoot li { text-decoration: none; display: inline-block; padding: 4px 8px; margin: 1px; color: #ffffff; border: 1px solid #652299; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #652299), color-stop(1, #4d1a75)); background: -moz-linear-gradient( center top, #006699 5%, #4d1a75 100%); filter: progid: dximagetransform.microsoft.gradient(startcolorstr='#652299', endcolorstr='#4d1a75'); background-color: #652299; } .datagrid table tfoot ul.active, .datagrid table tfoot ul a:hover { text-decoration: none; border-color: #652299; color: #ffffff; background: none; background-color: #0682b8; </style> (this style tag doesn't work , automatically filtered out) <div class="datagrid"> <table style="text-align:center"> <thead> <tr> <th style="text-align:center">header</th> <th style="text-align:center">header</th> <th style="text-align:center">header</th> </tr> </thead> <tfoot> <tr> <td colspan="3"> <div id="paging"> <ul> <li><a href="address inserted here"><span>temporary blank</span></a> </li> <li><a href="address inserted here"><span>temporary blank</span></a> </li> <li><a href="address inserted here"><span>temporary blank</span></a> </li> </ul> </div> </tr> </tfoot> <tbody> <tr> <td>data</td> <td>data</td> <td>data</td> </tr> <tr class="alt"> <td>data</td> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> </tr> <tr class="alt"> <td>data</td> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> </tr> <tr class="alt"> <td>data</td> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> </tr> <tr class="alt"> <td>data</td> <td>data</td> <td>data</td> </tr> </tbody> </table> </div>
Comments
Post a Comment