What's New?

[CLOSED] Label width in form-layout

  1. #1
    Aug 31, 2016, 4:07 PM

    [CLOSED] Label width in form-layout

    Is there a way to force a Label to use all the available width, without setting a static width?

    @{ 
    var x = Html.X();    
}

@(
    x.Panel()
        .Width(300)
        .Layout(LayoutType.Form)
        .Items(
            x.Label()
                .Text("This is a label")
            ,
            x.TextField()
                .FieldLabel("Text")
        )    

)
    Last edited by fabricio.murta; Oct 10, 2016 at 8:59 PM.
  2. #2
    Sep 01, 2016, 1:44 AM
    Good night
    Last edited by sveins12; Sep 01, 2016 at 3:55 AM.
  3. #3
    Sep 01, 2016, 5:08 AM
    Hello @sveins12!

    The form layout is very limited in functionality and it serves the simple cases with just fields with labels one after another. If you need to fancy your window any little, you'd better going with the other various layouts and their combinations. Your example seems to work fair enough with the LayoutType.VBox.

    For example, suppose you got several fields, the following would be a way to use LayoutType.Form:

    @{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>c61399_LabelWidth100pct</title>
</head>
<body>
    <div>
        @Html.X().ResourceManager()

        @{
            var x = Html.X();
        }

        @(
            x.Panel()
                .Width(300)
                .Layout(LayoutType.VBox)
                .Items(
                    x.Label()
                        .Text("This is a label"),
                    x.Container()
                        .Layout(LayoutType.Form)
                        .Items(
                            x.TextField()
                                .FieldLabel("Text")
                                .LabelWidth(40),
                            x.TextField()
                                .FieldLabel("Text 1")
                                .LabelWidth(40)
                        )
                )
        )
    </div>
</body>
</html>
    Notice there, the form layout only encloses ordinary fields. Want anything fancy with the fields, run away from LayoutType.Form.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  4. #4
    Sep 02, 2016, 6:03 PM
    But if using a VBox layout, how can we then make the fields take up all the horizontal width? The reason I use Form-layout is that the fields are automatically sized.
  5. #5
    Sep 02, 2016, 7:22 PM
    Hello @sveins12!

    Try these two thing in my example above, one after another:

    1. Add a .StyleSpec("border: 1px solid black") to the container defined at line 27.

    Load the example, you'll see the container's border will be the thing making the fields short.

    2. Add then .widthSpec("100%") to the container. See now the borders gets to the end of the outer panel (defined on line 21). The fields will then fit to it just nicely.

    Then you can go ahead and make the container fit seamlessly to your form giving it 0 padding and margins, removing the "custom" border as well (added in step 1 above), and maybe adjusting its padding/margins to make it line up nicely to the reamining content of the whole form.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  6. #6
    Sep 02, 2016, 8:33 PM
    Yes, but in this case there is a container with Form-layout involved. If not using that container, the text-fields will not be aligned, I think.
  7. #7
    Sep 02, 2016, 8:47 PM
    Well, that was the idea, to work in the scenario depicted by the provided example.

    Different examples, different approaches. If not using the container with 100% width spec, you probably need to pass the 100% widthspec to the fields.
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  8. #8
    Sep 02, 2016, 11:11 PM
    OK.

    Is there a way to tell the VBox to automatically stretch all components?

    @{
    var x = Html.X();    
}

@(
    x.Panel()
        .Width(500)
        .Layout(LayoutType.VBox)
        .BodyStyle("background-color:#cccc00;") // dark-Yellow body
        .Items(
            x.FieldContainer()
                .FieldLabel("Label")
                .Items(
                    x.Label()
                        .Text("This is a label")
                )
            ,
            x.TextField()
                .FieldLabel("With widspec")
                .WidthSpec("100%") // could this be done on container-level?
           ,
            x.TextField()
                .FieldLabel("Without")
        )    
)
    Last edited by sveins12; Sep 02, 2016 at 11:16 PM.
  9. #9
    Sep 04, 2016, 12:31 AM
    Hello @sveins12!

    There are at least two ways to do so:

    1. .LayoutConfig(new VBoxLayoutConfig() { Align=VBoxAlign.Stretch })
    2. .Defaults(new Parameter() { Name="width", Value="100%" })

    Either of them to your top panel (or Container or FormPanel, no matter). So, pick your choice! :)
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  10. #10
    Sep 17, 2016, 12:34 AM
    Hello @sveins12!

    There's been at least a week days since we last heard of you regarding this issue. Did the answer above help at all? Do you still need assistance with this issue?

    If we don't hear back from you in another week we'll me assuming you are good with this and making as closed. Anyway, anytime you are able or feel like discussing this, just post a follow up and we'll get to it.
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter

Similar Threads

  1. TextField Width property includes Label Width now?
    By Hlodvig in forum 2.x Help
    Replies: 1
    Last Post: Aug 21, 2013, 5:47 PM
  2. [CLOSED] Give specific height of div with x-form-item x-form-label-left classes but only when child inside is a textarea.
    By ViDom in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 24, 2012, 2:27 PM
  3. [CLOSED] Label width ignored on NumberField
    By machinableed in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 28, 2012, 5:05 AM
  4. label width
    By bilgecooliteforum in forum 1.x Help
    Replies: 1
    Last Post: May 13, 2010, 11:58 AM
  5. Multifield label width
    By Wtower in forum 1.x Help
    Replies: 2
    Last Post: Aug 10, 2009, 1:37 PM

Posting Permissions