How to Get Rid of Vertical Scroll Bar in Tab Container

SarojThapa1

I have created a couple pie charts in a Tab Container based on the sample ArcGIS API for JavaScript Sandbox. In this sample, if you click on the "Pie Chart " tab, you will see a vertical scroll bar. How can I get rid of this bar? Also,  I would like to display the percentage inside the pie chart sectors when hovered. Any suggestions are greatly appreciated.

Thanks  

kenbuja

There are two ways you can get rid of the vertical scroll. First, you can turn that off in the style of the ContentPane

<SPAN class="keyword token">var</SPAN> cp2 <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ContentPane</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; style<SPAN class="punctuation token">:</SPAN><SPAN class="string token">"overflow:hidden"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp; title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Pie Chart"</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

The other way is to make the pie chart smaller

tc<SPAN class="punctuation token">.</SPAN><SPAN class="token function">watch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"selectedChildWidget"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>name<SPAN class="punctuation token">,</SPAN> oldVal<SPAN class="punctuation token">,</SPAN> newVal<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN> newVal<SPAN class="punctuation token">.</SPAN>title <SPAN class="operator token">===</SPAN> <SPAN class="string token">"Pie Chart"</SPAN> <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; chart<SPAN class="punctuation token">.</SPAN><SPAN class="token function">resize</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">170</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">170</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//was 180,180</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>