<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>G to The Square &#187; Extjs</title>
	<atom:link href="http://www.gtothesquare.com/tag/extjs/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.gtothesquare.com</link>
	<description></description>
	<lastBuildDate>Thu, 15 Jul 2010 21:10:22 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=abc</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Extjs How to fix disappearing button in collapsible panels</title>
		<link>http://www.gtothesquare.com/2009/10/22/extjs-how-to-fix-disappearing-button-in-collapsible-panels/</link>
		<comments>http://www.gtothesquare.com/2009/10/22/extjs-how-to-fix-disappearing-button-in-collapsible-panels/#comments</comments>
		<pubDate>Thu, 22 Oct 2009 21:16:22 +0000</pubDate>
		<dc:creator>Geries Handal</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Extjs]]></category>
		<category><![CDATA[firebug]]></category>
		<category><![CDATA[html]]></category>

		<guid isPermaLink="false">http://www.gtothesquare.com/2009/10/22/extjs-how-to-fix-disappearing-button-in-collapsible-panels/</guid>
		<description><![CDATA[
			
				
			
		
I had a window, which contained two form panels. One of the panels was collapsible (similar to this) and after some upgrades it top working: the collapsible button will disappear after collapsing the panel. After Googling and not finding nothing I decided to do a detail trace of the problem using firebug. While observing the [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.gtothesquare.com%2F2009%2F10%2F22%2Fextjs-how-to-fix-disappearing-button-in-collapsible-panels%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.gtothesquare.com%2F2009%2F10%2F22%2Fextjs-how-to-fix-disappearing-button-in-collapsible-panels%2F&amp;source=gtothesquare&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>I had a window, which contained two form panels. One of the panels was collapsible (similar to <a href="http://www.extjs.com/deploy/dev/examples/panel/panels.html" target="_blank">this</a>) and after some upgrades it top working: the collapsible button will disappear after collapsing the panel. After Googling and not finding nothing I decided to do a detail trace of the problem using firebug. While observing the HTML tab in firebug, I saw that the problem was in the margins of the form-panel after it collapsed. For some reason the margin was set to 0. So, to fixed the problem I did the following:</p>
<blockquote><p>Added in the the application CSS file. What this does is sets the width of the collapsed panel to 15px (or 17px in the case of IE), instead of 0.</p>
<p>.x-layout-collapsed{     <br />&#160;&#160;&#160; width:15px !important;      <br />} </p>
<p>.ext-ie .x-layout-collapsed{     <br />&#160;&#160;&#160; width:17px !important;      <br />}</p>
</blockquote>
<p>So, if you have a similar problem, check with <a href="http://getfirebug.com/" target="_blank">firebug</a> what is the width of the margin of the container i.e &lt;div&gt;. If it&#8217;s 0 then just overwrite the default CSS of Ext.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.gtothesquare.com/2009/10/22/extjs-how-to-fix-disappearing-button-in-collapsible-panels/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
