Howto create custom css for spesific panel without affect another panel header, i add headerCls to data-options to increase height and add tools button but not show my expected :
<!-- HTML -->
<div data-options="region:'south',split:true,collapsed:false,title:'Data',tools:'#toolPB',headerCls:'customCss'" style="height:200px;">
</div>
<!-- Tools -->
<div id="toolPB" style="padding:0px;">
<a id="btnPlay" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-pb_play'" onclick="M.pb_play('play');"></a>
<a id="btnPause" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-pb_pause'" onclick="M.pb_play('pause');"></a>
<a id="btnStop" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-pb_stop'" onclick="M.pb_play('stop');"></a>
<a id="btnSlow" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-stop'" onclick="M.change_speed('slow');"></a>
<a id="btnNormal" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-on'" onclick="M.change_speed('normal');"></a>
<a id="btnFast" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-red'" onclick="M.change_speed('fast');"></a>
</div>
//Custom Css
.customCss{
height: 18px;
background-color: #CCE6FF;
}
//easyui.css
.panel-icon,
.panel-tool {
position: absolute;
top: 50%;
margin-top: -8px;
height: 16px;
overflow: hidden;
}
howto override above css
Tks
Result
