How to remove blanck space ? Text Area/HMTL

[Informatics Consultant]

Hello Spotfire team,

I'm facing an issue during the creation of a Spotfire dashboard. (see 2 screenshots attached. Sensitive info are hidden in blue)

• 2 text area on the left side
• 1 text area using HTML in the middle
• 1 scatter plot on the right side

I created a Text Area to customize it in HTML. 

But, I have a large blank space at the bottom. The end-user unnecessarily scrolls down. I would like to have it more responsive, and adjusted to the window. 

How can I remove this blanc space? 

Find the HMTL code here :

<TABLE>
   <TBODY>
      <TR>
         <TD width=45 vAlign=middle><IMG src="dbb153f4ec5e44a089740d41a224f298.png"></TD>
         <TD vAlign=middle><FONT color=#4472c4>Y AXIS</FONT></TD>
      </TR>
      <TR>
         <TD></TD>
         <TD>
            <TABLE width=150 align=left>
               <TBODY>
                  <TR>
                     <TD width=60 height=20>Scale</TD>
                     <TD>
                        <SPAN class=pill>
                           <SpotfireControl id="94de8a30a7d340aca2778452a1a654d2" />
                        </SPAN>
                        &nbsp;
                        <SpotfireControl id="bd3165b056ab4825932009fec93362eb" />
                     </TD>
                  </TR>
                  <TR>
                     <TD height=20>Decimals</TD>
                     <TD>
                        <SpotfireControl id="04f306533e2a4a489003e6c7cc7cdb7c" />
                     </TD>
                  </TR>
                  <TR>
                     <TD height=20>Format</TD>
                     <TD>
                        <SpotfireControl id="bcd5b725fb464fe89707f222d6a25e07" />
                     </TD>
                     <TD></TD>
                  </TR>
                  </TD></SPAN></TD>
                  <TR>
                     <TD><SPAN id="<span"></SPAN></SPAN></TD>
                  </TR>
               </TBODY>
            </TABLE>
         </TD>
      </TR>
      <TR>
         <TD width=45 vAlign=middle></TD>
         <TD vAlign=middle>
            <SpotfireControl id="161c57c8fcc34d63921f629fc8246e73" />
            </FONT>
         </TD>
      </TR>
      <TR>
         <TD></TD>
      <TR>
         <TD width=45 height=15 vAlign=middle></TD>
         </TD>
      </TR>
      <TR>
         <TD><IMG src="8ecd25a7df79472d8a2108a6c8b5bceb.png"></TD>
         <TD vAlign=middle><FONT color=#4472c4>X AXIS</FONT></TD>
      </TR>
      <TR>
         <TD></TD>
         <TD>
            <TABLE width=150 align=left>
               <TBODY>
                  <TR>
                     <TD width=60>Orientation</TD>
                     <TD>
                        <SPAN class=pill>
                           <SpotfireControl id="0475e5fb84754acf9e87fe5e5dce7ce3" />
                        </SPAN>
                        &nbsp;
                        <SpotfireControl id="bfecb1cc352740a090c7d9acce366a56" />
                     </TD>
                  </TR>
               </TBODY>
            </TABLE>
         </TD>
      </TR>
      <TR>
         <TD></TD>
         <TD>
            <SpotfireControl id="6746991b37b74235abe4d96fcd397bed" />
         </TD>
      </TR>
      <TR>
         <TD width=45 height=15 vAlign=middle></TD>
         </TD>
      </TR>
      <TR>
         <TD><IMG src="22899641276c4f7a8d89020c5fb239e3.png"></TD>
         <TD vAlign=middle><FONT color=#4472c4>TRELLIS</FONT></TD>
      </TR>
      <TR>
         <TD></TD>
         <TD>
            <SpotfireControl id="c1543bddbe1e479f94b3ebd607af24bc" />
         </TD>
      </TR>
      <TR>
         <TD width=45 height=15 vAlign=middle></TD>
         </TD>
      </TR>
      <TR>
         <TD><IMG style="BORDER-TOP: 0px; HEIGHT: 31px; BORDER-RIGHT: 0px; WIDTH: 30px; BORDER-BOTTOM: 0px; BORDER-LEFT: 0px" src="ca60ddaf30f742618faecad49250a093.png"></TD>
         <TD vAlign=middle><FONT color=#4472c4>SIZE &amp; TRANSPARENCY</FONT></TD>
      </TR>
      <TR>
         <TD></TD>
         <TD>
            <TABLE width=150 align=left border=0>
               <TBODY>
                  <TR>
                     <TD width=60 height=20>Size</TD>
                     <TD>
                        <SpotfireControl id="1400dacec0ea4678844ab163b0d43aac" />
                     </TD>
                  </TR>
                  <TR>
                     <TD height=20>Transparency</TD>
                     <TD>
                        <SpotfireControl id="55012c3d447a46fda763c1bdafb54d37" />
                     </TD>
                  </TR>
               </TBODY>
            </TABLE>
         </TD>
      </TR>
      <TR>
         <TD width=45 height=15 vAlign=middle></TD>
         </TD>
      </TR>
      <TR>
         <TD><IMG src="7a40c7df970044eea657972051534adb.png" border=0></TD>
         <TD vAlign=middle><FONT color=#4472c4>COLOR</FONT></TD>
      </TR>
      <TR>
         <TD></TD>
         <TD>
            <SpotfireControl id="16f6adf612f44d889fdf3995585a0c72" />
         </TD>
      </TR>
      <TR>
         <TD width=45 height=15 vAlign=middle></TD>
         </TD>
      </TR>
      <TR>
         <TD><IMG src="536f648e94ab4c0981fc55c43ac62737.png" border=0></TD>
         <TD vAlign=middle><FONT color=#4472c4>CONNECT</FONT></TD>
      </TR>
      <TR>
         <TD></TD>
         <TD>
            <SpotfireControl id="676cd0a282ce4faa9253fda88b5cc2ff" />
         </TD>
      </TR>
      <TR>
         <TD width=45 height=15 vAlign=middle></TD>
         </TD>
      </TR>
      <TR>
         <TD></TD>
         <TD vAlign=middle><FONT color=#4472c4></FONT></TD>
      </TR>
      <TR>
         <TD></TD>
         <TD></TD>
      </TR>
      </TR>
   </TBODY>
</TABLE>

 

[Informatics Consultant]

up

[barchiel33]

The issue is that you're using a table for your layout instead of one of the more responsive layout methodologies. Look into switching to a grid or a flexbox layout. With both of those, you can have either the entire container or each individual element shrink or grow based on the viewport. It also seems like you've changed the canvas layout for this page, otherwise it wouldn't scroll. I would suggest you look into using some other content styling, such as a collapsible accordion, to reduce the necessary height and to also reduce the white space. For example, you could combine first and second columns of your current layout into a single column with an accordion. 

[Informatics Consultant]

Thank you for your answer barchiel33

"Accordion", do you suggest something like this ? 

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

https://www.w3schools.com/howto/howto_js_accordion.asp

[Informatics Consultant]

Even after removing all viz in the tab, I still get the scroll bar on the right 🤨

 

[Niko Maresco]

it looks like you still might have a Text Area visualization present in that screenshot.

from the code in your original post, it doesn't seem like there's anything that would cause the additional vertical space to appear. none of the elements have a particularly high height attribute that is immediately obvious. are there any additional CSS stylings being injected to this analysis?

one thing you can try is to turn on Developer Tools and inspect the Text Area to see what is adding the additional vertical space. to do so:

1. on the Analyst main menu, go to Tools >> Options
2. on the Application page, all the way at the bottom, tick "Show development menu"
3. restart Analyst
4. open your analysis
5. on the Analyst main menu, go to Tools >> Development >> Developer tools...
6. in the Developer tools window, click the arrow icon in the upper left:
    
7. click in the Text Area
8. focus back on the Developer tools window and peruse the HTML contained there. the layout guide might be useful:
   

(note that the Developer tools visibility option is per Spotfire server. that is, if you enable the option in Analyst's "offline" mode, you will have to also enable it when you connect to your organization's environment, and again for each PROD/TEST/DEV environment)

[Informatics Consultant]

Hi all,

Niko Maresco ▶️ I tried your process but nothing appeared in Development Tools containers..Very strange

 

Finally, I found the solution :

https://docs.tibco.com/pub/sfire-analyst/latest/doc/html/en-US/TIB_sfire-analyst_UsersGuide/layout/layout_modifying_responsive_layouts.htm

It was an issue due to the Page Layout Options for each tab. I just set it to the current height and it works now. No scroll bar is no longer shown! 😀

Thanks for your help

[barchiel33]

Yep, I mentioned that in my post although I called it the wrong thing. I said Canvas Layout when I meant Page Layout.