I am currently utilizing the treepanel object in ExtJs and I am trying to implement two divs side by side within the treepanel items. Is it feasible to have one of them set with a fluid width and the other with an auto width? Despite my HTML and CSS codes functioning correctly on their own, they do not seem to work when embedded within the treepanel item's text property. Where could I be going wrong?
Below is a snippet of my Extjs Code:
{
xtype: 'treepanel',
cls: 'wikiTreePanel',
root: {
text:
'<div class="treeItemTitleWrapper">'+
'<div class="countSide"><span>12</span></div>'+
'<div class="titleSide">Main Wiki Title Main Wiki Title Main Wiki Title</div>'+
'</div>',
expanded: true,
}}
Here is the HTML and CSS code I have been working with:
.treeItemTitleWrapper{
display: inline-block;
width: 100%;
height: 26px;
overflow: hidden;
}
.treeItemTitleWrapper .titleSide{
background: orange;
line-height: 26px;
height: 26px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.treeItemTitleWrapper .countSide{
float: right;
height: 26px;
background: pink;
} <div class="treeItemTitleWrapper">
<div class="countSide"><span>12121212</span></div>
<div class="titleSide">Main Wiki Title Main Wiki Title Main Wiki Title Main Wiki Title Main Wiki Title Main Wiki Title Main Wiki Title Main Wiki Title Main Wiki Title</div>
</div>https://i.sstatic.net/RNdrb.png
If you have any insights on how I can rectify this issue, I greatly appreciate your assistance.