Problem with width column of checkboxgroup in manager.

2 Posts

i.andrew Reply #1, 12 years, 6 months ago

Hello.

Revo 2.2.13. New installation.
I'm create a one new TV -
Type - checkbox
Input values - Long long title 1==1||Long long title 2==2||Long long title 3==3||Long long title 4==4||Long long title 5==5
And then added it to Base template.

Open resource for editing, open template variables tab and then have a very small-width column (see in attach or here - http://yadi.sk/d/vCdxYiluKvev3)
How can i fix it? I don't find anything about this problem in google sad

I tryed add "fld.setSize('100%', 'auto');" to the end of checkbox.tpl in manager template like this:

Ext.get('tvdef{$tv->id}').dom.value = "{$cbdefaults}";
Ext.getCmp('modx-panel-resource').getForm().add(fld);
fld.setSize('100%', 'auto');
});
// ]]>
</script>

but this is don't help me.

20 Posts

Chris Reply #2, 12 years, 6 months ago

that is wired.

I can do it with the same config as you did it. An the checkbox does not wrap.

I use the newest firefox.

Which browser do you use?

Maybe you could also use form customization and move the TV field to the "document" page main-content-left

Webagentur www.cloudtec.ch

2 Posts

i.andrew Reply #3, 12 years, 6 months ago

>Which browser do you use?
Firefox and Google Chrome. Latest version...

>Maybe you could also use form customization and move the TV field to the "document" page main-content-left
No, fresh install. I add TV only.

This is html generated for tv (without title, only checkboxes):

            <input id="tvdef1" value="" type="hidden">
            <div id="tv1-cb"><div style="width: 99%;" class=" x-form-check-group x-column-layout-ct x-form-field" id="tv1"><div style="width: 73px;" id="ext-gen302" class="x-column-inner"><div style="width: 58px;" class=" x-column" id="ext-comp-1054"><div id="ext-gen305" class="x-form-item  x-hide-label" tabindex="-1"><label id="ext-gen306" for="tv1-0" style="width:100px;" class="x-form-item-label"></label><div class="x-form-element" id="x-form-el-tv1-0" style="padding-left:105px"><div style="width: 58px;" id="ext-gen307" class="x-form-check-wrap"><input value="1" class=" x-form-checkbox x-form-field" autocomplete="off" id="tv1-0" name="tv1[]" type="checkbox"><label id="ext-gen308" for="tv1-0" class="x-form-cb-label">Long long title 1</label></div></div><div class="x-form-clear-left"></div></div><div id="ext-gen309" class="x-form-item  x-hide-label" tabindex="-1"><label id="ext-gen310" for="tv1-1" style="width:100px;" class="x-form-item-label"></label><div class="x-form-element" id="x-form-el-tv1-1" style="padding-left:105px"><div style="width: 58px;" id="ext-gen311" class="x-form-check-wrap"><input value="2" class=" x-form-checkbox x-form-field" autocomplete="off" id="tv1-1" name="tv1[]" type="checkbox"><label id="ext-gen312" for="tv1-1" class="x-form-cb-label">Long long title 2</label></div></div><div class="x-form-clear-left"></div></div><div id="ext-gen313" class="x-form-item  x-hide-label" tabindex="-1"><label id="ext-gen314" for="tv1-2" style="width:100px;" class="x-form-item-label"></label><div class="x-form-element" id="x-form-el-tv1-2" style="padding-left:105px"><div style="width: 58px;" id="ext-gen315" class="x-form-check-wrap"><input value="3" class=" x-form-checkbox x-form-field" autocomplete="off" id="tv1-2" name="tv1[]" type="checkbox"><label id="ext-gen316" for="tv1-2" class="x-form-cb-label">Long long title 3</label></div></div><div class="x-form-clear-left"></div></div><div id="ext-gen317" class="x-form-item  x-hide-label" tabindex="-1"><label id="ext-gen318" for="tv1-3" style="width:100px;" class="x-form-item-label"></label><div class="x-form-element" id="x-form-el-tv1-3" style="padding-left:105px"><div style="width: 58px;" id="ext-gen319" class="x-form-check-wrap"><input value="4" class=" x-form-checkbox x-form-field" autocomplete="off" id="tv1-3" name="tv1[]" type="checkbox"><label id="ext-gen320" for="tv1-3" class="x-form-cb-label">Long long title 4</label></div></div><div class="x-form-clear-left"></div></div><div id="ext-gen321" class="x-form-item  x-hide-label" tabindex="-1"><label id="ext-gen322" for="tv1-4" style="width:100px;" class="x-form-item-label"></label><div class="x-form-element" id="x-form-el-tv1-4" style="padding-left:105px"><div style="width: 58px;" id="ext-gen323" class="x-form-check-wrap"><input value="5" class=" x-form-checkbox x-form-field" autocomplete="off" id="tv1-4" name="tv1[]" type="checkbox"><label id="ext-gen324" for="tv1-4" class="x-form-cb-label">Long long title 5</label></div></div><div class="x-form-clear-left"></div></div></div><div id="ext-gen303" class="x-clear"></div></div></div></div>

<script type="text/javascript">
// <![CDATA[

Ext.onReady(function() {
    var fld = MODx.load({
    
        xtype: 'checkboxgroup'
        ,id: 'tv1'
        ,vertical: true
        ,columns: 1        ,columns: 1
        ,renderTo: 'tv1-cb'
        ,name: 'tv-1'
        ,width: '99%'
        ,allowBlank: true        ,hideMode: 'offsets'
        ,msgTarget: 'under'

        ,items: [        {
            name: 'tv1[]'
            ,id: 'tv1-0'
            ,boxLabel: 'Long long title 1'
            ,checked: false            ,inputValue: 1
            ,value: 1
        },                {
            name: 'tv1[]'
            ,id: 'tv1-1'
            ,boxLabel: 'Long long title 2'
            ,checked: false            ,inputValue: 2
            ,value: 2
        },                {
            name: 'tv1[]'
            ,id: 'tv1-2'
            ,boxLabel: 'Long long title 3'
            ,checked: false            ,inputValue: 3
            ,value: 3
        },                {
            name: 'tv1[]'
            ,id: 'tv1-3'
            ,boxLabel: 'Long long title 4'
            ,checked: false            ,inputValue: 4
            ,value: 4
        },                {
            name: 'tv1[]'
            ,id: 'tv1-4'
            ,boxLabel: 'Long long title 5'
            ,checked: false            ,inputValue: 5
            ,value: 5
        }        ]
    });
        Ext.getCmp('tv1-0').on('check',MODx.fireResourceFormChange);
        Ext.getCmp('tv1-1').on('check',MODx.fireResourceFormChange);
        Ext.getCmp('tv1-2').on('check',MODx.fireResourceFormChange);
        Ext.getCmp('tv1-3').on('check',MODx.fireResourceFormChange);
        Ext.getCmp('tv1-4').on('check',MODx.fireResourceFormChange);
    
    Ext.get('tvdef1').dom.value = "";
    Ext.getCmp('modx-panel-resource').getForm().add(fld);
});
// ]]>
</script>

I can't find where width for div.x-inner-column has been calculated. I think problem in its width.

14 Posts

valkovdesign Reply #4, 12 years, 6 months ago

I have same problem. Installation is clean and using MODX 2.2.13. I still couldn't find soluton, tried with different browsers too. I've checked websites driven with previous MODX version i.e. 2.2.9 and columns are OK and checkboxes doesn't wrap. May there is some bug in latest version...

UPDATE: I've found temporary solution - the width of columns depends on width of TV "Caption Title" + "Description". If they are long enough to fill the whole width of the tab content field, then the columns render proportionally and have enough width to hold checkboxes without wrapping. [ed. note: valkovdesign last edited this post 12 years, 6 months ago.]

valkovdesign.com