Results 1 to 3 of 3

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

    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
    86
    Vote Rating
    6
      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,154
    Vote Rating
    247
      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
    419
    Vote Rating
    14
      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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •