Estoy intentando ajustar la visualización de los atributos personalizados (HTML) en las ventanas emergentes de mi mapa web para adaptarla a la base de datos de atributos. Aquí explico a qué me refiero. Tengo una ventana emergente personalizada que creé para un mapa o una aplicación web, y se ve ordenada y limpia cuando los atributos se «comportan» bien: Pero, cuando tengo un atributo muy largo, como una URL, la ventana emergente se ve mucho más desordenada: Pregunta: ¿Hay alguna forma de usar una instrucción if/then, o algo parecido, en el HTML personalizado para detectar si el atributo es una URL o si es muy largo y, en ese caso, no mostrarlo completo o convertir el HTML en un enlace en el que se pueda hacer clic? Este es el fragmento de HTML que usé para mostrar mis atributos personalizados: tabla estilo =" borde : 2px sólido ; colapso de borde : colapsar ; ancho : 100% " > tbody > tr estilo =" color de fondo : #DCDCDC ; borde : 1px sólido " > th estilo =" borde : 1px sólido ; relleno : 5px " > b > Nombre b > th > td estilo =" relleno : 5px " > {SourceFile} td > tr > tr > th estilo =" borde : 1px sólido ; relleno : 5px " > b > Proyecto n.º b > th > td estilo =" relleno : 5px " > {ProjectNumber} td > tr > tr estilo =" color de fondo : #DCDCDC ; borde : 1px sólido " > th estilo =" borde : 1px sólido ; relleno : 5px " > b > Fecha b > th > td estilo =" relleno : 5px " > {CreateDate} td > tr > tr > th estilo =" borde : 1px sólido ; relleno : 5px " > b > b > th > td style =" padding : 5px " > {Description} td > tr > tr style =" background-color : #DCDCDC ; border : 1px solid " > th style =" border : 1px solid ; padding : 5px " > b > Usuario b > th > td style =" padding : 5px " > {User_} td > tr > tr > th style =" border : 1px solid ; padding : 5px " > b > Disciplina b > th > td style =" padding : 5px " > {Discipline} td > tr > tr style =" background-color : #DCDCDC ; border : 1px solid " > th style =" border : 1px solid ; padding : 5px " > b > Tipo de visita b > th > td style =" padding : 5px " > {VisitType} br /> td > tr > tr > th style =" border : 1px solid ; padding : 5px " > b > Ruta b > th > td style =" padding : 5px " > {Route} br /> td > tr > tbody > table > (sí que es complicado cuando no puedes usar correctamente los elementos Style o CSS...)

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

HTML personalizado en las ventanas emergentes de mapas web

AdrianWelsh

Estoy intentando ajustar la visualización de los atributos personalizados (HTML) en las ventanas emergentes de mi mapa web para adaptarla a la base de datos de atributos.

Aquí explico a qué me refiero. Tengo una ventana emergente personalizada que creé para un mapa o una aplicación web, y se ve ordenada y limpia cuando los atributos se «comportan» bien:

Pero, cuando tengo un atributo muy largo, como una URL, la ventana emergente se ve mucho más desordenada:

Pregunta:

¿Hay alguna forma de usar una instrucción if/then, o algo parecido, en el HTML personalizado para detectar si el atributo es una URL o si es muy largo y, en ese caso, no mostrarlo completo o convertir el HTML en un enlace en el que se pueda hacer clic?

Este es el fragmento de HTML que usé para mostrar mis atributos personalizados:

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>tabla</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">estilo</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">borde</SPAN><SPAN class="punctuation token">:</SPAN>2px sólido<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">colapso de borde</SPAN><SPAN class="punctuation token">:</SPAN>colapsar<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">ancho</SPAN><SPAN class="punctuation token">:</SPAN>100%</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>

&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>tbody</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>tr</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">estilo</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">color de fondo</SPAN><SPAN class="punctuation token">:</SPAN>#DCDCDC<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">borde</SPAN><SPAN class="punctuation token">:</SPAN>1px sólido</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>th</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">estilo</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">borde</SPAN><SPAN class="punctuation token">:</SPAN>1px sólido<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">relleno</SPAN><SPAN class="punctuation token">:</SPAN>5px</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>b</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Nombre<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>b</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>th</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>td</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">estilo</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">relleno</SPAN><SPAN class="punctuation token">:</SPAN>5px</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>{SourceFile}<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>td</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>tr</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>tr</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>th</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">estilo</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">borde</SPAN><SPAN class="punctuation token">:</SPAN>1px sólido<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">relleno</SPAN><SPAN class="punctuation token">:</SPAN>5px</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>b</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Proyecto n.º<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>b</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>th</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>td</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">estilo</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">relleno</SPAN><SPAN class="punctuation token">:</SPAN>5px</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>{ProjectNumber}<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>td</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>tr</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>tr</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">estilo</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">color de fondo</SPAN><SPAN class="punctuation token">:</SPAN>#DCDCDC<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">borde</SPAN><SPAN class="punctuation token">:</SPAN>1px sólido</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>th</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">estilo</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">borde</SPAN><SPAN class="punctuation token">:</SPAN>1px sólido<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">relleno</SPAN><SPAN class="punctuation token">:</SPAN>5px</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>b</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Fecha<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>b</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>th</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>td</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">estilo</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">relleno</SPAN><SPAN class="punctuation token">:</SPAN>5px</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>{CreateDate}<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>td</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>tr</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>tr</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>th</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">estilo</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">borde</SPAN><SPAN class="punctuation token">:</SPAN>1px sólido<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">relleno</SPAN><SPAN class="punctuation token">:</SPAN>5px</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN  class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>b</SPAN><SPAN class="punctuation token">></SPAN></SPANDescripción<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>b</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>th</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>td</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN>5px</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>{Description}<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>td</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>tr</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>tr</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN>#DCDCDC<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">border</SPAN><SPAN class="punctuation token">:</SPAN>1px solid</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>th</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">border</SPAN><SPAN class="punctuation token">:</SPAN>1px solid<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN>5px</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>b</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Usuario<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>b</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>th</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>td</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN>5px</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>{User_}<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>td</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>tr</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>tr</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>th</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">border</SPAN><SPAN class="punctuation token">:</SPAN>1px solid<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN>5px</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>b</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Disciplina<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>b</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>th</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>td</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN>5px</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>{Discipline}<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>td</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>tr</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>tr</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN>#DCDCDC<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">border</SPAN><SPAN class="punctuation token">:</SPAN>1px solid</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>th</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">border</SPAN><SPAN class="punctuation token">:</SPAN>1px solid<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN>5px</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>b</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Tipo de visita<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>b</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>th</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>td</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN>5px</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>{VisitType}&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>br</SPAN> <SPAN class="punctuation token">/></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>td</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>tr</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>tr</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>th</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">border</SPAN><SPAN class="punctuation token">:</SPAN>1px solid<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN>5px</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>b</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Ruta<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>b</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>th</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN  class="punctuation token"><</SPAN>td</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN>5px</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>{Route}&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>br</SPAN> <SPAN class="punctuation token">/></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>td</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>tr</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>tbody</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>table</SPAN><SPAN class="punctuation token">></SPAN></SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

(sí que es complicado cuando no puedes usar correctamente los elementos Style o CSS...)

Encuentra más publicaciones etiquetadas con

Accepted answers

TiffanySelvidge1

My links are coded and formatted before uploading. Mine are formatted as: <a href="http://url" target"_blank">This link will open the document in a new tab</a>. The popup (using Portal) translates it into a URL and only displays the text "This link will open the document in a new tab". I tried coding directly in the popup but was unsuccessful. My method works for my urls and is very quick at converting.

All comments

FC_Basson

There's no way to do this with CSS only.

If the Description field was always a URL, you could set the td content as a clickable link e.g.

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>td</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN>5px</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>a</SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>{Description}<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">target</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>_blank<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>HTML Link<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>a</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>td</SPAN><SPAN class="punctuation token">></SPAN></SPAN>‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

If you want to truncate the text, you can use the CSS text-overflow property for the td element (see Use CSS "text-overflow" to truncate long texts - makandropedia )

AdrianWelsh

Thanks for the help. It looks like there are too many limitations to make this work. I wish they were all URLs so I could make them clickable.

I tried using the text-overflow property but it does not seem to stick. This is what I have:

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>td</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN>5px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">white-space</SPAN><SPAN class="punctuation token">:</SPAN> normal<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 12em<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">overflow</SPAN><SPAN class="punctuation token">:</SPAN> hidden<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">text-overflow</SPAN><SPAN class="punctuation token">:</SPAN> ellipsis</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>{Description}<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>td</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

FC_Basson

You might need to add !important to your custom CSS to overwrite the AGO CSS.

AdrianWelsh

Thanks for the suggestion. This seems like it should work but I still cannot get it to show what I think it should show. Maybe I am not coding it properly

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>td</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN>5px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">white-space</SPAN><SPAN class="punctuation token">:</SPAN> normal<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 12em<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">overflow</SPAN><SPAN class="punctuation token">:</SPAN> hidden<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">text-overflow</SPAN><SPAN class="punctuation token">:</SPAN> ellipsis <SPAN class="important token">!important</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>{Description}<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>td</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

I've tried moving the !important around but still no luck.

AdrianWelsh

Does anyone have suggestions on how to properly use

!important<SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

in an https://community.esri.com/community/gis/web-gis/arcgisonline?sr=search&searchId=a33f4169-71ab-46a3-9b57-06e2bb36c04c&searchIndex=2 custom popup? I feel like this could potentially solve my issue but maybe I'm not using the syntax properly.

TiffanySelvidge1

How are you getting the data? Can you code it to check for urls before putting it into the field? Sql check for https, if present then use as url if not then use as regular text. Then put the data into the shapefile and load into arcgisonline.

FC_Basson

The way you've used it is correct - just add it to the other CSS properties such as overflow and white-space too.

AdrianWelsh

Tiffany,

The data is originally in a spreadsheet that gets converted into a point file on Desktop. Then, I publish the data into ArcGIS Online as a hosted feature service. I am not sure I can use a SQL statement in ArcGIS Online. Could that be arranged in the popup?

AdrianWelsh

Those are good suggestions but it looks like this is not changing the popup either

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>td</SPAN> <SPAN class="attr-name token">style</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>padding:3px; white-space: normal !important;
 width: 12em !important; overflow: hidden !important;
 text-overflow: ellipsis !important<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>{Description}<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>td</SPAN><SPAN class="punctuation token">></SPAN></SPAN>‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Edited to add: Maybe it will reflect better when I put this all on one line:

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>td</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN>3px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">white-space</SPAN><SPAN class="punctuation token">:</SPAN> normal <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 12em <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">overflow</SPAN><SPAN class="punctuation token">:</SPAN> hidden <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="property token">text-overflow</SPAN><SPAN class="punctuation token">:</SPAN> ellipsis <SPAN class="important token">!important</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>{Description}<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>td</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

TiffanySelvidge1

AdrianWelsh

Wow, that's a brilliant way to solve the problem! So simple. (Though, it's too bad I have little control over the custom HTML within ArcGIS Online).

Thanks for helping Tiffany!

GeneH_Chesco

Adrian - I like the look of your popup with the title bar transparency and overall styling of it. Would you mind sharing the URL to that map?

AdrianWelsh

Thanks Gene. Here is the web app:

https://arcg.is/0nmjfj

I've learned a lot about what you cannot do with making custom HTML in ArcGIS Online. Many things are quite deceiving and the bottom line is, make sure you always test your work on an outside browser to see how things will look to other people.

TKSHEP

Is there a way I can get a copy of the how or how you configured the popup in the map and app? I like your popup and would like to do something similar with adding the photo within the popup like you did.

Thank you!

AdrianWelsh

Trisha,

Take a look at the initial post. That has the custom html I used in my popup. Let me know if that works.

I have now discovered this link:

https://doc.arcgis.com/en/arcgis-online/reference/supported-html.htm

It mentions what HTML is supported in AGOL.

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.