As stated I’m attempting to nest a CJuiTab within another CJuiTab with two different styles. The actual nesting works properly, however the themes do not. What happens is that the inner tabset is inheriting the theme of the parent which is making the inner tabset extend beyond the borders of the outer tabset because they both have the same width value. The “narrow” theme for the inner tabset has a smaller width so that the inner tabset won’t overlap the outer tabset’s frame.
In the first file I call the tabset and render tabs using "renderPartial".
$this->widget('zii.widgets.jui.CJuiTabs', array(
'tabs'=>array(
'Projects'=>$this->renderPartial("partial/_projectList", array("form"=>$form, "model"=>$model), true),
),
// additional javascript options for the tabs plugin
'options'=>array(
'collapsible'=>true,
),
'htmlOptions'=>array(
'id'=>'companyTabs'
),
'themeUrl'=>Yii::app()->request->baseUrl.'/css/back/',
'theme'=>'normalTab',
'cssFile'=>'jquery-ui_normal.css',
));
$this->endWidget();
In the _projectList file I again call the CJuiTabs but specify a different theme.
$this->widget('zii.widgets.jui.CJuiTabs', array(
'tabs'=>array(
'Details'=>$this->renderPartial("partial/_project", array("form"=>$form, "model"=>$model), true),
),
// additional javascript options for the tabs plugin
'options'=>array(
'collapsible'=>true,
),
'htmlOptions'=>array(
'id'=>'projectTabs',
),
'themeUrl'=>Yii::app()->request->baseUrl.'/css/back/',
'theme'=>'narrowTab',
'cssFile'=>'jquery-ui_narrow.css',
));