Text in Data Grid ItemRenderer overlapping cells

Question

I have created a dataGrid itemRenderer and it is overlapping onto other cells. I've created several dataGrids and itemRenderers before and I've never had this happen so I'm a bit perplexed. My itemRenderer looks like this:
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                  xmlns:s="library://ns.adobe.com/flex/spark"
                                  xmlns:mx="library://ns.adobe.com/flex/mx"
                                  focusEnabled="true" height="25">
    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>
    <fx:Script>
        <![CDATA[
            [Bindable]
            private var showLock:Boolean = false;
            [Embed(source="/assets/images/icons/padlock.png")]
            [Bindable]
            public var padLock:Class;
             * If items have a testLabType then they are locked.
            override public function set data(value:Object):void{
                if(value != null){
                    super.data = value;
                    if(value.testLabType){
                        showLock = true;
        ]]>
    </fx:Script>
    <s:HGroup verticalAlign="middle" height="25">
        <s:BitmapImage source ="{padLock}" visible="{showLock}" width="16" height="17" smooth="true"/>
        <s:Label id="lblData" text="{listData.label}" styleName="normal11ptDroidSans" lineBreak="toFit"/>
    </s:HGroup>
</s:MXAdvancedDataGridItemRenderer>
I've also attached this image so you can see what I'm referring to:

Answer 1

I think you need to set the Hgroup and Label's width based on the main tag's
explicitWidth