-2
Dans ArcGIS Online (carte du navigateur), j'ai collé le code HTML et CSS en plusieurs points différents. L'objectif est de faire apparaître une table stylée dans la boîte de dialogue/petite fenêtre lorsque le point est cliqué. Au début, la table ressemble et fonctionne correctement, cependant; Après avoir enregistré le calque, l'avoir retiré, puis l'avoir rechargé, tout ce que vous voyez est le code CSS brut et une table avec un style zéro. Après avoir consulté la page d'aide HTML prise en charge par ArcGIS, j'ai remarqué que la version du navigateur en ligne ne prend pas en charge la balise "style" (externe, interne et intégrée) et qu'elle est filtrée hors du code. C'est ce qui a amené ma table à afficher du code brut après l'avoir rechargé.La table CSS personnalisée ne fonctionne pas dans ArcGIS Online
Les options qu'ils listent sont "div" et "span", mais je n'arrive pas à les faire fonctionner correctement. Y a-t-il un moyen de faire en sorte que ce travail fonctionne comme je le souhaite?
ArcGIS Online Supported HTML Page
code complet actuel ci-dessous:
<style type="text/css"> (this style tag doesn't work and is 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 a {
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 and is 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 will eventually be inserted here"><span>Temporary Blank</span></a>
</li>
<li><a href="address will eventually be inserted here"><span>Temporary Blank</span></a>
</li>
<li><a href="address will eventually be 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>