how can i hide empty area if i has empty content of tab?
The empty area is the result of the default CSS that the Yii CTabView
uses. Specifically, this CSS from web/js/source/jquery.yiitab.js
in the Yii sources:
.yiiTab div.view
{
border-left: 1px solid #4F81BD;
border-right: 1px solid #4F81BD;
border-bottom: 1px solid #4F81BD;
padding: 8px;
margin: 0;
}
You can see this for yourself if you do not include any CSS at all, in which case the tabs will be displayed without any styles:
$this->widget('CTabView', array('tabs'=> $tabs, 'cssFile' => false));
The best solution would be to derive your own widget CustomTabView
from CTabView
, and override the renderBody
method like this:
protected function renderBody()
{
foreach($this->tabs as $id=>$tab)
{
$inactive=$id!==$this->activeTab?' style="display:none"' : '';
$empty = $this->isEmptyTab($tab) ? ' empty' : '';
echo "<div class=\"view{$empty}\" id=\"{$id}\"{$inactive}>\n";
if(isset($tab['content']))
echo $tab['content'];
else if(isset($tab['view']))
{
if(isset($tab['data']))
{
if(is_array($this->viewData))
$data=array_merge($this->viewData, $tab['data']);
else
$data=$tab['data'];
}
else
$data=$this->viewData;
$this->getController()->renderPartial($tab['view'], $data);
}
echo "</div><!-- {$id} -->\n";
}
}
Then you need an isEmptyTab
method. This one will work for tabs which have their content set manually by you. If that's not good enough, extend it as you require:
private function isTabEmpty($tab)
{
if(isset($tab['content']) && $tab['content'] == '')
{
return true;
}
return false;
}
Finally, you need some CSS to make your empty tabs appear differently, for example:
.yiiTab div.view.empty
{
border: none;
padding: 0;
margin: 0;
}