Siren 12.1 HTML content resizing

Hello,

I’m still trying to figure out why but for some reason since I upgraded to 12.1 all my html data tables visualizations look weird. Content isn’t resizing properly like it did before. The default layout still works the only problem becomes when I apply a custom template.

Thanks.

Hi James,

Is it possible to share screen shot of the custom template how it looks in 12.1?

Also it would be good if you can share the custom template script as well.

Regards
Manu Agarwal

Hi Manu.

I took some screenshots but when I try to attach them it says internal server error… I can upload it to a cloud share and just attach the link if you want.

Here is the code. I removed all the css (it has a lot).

<div style="word-wrap: break-word;min-width=100px">
  <div ng-repeat="hit in hits|limitTo:limit track by hit._index+hit._type+hit._id+hit._score" class="flex flex-col space-y-12" >
         <div class="px-4 py-5 bg-base200 rounded-lg shadow-md">
            <div class="flex justify-between mb-2">
               <div class="text-gray-500">Mail</div>
               <div>{{ hit._source['date'] }}</div>
            </div>
            <div class="flex space-x-2">
               <div class="font-semibold mt-1">title:</div>
               <div class="text-xl font-semibold text-gray-700 mb-3">{{ hit._source['subject'] }}</div>
            </div>
            <a target="_blank" rel="noreferrer" class="flex space-x-2">
               <div class="font-semibold">from:</div>
               <div class="flex text-blue-500 space-x-1 flex-wrap">
                  <div>{{ hit._source['from'] }}</div>
               </div>
            </a>
            <div class="flex space-x-2">
               <div class="font-semibold">to:</div>
               <div class="flex space-x-1 flex-wrap">{{ hit._source['to'] }}</div>
            </div>
            <div class="flex border-t my-3 h-0.25"></div>
            <div class="mt-4 whitespace-pre-wrap overflow-y-auto max-h-96">
               {{ hit._source['content'] }}
            </div>
            <div class="flex border-t my-3 h-0.25"></div>
            <section class="flex flex-col">
               <div class="flex flex-col">
                  <div class="flex space-x-2">
                     <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" class="text-primary text-2xl" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4.5 3a2.5 2.5 0 0 1 5 0v9a1.5 1.5 0 0 1-3 0V5a.5.5 0 0 1 1 0v7a.5.5 0 0 0 1 0V3a1.5 1.5 0 1 0-3 0v9a2.5 2.5 0 0 0 5 0V5a.5.5 0 0 1 1 0v7a3.5 3.5 0 1 1-7 0V3z"></path>
                     </svg>
                     <div>X (NUMBER) OF ATTACHMENTS / SAMPLE MEDIA </div>
                  </div>
                  <div class="flex space-x-5 mt-4 pb-4 overflow-x-auto">
                     <a href="{{ hit._source['attachment_link'] }}" rel="noopener noreferrer" class="flex items-center space-x-3" target="_blank">
                        <div class="text-2xl">
                           <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                              <path d="M874.6 301.8L596.8 21.3c-4.5-4.5-9.4-8.3-14.7-11.5-1.4-.8-2.8-1.6-4.3-2.3-.9-.5-1.9-.9-2.8-1.3-9-4-18.9-6.2-29-6.2H201c-39.8 0-73 32.2-73 72v880c0 39.8 33.2 72 73 72h623c39.8 0 71-32.2 71-72V352.5c0-19-7-37.2-20.4-50.7zM583 110.4L783.8 312H583V110.4zM823 952H200V72h311v240c0 39.8 33.2 72 73 72h239v568zM350 696.5c0 24.2-7.5 31.4-21.9 31.4-9 0-18.4-5.8-24.8-18.5L272.9 732c13.4 22.9 32.3 34.2 61.3 34.2 41.6 0 60.8-29.9 60.8-66.2V577h-45v119.5zM501.3 577H437v186h44v-62h21.6c39.1 0 73.1-19.6 73.1-63.6 0-45.8-33.5-60.4-74.4-60.4zm-.8 89H481v-53h18.2c21.5 0 33.4 6.2 33.4 24.9 0 18.1-10.5 28.1-32.1 28.1zm182.5-9v36h30v30.1c-4 2.9-11 4.7-17.7 4.7-34.3 0-50.7-21.4-50.7-58.2 0-36.1 19.7-57.4 47.1-57.4 15.3 0 25 6.2 34 14.4l23.7-28.3c-12.7-12.8-32.1-24.2-59.2-24.2-49.6 0-91.1 35.3-91.1 97 0 62.7 40 95.1 91.5 95.1 25.9 0 49.2-10.2 61.5-22.6V657H683z"></path>
                           </svg>
                        </div>
                        <div class="flex flex-col">
                           <div class="text-gray-800 font-semibold">{{ hit._source['attachment_name'] }}</div>
                        </div>
                     </a>
                  </div>
               </div>
            </section>
         </div>
      <br /><br />
  </div>
</div>

Any ideas what I’m doing wrong here?

Hi James,

We tested our custom templates and those are working fine , also tried your custom template and it looks fine.

If you can share the screen shot what content is resizing which was working fine before the upgrade then it will help.

Regards
Manu Agarwal

Weird. I’ll take another look and upload some images. Thanks.

Also, is there a way to navigate to another dashboard from a custom html table?
I.e. I have a very simple html template and I want to be able to click a link and be transferred to a related dashboard. Similar to the relational navigator only built in to the template.