You found a bug! We've classified it as EXTJS-10084 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Mar 2013
    Location
    Toronto, Canada
    Posts
    84
    Vote Rating
    6
    Baidaly is on a distinguished road

      0  

    Default Long text in Radio button's boxLabel appears on the next line

    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.2.1.883


    Browser versions tested against:
    • Chrome 27.0.1410.64 m
    • FF21.0


    Description:
    • Long text in Radio button's boxLabel appears on the next line.


    Steps to reproduce the problem:
    • Create radio group with radiofields with long text in boxLabel


    The result that was expected:
    • boxLabel text appears on the same line


    The result that occurs instead:
    • boxLabel text appears on the next line


    Test Case:

    Code:
    Ext.onReady(function () {
                Ext.create("Ext.container.Viewport", {
                    "renderTo": Ext.getBody(),
                    "items": [{
                            "xtype": "form",
                            "items": [{
                                    "xtype": "radiogroup",
                                    "items": [{
                                            "xtype": "radiofield",
                                            "name": "Group_1",
                                            "boxLabel": "This is some long text that is very very very very very very very very very very very very very very very very very very very very very very very very very very long"
                                        }, {
                                            "xtype": "radiofield",
                                            "name": "Group_1",
                                            "boxLabel": "This is some long text that is very very very very very very very very very very very very very very very very very very very very very very very very very very long"
                                        }, {
                                            "xtype": "radiofield",
                                            "name": "Group_1",
                                            "boxLabel": "This is some long text that is very very very very very very very very very very very very very very very very very very very very very very very very very very long"
                                        }
                                    ],
                                    "columns": 3
                                }
                            ]
                        }
                    ],
                    "layout": {
                        "type": "fit"
                    }
                });
            });

    HELPFUL INFORMATION

    Screenshot:
    1.jpg

    Possible fix:
    Adding the following CSS solves the problem:

    Code:
    .x-form-cb-label-after {
        display: inline !important;
    }
    Additional CSS used:
    • only default ext-all.css


    Operating System:
    • Win7 Pro
    Daulet Urazalinov

    Twitter | LinkedIn

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,138
    Vote Rating
    242
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Ext JS Premium Member devtig's Avatar
    Join Date
    Jan 2010
    Location
    Rotterdam, The Netherlands
    Posts
    418
    Vote Rating
    14
    devtig will become famous soon enough

      0  

    Default

    They fixed it somewhere along the way. Anyway. I just checked Ext 6 and compared it to 4.2.1. You can use this css patch to fixt it for 4.2.1:

    Code:
        .x-form-cb-label-after {
            display: inline-block;
            padding-left: 17px;
            margin: 4px 0 0 0;
        }
        .x-form-cb {
            margin-top: 5px;
            position: absolute;
        }
    Christiaan Westerbeek @ Devotis
    Contact me for help with Ext JS, Node JS, FireBase, AngularJS and Javascript in general. Email me or find me at AirPair to connect.

Thread Participants: 2

Tags for this Thread