How to resize spotfire text area dynamically

Question

Filters in text area is consuming space even if I hide filters. I want to hide entire text area so that I have more space for my visualisations.

Text area should be dynamic that if user wants any filters there should be toggle button which helps to open filters and if they don't want then text area should be hidden

   <SpotfireControl id="c970da0f1b5549a88d27f368f6770f2f" />
<DIV id="showHidecontainer">
<TABLE style="WIDTH: 550.5pt" cellSpacing=0 cellPadding=0 width=751 border=0> 
<COLGROUP> 
<COL style="WIDTH: 118pt; mso-width-source: userset; mso-width-alt: 5741" width=157> 
<COL style="WIDTH: 21.5pt; mso-width-source: userset; mso-width-alt: 1133" width=31> 
<COL style="WIDTH: 118pt; mso-width-source: userset; mso-width-alt: 5741" width=157> 
<COL style="WIDTH: 21.5pt; mso-width-source: userset; mso-width-alt: 1133" width=31> 
<COL style="WIDTH: 118pt; mso-width-source: userset; mso-width-alt: 5741" width=157> 
<COL style="WIDTH: 21.5pt; mso-width-source: userset; mso-width-alt: 1133" width=31> 
<COL style="WIDTH: 118pt; mso-width-source: userset; mso-width-alt: 5741" width=157> 
<TBODY> 
<TR style="HEIGHT: 15.75pt" height=21> 
<TD class=xl65 style="BORDER-TOP: windowtext 1.5pt solid; BORDER-RIGHT: windowtext 1.5pt solid; WIDTH: 240pt; BORDER-BOTTOM: windowtext 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: #3166ff" width=157> 
<P align=center><STRONG><FONT color=#ffffff size=4 face=Calibri>Metric Selection</FONT></STRONG></P></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; WIDTH: 21.5pt; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" width=31></TD> 
<TD class=xl65 style="BORDER-TOP: windowtext 1.5pt solid; BORDER-RIGHT: windowtext 1.5pt solid; WIDTH: 118pt; BORDER-BOTTOM: windowtext 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: #3166ff" width=157> 
<P align=center><STRONG><FONT color=#ffffff size=4 face=Calibri>Channel</FONT></STRONG></P></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; WIDTH: 21.5pt; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" width=31></TD> 
<TD class=xl65 style="BORDER-TOP: windowtext 1.5pt solid; BORDER-RIGHT: windowtext 1.5pt solid; WIDTH: 128pt; BORDER-BOTTOM: windowtext 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: #3166ff" width=157> 
<P align=center><STRONG><FONT color=#ffffff size=4 face=Calibri>Trade Panel Selection</FONT></STRONG></P></TD> 


<TR style="HEIGHT: 15pt" height=20> 
<TD class=xl66 style="BORDER-RIGHT: windowtext 1.5pt solid; BORDER-TOP-COLOR: windowtext; BORDER-BOTTOM: black 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: transparent" rowSpan=7><FONT size=4 face=Calibri><P><STRONG><U>Metric Selection:</U></STRONG></P>
<P><STRONG>Metric:</STRONG> <SpotfireControl id="96184134b79e4dd4a0fb06aba8af4442" /> </P>
<P><STRONG>Threshold: </STRONG><SpotfireControl id="0695ba526b4045a5ba87408ff3b508e3" /></P>
<P><STRONG>Plan Type: </STRONG><SpotfireControl id="b8617a4560804448823d6bd61bba9235" /></P></FONT></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD class=xl66 style="BORDER-RIGHT: windowtext 1.5pt solid; BORDER-TOP-COLOR: #f7fdfa; BORDER-BOTTOM: black 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: transparent" rowSpan=7><FONT size=4 face=Calibri><SpotfireControl id="8f9ef7c8a16d451889733e5d3d9f8a43" /></FONT></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD class=xl66 style="BORDER-RIGHT: windowtext 1.5pt solid; BORDER-TOP-COLOR: #f7fdfa; BORDER-BOTTOM: black 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: transparent" rowSpan=7><FONT size=4 face=Calibri><SpotfireControl id="1e977330ab2b4e1e94bfd62c710b11ef" /></FONT></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TR style="HEIGHT: 15pt" height=20> 
<TD style="HEIGHT: 15pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=20></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR> 
<TR style="HEIGHT: 15pt" height=20> 
<TD style="HEIGHT: 15pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=20></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR> 
<TR style="HEIGHT: 15pt" height=20> 
<TD style="HEIGHT: 15pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=20></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR> 
<TR style="HEIGHT: 15pt" height=20> 
<TD style="HEIGHT: 15pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=20></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR> 
<TR style="HEIGHT: 15pt" height=20> 
<TD style="HEIGHT: 15pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=20></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR> 
<TR style="HEIGHT: 15.75pt" height=21> 
<TD style="HEIGHT: 15.75pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=21></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR> 
<TR style="HEIGHT: 15.75pt" height=21> 
<TD style="HEIGHT: 15.75pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=21></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR> 


</TBODY></TABLE> </div>


$("#c970da0f1b5549a88d27f368f6770f2f").on('change',function(){
 $("option:selected",this).text()=="Show"?
  $("#showHidecontainer").fadeIn():
  $("#showHidecontainer").fadeOut()
})

Please provide more info, like the code you tried to achieve your goal. — George Kagan, Oct 03 '16 at 11:36

score 1 · Answer 1 · answered Oct 04 '16 at 12:43

1

What type of spotfire control is your $("#c970da0f1b5549a88d27f368f6770f2f")? if it's a dropdown, you can do:

$('#c970da0f1b5549a88d27f368f6770f2f').on('DOMSubtreeModified',function(){
    seleciton = $(this).text()
    if (seleciton=="show"){$("#showHidecontainer").show()}
    if (seleciton=="hide"){$("#showHidecontainer").hide()}
})

This approach works on 7.5+ as it uses HTML5

answered Oct 04 '16 at 12:43

jleviaguirre

686
6
10

I recommend using bookmarks to resize the entire text area or use a different design approach if you are doing a guided analysis. – jleviaguirre Oct 04 '16 at 12:46

How to resize spotfire text area dynamically

1 Answers1