[CLOSED] Radio group wraps labels

**Jurke** · Dec 19, 2008, 6:40 AM

Hi
The items in the radio group wraps the label in to 2 rows, and the second row is not showing. Can you fix so that does not happend? It happens in you example aswell

/Mikael

**Vladimir** · Dec 19, 2008, 6:44 AM

Hi Mikael,

This example was fixed yesterday.
The fix is simple. Just need add to Group the ItemCls property which contains css style name. In css style need define 'white-space:nowrap;'

Please update from SVN and see example

**geoffrey.mcgill** · Dec 20, 2008, 1:48 PM

Hi Mikael,

We added this css fix to the project. You do not need to separately add the extra css rule.*

Hope this helps.

**tnwheeler** · Oct 06, 2009, 6:08 PM

As an FYI, this seems to be broken again in V0.8.1 using IE8 and Webkit (Safari and Chrome) based browsers.

Regards,

**Vladimir** · Oct 07, 2009, 5:56 AM

Hi,

For me it works as expected
https://examples1.ext.net/#/Form/Groups/Basic/

Can you demonstrate your test case?

**tnwheeler** · Oct 07, 2009, 10:37 AM

I will see if I can extract an example from my page....

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/ASPNormal.master" AutoEventWireup="true"
    CodeFile="testpage.aspx.cs" Inherits="testpage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="cphHeaderContent" runat="Server">
    <style type="text/css">
        .autocomplete_completionListElement
        {
            visibility: hidden;
            margin: 0px !important;
            padding: 0px !important;
            background-color: inherit;
            color: windowtext;
            border: buttonshadow;
            border-width: 1px;
            border-style: solid;
            cursor: 'default';
            overflow: auto;
            height: auto;
            width: auto;
            text-align: left;
            list-style-type: none;
            list-style-image: none;
        }
        /* AutoComplete highlighted item */.autocomplete_highlightedListItem
        {
            padding: 0px 0px 0px 2px !important;
            background-color: #F1FAEA;
            color: black;
            list-style-type: none;
            list-style-image: none;
            margin: 0px !important;
        }
        /* AutoComplete item */.autocomplete_listItem
        {
            padding: 0px 0px 0px 2px !important;
            list-style-position: outside;
            margin: 0px !important;
            background-color: window;
            color: windowtext;
            list-style-type: none;
            list-style-image: none;
        }
        .EntryField
        {
            color: #1928B2;
        }
        .BlockItem
        {
            color: #0362A1;
            font-weight: normal;
            margin-right: 10px;
            vertical-align: top;
        }
        .BlockItemQuantity
        {
            color: #0362A1;
            font-weight: normal;
            margin-right: 10px;
        }
        .BlockItem span
        {
            vertical-align: top;
        }
        .LineItem
        {
            margin: 6px 0px 2px 10px;
        }
        .LineItem2
        {
            margin: 0px 0px 0px 10px;
        }
        .FormBlockText
        {
            margin-left: 10px;
        }
        .FieldLabel
        {
            color: #0362A1;
            font-size: 14px;
            margin: 8px 0 0 5px;
            font-weight: normal !important;
        }
        h3 + div.LineItem
        {
            margin-top: 0px;
            padding-top: 0px;
            margin-left: 12px;
        }
        fieldset
        {
            margin-right: 10px;
            margin-top: 5px;
            margin-bottom: 3px;
            padding-left: 4px;
            padding-right: 7px;
            padding-bottom: 3px;
        }
        .Anchored
        {
            float: left;
            clear: left;
        }
        .approvalLabel
        {
            color: #0362A1;
            font-weight: normal;
        }
        .approvalValue
        {
            color: #1928B2;
            font-weight: normal;
        }
        .Float
        {
            float: left;
            clear: none;
        }
        .FloatRight
        {
            float: right;
            clear: none;
        }
        fieldset legend
        {
            color: #0362A1;
            font-size: 130%;
            font-weight: bold;
        }
        fieldset fieldset legend
        {
            color: #0362A1;
            font-size: 110%;
            font-weight: bold;
        }
        div.row
        {
            clear: both;
            padding-left: 5px;
        }
        div.row span.label
        {
            color: #0362A1;
            float: left;
            text-align: right;
            font-weight: normal;
            padding-right: 2px;
        }
        div.row span.formw
        {
            float: right;
            text-align: left;
            padding-bottom: 5px;
            padding-right: 5px;
        }
        .label
        {
            color: #0362A1;
            text-align: right;
            font-weight: normal;
            padding-right: 2px;
        }
        .errorBlockBackground
        {
            background-color: #F0F9E8;
            border: 2px solid #024BA0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
            filter: alpha(opacity=50);
            opacity: .5;
            width: 350pt;
            height: 18pt;
        }
        .errorBlockText
        {
            font-size: 10pt;
            font-weight: bold;
            color: #FF0000;
            padding: 5px;
            width: 100%;
            height: 100%;
            position: inherit;
        }
        .debugErrorBlockBackground
        {
            background-color: #F0F9E8;
            border: 2px solid #CC3300;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
            filter: alpha(opacity=95);
            opacity: .95;
        }
        .debugErrorBlockText
        {
            font-size: 10pt;
            font-weight: bolder;
            padding: 5px;
            width: 100%;
        }
        .debugErrorBlockHeader
        {
            white-space: nowrap;
            font-size: 11pt;
            font-weight: bold;
            color: #FF0000;
            padding-bottom: 5px;
            width: 100%;
            text-align: center;
            vertical-align: top;
        }
        .debugErrorBlockFooter a
        {
            text-align: right;
        }
        .debugErrorBlockFooter
        {
            float: right;
            text-align: right;
            margin-right: 3px;
            margin-bottom: 3px;
        }
        .debugErrorBlockText li
        {
            padding-bottom: 0px;
            padding-left: 0px;
            padding-right: 5px;
            margin: 0px 0px 0px 0px;
        }
        .debugErrorBlockText ul
        {
            padding-bottom: 0px;
            margin-top: 0px;
            margin-bottom: 0px;
            margin-left: 15px;
            margin-right: 5px;
            padding-left: 0px;
        }
        .debugErrorBlockHeader span
        {
            text-align: center;
            vertical-align: top;
            width: 100%;
        }
        .errorText
        {
            color: #FF0000;
            font-weight: bolder;
            font-style: italic;
            font-size: smaller;
        }
        .FieldError
        {
            color: #FF0000 !important;
            font-weight: bold;
            margin: 8px 0 0 5px;
            display: block;
        }
        .ColorHeadBox /* extend this style */
        {
            text-align: center;
            margin: 2px;
        }
        .search-item
        {
            font: normal 11px tahoma, arial, helvetica, sans-serif;
            padding: 3px 10px 3px 10px;
            border: 1px solid #fff;
            border-bottom: 1px solid #eeeeee;
            white-space: normal;
            color: #555;
        }
        .search-item h3
        {
            display: block;
            font: inherit;
            font-weight: bold;
            color: #222;
        }
        .search-item h3 span
        {
            float: right;
            font-weight: normal;
            margin: 0 0 5px 5px;
            width: 100px;
            display: block;
            clear: none;
        }
        .x-form-text-readonly
        {
            border: none;
            background: none;
        }
        .x-table-layout-cell
        {
            background: none;
            vertical-align: top;
            text-align: left;
        }
        .x-table-layout-data-cell
        {
            background: none;
            vertical-align: middle;
            text-align: left;
            padding-right: 6px;
            padding-top: 3px;
        }
        .x-table-layout-title-cell
        {
            font-weight: normal;
            background: none;
            vertical-align: middle;
            text-align: right;
            color: #0362A1;
            padding-right: 6px;
            padding-top: 3px;
            height: 16px;
        }
        .x-table-layout-data-cell-sized
        {
            background: none;
            vertical-align: middle;
            padding-right: 6px;
            padding-top: 3px;
            text-align: left;
            width: 25%;
        }
        .x-table-layout-lists
        {
            font-weight: normal;
            background: none;
            vertical-align: bottom;
            text-align: left;
            color: #0362A1;
            padding-right: 6px;
            padding-top: 3px;
        }
        .x-table-layout-lists-label
        {
            font-weight: normal;
            background: none;
            vertical-align: bottom;
            text-align: right;
            color: #0362A1;
            padding-right: 6px;
            padding-top: 3px;
        }
        .x-table-layout-lists-data
        {
            background: none;
            vertical-align: bottom;
            text-align: left;
            padding-right: 6px;
            padding-top: 3px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cphSubNavSystem" runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cphTitle" runat="Server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="cphMainContent" runat="Server">
    <ext:ScriptContainer runat="server">

        <script type="text/javascript">
            var getSBNValue = function(thecombobox) {
                if (thecombobox.store.getCount() != '') {
                    return thecombobox.getValue();
                }
                else {
                    return '000000';
                }
            }

        </script>

    </ext:ScriptContainer>
    <ext:Panel ID="pnlTableLayout" runat="server" Border="false" BodyStyle="padding:15px;">
        <Body>
            <ext:Hidden ID="hidIgnoreImpression" runat="server" AutoDataBind="true" Text='<%# false %>' />
            <ext:TableLayout ID="tblMain" runat="server" Columns="3">
                <ext:Cell ColSpan="2">
                    <ext:Panel ID="pnlTrashStockDetails" runat="server" Border="false">
                        <Body>
                            <ext:TableLayout ID="tblTrashStockDetails" runat="server" Columns="3">
                                <ext:Cell>
                                    <ext:Panel ID="pnlFinalDisposition" runat="server" Border="false">
                                        <Body>
                                            <ext:FieldSet ID="fsetFinalDisposition" runat="server" AutoHeight="true" Title="Final Outcome:"
                                                Floating="true" Width="250">
                                                <Body>
                                                    <ext:RadioGroup ID="rblFinalDisposition" runat="server" Enabled='<%# CanUserChangeForm() %>'
                                                        Vertical="True" ColumnsNumber="1" >
                                                        <Items>
                                                            <ext:Radio runat="server" ID="rbtnDestroySBN" BoxLabel="Destroy entire SBN" Checked='<%# DataBinder.Eval(mainViewTrashStockRequest, "FinalOutcomeDestroySBN") %>'>
                                                                <AjaxEvents>
                                                                    <Check OnEvent="rblFinalDisposition_Changed" CleanRequest="true">
                                                                        <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="#{pnlTableLayout}"
                                                                            Msg="Switching disposition to: Destroy entire SBN..." />
                                                                    </Check>
                                                                </AjaxEvents>
                                                            </ext:Radio>
                                                            <ext:Radio runat="server" ID="rbtnDestroyPO" BoxLabel="Destroy only this PO" Checked='<%# DataBinder.Eval(mainViewTrashStockRequest, "FinalOutcomeDestroyPO") %>'>
                                                                <AjaxEvents>
                                                                    <Check OnEvent="rblFinalDisposition_Changed" CleanRequest="true">
                                                                        <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="#{pnlTableLayout}"
                                                                            Msg="Switching disposition to: Destroy PO only..." />
                                                                    </Check>
                                                                </AjaxEvents>
                                                                <Listeners>
                                                                    <%--                                                                    <Check Handler="if(#{hidIgnoreImpression}.getValue()=='False') { #{cbxImpression}.clearValue();  #{storeImpressionLookup}.reload(); };" />
--%>
                                                                </Listeners>
                                                            </ext:Radio>
                                                            <ext:Radio runat="server" ID="rbtnUnpackKit" BoxLabel="Unpack kit - salvage useable parts"
                                                                Checked='<%# DataBinder.Eval(mainViewTrashStockRequest, "FinalOutcomeUnpackKit") %>'>
                                                                <AjaxEvents>
                                                                    <Check OnEvent="rblFinalDisposition_Changed">
                                                                        <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="#{pnlTableLayout}"
                                                                            Msg="Switching disposition to: Unpack kit..." />
                                                                    </Check>
                                                                </AjaxEvents>
                                                            </ext:Radio>
                                                            <ext:Radio runat="server" ID="rbtnReduceStock" BoxLabel="Stock reduction" Checked='<%# DataBinder.Eval(mainViewTrashStockRequest, "FinalOutcomeReduceStock") %>'>
                                                                <AjaxEvents>
                                                                    <Check OnEvent="rblFinalDisposition_Changed">
                                                                        <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="#{pnlTableLayout}"
                                                                            Msg="Switching disposition to: Stock reduction..." />
                                                                    </Check>
                                                                </AjaxEvents>
                                                            </ext:Radio>
                                                        </Items>
                                                    </ext:RadioGroup>
                                                </Body>
                                            </ext:FieldSet>
                                        </Body>
                                    </ext:Panel>
                                </ext:Cell>
                            </ext:TableLayout>
                        </Body>
                    </ext:Panel>
                </ext:Cell>
                <ext:Cell>
                    <ext:Label ID="lblFillerStuff" runat="server" Text="stuff"></ext:Label>
                </ext:Cell>
            </ext:TableLayout>
        </Body>
    </ext:Panel>
</asp:Content>

and the code behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Coolite.Ext.Web;
using Coolite.Utilities;


public partial class testpage : System.Web.UI.Page
{

    /// <summary>
    /// Data object for the page.  It will be used to drive the interface. 
    /// Yes, I know it is a gobal construct go build a bridge and get over it -- I am.
    /// </summary>
    protected TrashStockRequest mainViewTrashStockRequest;

    protected void Page_Load(object sender, EventArgs e)
    {
                // if the root object is null try and load it from the session.
        if (this.mainViewTrashStockRequest == null)
        {
            this.mainViewTrashStockRequest = (TrashStockRequest)Session["TrashStockRequest"];
        }

        if ((!Page.IsPostBack &amp;&amp; !Page.IsAsync) || this.mainViewTrashStockRequest == null)
        {
            // The data object has not be initialized.  Lets try and take care of that.
            this.mainViewTrashStockRequest = new TrashStockRequest();

        }

    }

    //Can the user modify the data.
    protected Boolean CanUserChangeForm()
    {
        return !((TrashStockRequest)Session["TrashStockRequest"]).Started;
    }

    /// <summary>
    /// Processes the SelectedIndexChanged event for the radio button list: rblFinalDisposition
    /// </summary>
    /// <param name="sender">the control firing the event: rblFinalDisposition</param>
    /// <param name="e">argument stuff</param>
    protected void rblFinalDisposition_Changed(object sender, AjaxEventArgs e)
    {
        Radio tempRadio = (Radio)sender;
        if (tempRadio.Checked)
        {
            // get the "new" Final Outcome from the form

            this.mainViewTrashStockRequest = (TrashStockRequest)Session["TrashStockRequest"];

            this.mainViewTrashStockRequest.FinalOutcome = tempRadio.ID.Substring(4);

            // save the request to the ViewState and update the Form
            Session["TrashStockRequest"] = this.mainViewTrashStockRequest;

            // update the options on the form based on the selected Final Outcome 
            SetFinalOutcomeOptions();

        }

    }
    /// <summary>
    /// Make visual changes to the form based on the Final Outcome (what flavor of trashing is this?).
    /// </summary>
    /// <param name="finalOutcome">What flavor of Trash Stock Form is this?</param>
    private void SetFinalOutcomeOptions()
    {

        if (!this.mainViewTrashStockRequest.Started)
        {
            // If this request has not been started, reset it.
            //this.mainViewTrashStockRequest.ResetDate();

            switch (this.mainViewTrashStockRequest.FinalOutcome)
            {
                case "DestroySBN":
                    // Enable and disable stuff
                    break;

                case "DestroyPO":
                    // Enable and disable stuff
                    break;

                case "UnpackKit":
                    // Enable and disable stuff
                    break;

                case "ReduceStock":
                    // Enable and disable stuff
                    break;
                default:
                    break;
            }
        }

    }

}
[Serializable]
    public class TrashStockRequest
    {

        public Int32 RequestId { get; set; }
        private String finalOutcome { get; set; }
        public String FinalOutcome
        {
            get
            {
                return this.finalOutcome;
            }
            set
            {
                this.finalOutcome = value;
            }
        }
        public Boolean FinalOutcomeDestroySBN
        {
            get
            {
                return FinalOutcome == "DestroySBN";
            }

            set
            {
                if (value == true)
                {
                    FinalOutcome = "DestroySBN";
                }
            }
        }
        public Boolean FinalOutcomeDestroyPO
        {
            get
            {
                return FinalOutcome == "DestroyPO";
            }

            set
            {
                if (value == true)
                {
                    FinalOutcome = "DestroyPO";
                }
            }
        }
        public Boolean FinalOutcomeUnpackKit
        {
            get
            {
                return FinalOutcome == "UnpackKit";
            }
            set
            {
                if (value == true)
                {
                    FinalOutcome = "UnpackKit";
                }
            }
        }
        public Boolean FinalOutcomeReduceStock
        {
            get
            {
                return FinalOutcome == "ReduceStock";
            }
            set
            {
                if (value == true)
                {
                    FinalOutcome = "ReduceStock";
                }
            }
        }

        public DateTime StartDate { get; set; }
        public String StartedBy { get; set; }
        public Boolean Started
        {
            get
            {
                return ((this.StartedBy != String.Empty) &amp;&amp; (this.StartDate != DateTime.MinValue));
            }
        }
        public DateTime CreatedDate { get; private set; }
        public String Sbn { get; set; }
        private String impressionNumber { get; set; }
        public String ImpressionNumber
        {
            get
            {
                return this.impressionNumber;
            }
            set
            {
                Int32 tempValue;
                if (Int32.TryParse(value, out tempValue))
                {
                    this.impressionNumber = value;
                }
                else
                {
                    this.impressionNumber = "0";
                }
            }
        }
        // and about 30 more properties

        public TrashStockRequest()
        {
            SetDefaultValuesForNewRequest();
        }

        /// <summary>
        /// Set the default values for the new trash stock request.
        /// </summary>
        private void SetDefaultValuesForNewRequest()
        {
            if (this.RequestId <= 0 || this.RequestId != null)  // only run if this is a "new request".
            {
                this.RequestId = -1;  // This will need to be set as soon as possiable.
                this.CreatedDate = DateTime.Now;
                this.FinalOutcomeDestroySBN = true;

                // other stuff
            }
        }

    }

Sorry for the wall of code I tried to make sure the markup was a close to my situation as possible.

I hope this helps...

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="ProgId" content="Word.Document"><meta name="Generator" content="Microsoft Word 12"><meta name="Originator" content="Microsoft Word 12"><link rel="File-List" href="file:///C:%5CUsers%5CNATHAN%7E1%5CAppData%5CLocal%5CTemp%5 Cmsohtmlclip1%5C01%5Cclip_filelist.xml"><link rel="themeData" href="file:///C:%5CUsers%5CNATHAN%7E1%5CAppData%5CLocal%5CTemp%5 Cmsohtmlclip1%5C01%5Cclip_themedata.thmx"><link rel="colorSchemeMapping" href="file:///C:%5CUsers%5CNATHAN%7E1%5CAppData%5CLocal%5CTemp%5 Cmsohtmlclip1%5C01%5Cclip_colorschememapping.xml"> <style>

</style>T. Nathan Wheeler
Desktop Programmer, I.T.
Pensacola Christian College<br style="">
<br style="">

Thread: [CLOSED] Radio group wraps labels

Thread Tools

Search Thread

Display

[CLOSED] Radio group wraps labels

RE: [CLOSED] Radio group wraps labels

RE: [CLOSED] Radio group wraps labels

RE: [CLOSED] Radio group wraps labels

RE: [CLOSED] Radio group wraps labels

RE: [CLOSED] Radio group wraps labels

Similar Threads

[CLOSED] Composite Fields, Labels and Radio Buttons

Retrieve checked radio from Radio Group

[CLOSED] Radio/Check Group labels broken in IE8

[CLOSED] Dynamic Creation of Radio Buttons within Radio Group

Radio Group

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Radio group wraps labels

[CLOSED] Radio group wraps labels

RE: [CLOSED] Radio group wraps labels

RE: [CLOSED] Radio group wraps labels

RE: [CLOSED] Radio group wraps labels

RE: [CLOSED] Radio group wraps labels

RE: [CLOSED] Radio group wraps labels

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us