phpyii

yii CTabView empty content


enter image description here

how can i hide empty area if i has empty content of tab?


Solution

  • 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;
    }