Skip to main content
17-Peridot
February 10, 2022
Solved

Advanced Grid - Custom CSS within Cell

  • February 10, 2022
  • 3 replies
  • 4356 views

HTML with CSS contents will be work inside advanced grid? 

For Example:

 

 

<!DOCTYPE html>
<html>
<style>
.tooltip {
 position: relative;
 display: inline-block;
 border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
 visibility: hidden;
 width: 120px;
 background-color: black;
 color: #fff;
 text-align: center;
 border-radius: 6px;
 padding: 5px 0;

 /* Position the tooltip */
 position: absolute;
 z-index: 1;
}

.tooltip:hover .tooltiptext {
 visibility: visible;
}
</style>
<body style="text-align:center;">

<div class="tooltip">Hover over me
 <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

 

 

 

What are HTML and CSS codes will work within Advanced Grid?

Best answer by slangley

Hi @Sathishkumar_C.

 

Instead of using html, you could instead pass in the url and display the column as a hyperlink.   

 

As an alternative, you could try using the collection widget in table view (in the Properties Panel, View: Table) as opposed to the grid widget.  

 

If you have questions, please let us know.

 

Regards.

 

--Sharon

 

3 replies

17-Peridot
February 10, 2022
<a href="http://www.ptc.com" target="_blank">ptc website</a>

 

'_self' - Open in same window

'_blank' -- Open in new window

'_top' - Open in same window

'_parent'- Open in same window

 

Can we open in Popup screen from Advanced Grid HTML code?

24-Ruby III
February 10, 2022

Article - "Sample CSS for the Grid and Advanced Grid Widgets": https://www.ptc.com/en/support/article/CS314561

17-Peridot
February 11, 2022

Thanks for your information.

 

But I'm not looking for CSS for advanced grid.

 

I'm having an CSS and HTML code in Infotable. and trying to render as HTML. 

Community Manager
February 16, 2022

Hi @Sathishkumar_C.

 

We're not clear on your use case.  Can you please provide more details?

 

Regards.

 

--Sharon

 

 

17-Peridot
February 17, 2022

I am having an infotable with HTML field. I trying to apply CSS code for cell specific. So i have written HTML code with CSS and trying to render as HTML in advanced grid.

 

I don't see any changes with respect to CSS. Sample code attached in main thread.

Community Manager
February 22, 2022

Hi @Sathishkumar_C.

 

Does it work outside of ThingWorx?

 

Regards.

 

--Sharon