What's New?

[CLOSED] FieldSet layout

  1. #1
    Oct 28, 2020, 11:54 AM

    [CLOSED] FieldSet layout

    Hello support team,
    I'm struggling to arrange the two fieldsets correctly. The intention is to create a layout where all components are aligned to the window when resized (are resized along with window):

    @using Ext.Net;
@using Ext.Net.MVC;

@{
    ViewBag.Title = "FieldSet Layout";
    Layout = null;

    var X = Html.X();
}

<!DOCTYPE html>

<html>
<head>
    <title>Ext.NET MVC Test Case</title>
</head>

<body>
    @(X.ResourceManager())

    @X.DisplayField().ID("version").ReadOnly(true).Margin(10).Width(200)

    @(X.Window().Width(700).Height(400).Layout(LayoutType.Fit)
        .Items(
            X.FormPanel()
                .BodyPadding(10)
                .LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.Stretch })
                .Items(
                    X.FieldSet().Title("Account").Flex(1).WidthSpec("100%").Margin(0)
                        .FieldDefaults(f => f.LabelWidth = 130)
                        .Items(
                            X.TextField().WidthSpec("100%"),
                            X.Checkbox()
                        ),
                    X.FieldSet().Title("Departments").Flex(1).WidthSpec("100%").MarginSpec("0 0 0 20")
                        .Layout(LayoutType.VBox)
                        .Items(
                            X.Checkbox().HideLabel(true).BoxLabel("Book to all departments"),
                            X.Container().HeightSpec("100%").WidthSpec("100%")
                                .LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.Stretch })
                                .Items(
                                    X.GridPanel().Title("Allowed").Flex(1),
                                    X.GridPanel().Title("Available").Flex(1).MarginSpec("0 0 0 10")
                                )
                        )
                )
        )
    )

</body>
</html>

<script type="text/javascript">
    Ext.onReady(function () {
        Ext.getCmp("version").setValue("Ext JS " + Ext.getVersion().version + " / " + "Ext.NET " + Ext.net.Version);
    });
</script>
    My problem is that I am not able to align the bottom of the grid panels with the fieldset border and part of them goes out of the outline. Please can you help me with that?

    Tested on Ext JS 7.1.0.46 / Ext.NET 5.1.0 and Chrome.

    Thank you.

    Kind regards
    Dan
    Last edited by fabricio.murta; Oct 29, 2020 at 10:40 PM.
  2. #2
    Oct 28, 2020, 8:06 PM
    Hello, Dan!

    Try to drop the .WidthSpec("100%") and favor the Flex setting. If they don't "flex" the dimension you need with the layout you're using, try then the Anchor Layout to nicely fit everything therein.

    You may also want to consider checking the inner containers (panels, grid panels, and so on) for their minHeight (and minWidth) setting for if the overall content space is smaller than that, clipping might occur.

    Hope this helps! Let us know if these directions didn't help and we'll draw the answer as the reviewed test case you provided.
    Last edited by geoffrey.mcgill; Oct 28, 2020 at 8:58 PM.
  3. #3
    Oct 28, 2020, 8:40 PM
    Hello FabrÃ*cio,
    thank you for your answer. I have already tried a lot of different combinations without success. Also with anchor layout:

        @(X.Window().Width(700).Height(400).Layout(LayoutType.Fit)
        .Items(
            X.FormPanel()
                .BodyPadding(10)
                .LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.Stretch })
                .Items(
                    X.FieldSet().Title("Account").Flex(1).WidthSpec("100%").Margin(0)
                        .Items(
                            X.TextField().WidthSpec("100%"),
                            X.Checkbox()
                        ),
                    X.FieldSet().Title("Departments").Flex(1).WidthSpec("100%").MarginSpec("0 0 0 20")
                        .Layout(LayoutType.Anchor)
                        .Items(
                            X.Checkbox().HideLabel(true).BoxLabel("Book to all departments"),
                            X.Container().Anchor("100% 100%")
                                .LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.Stretch })
                                .Items(
                                    X.GridPanel().Title("Allowed").Flex(1),
                                    X.GridPanel().Title("Available").Flex(1).MarginSpec("0 0 0 10")
                                )
                        )
                )
        )
    )
    The problem is caused by the "Book to all departments" checkbox. Without that component, it works as expected. I'm pretty sure the solution will be quite simple, but somehow I'm lost in all the possible settings and I can't figure out the right layout. Your help will be highly appreciated.

    Thank you.

    Kind regards
    Dan
  4. #4
    Oct 29, 2020, 8:55 PM
    Hello Dan!

    It was pretty tricky to get how exactly the panel was being clipped out of the fieldset without giving it .Border(true).

    As a general rule of thumb, when you nest containers and they don't behave right, you can add a temporary .StyleSpec("border: 1px solid red") (or any other color) to highlight the container's limits.

    In your case, the problem was not with the grid panels, but with their surrounding container. .HeightSpec("100%") means 100% of the surrouding body container (fieldset's viewable area in that case). You add something that takes 15% height, then the second at 100% will have its bottom at 115% of the limit.

    Again, avoid using .WidthSpec() or .HeightSpec(), they may work if only one component in the container, but are going to break in several situations Ext.NET has mechanisms to "make the math for you" to fit everything on screen.

    The nesting of VBox and HBox containers with its Align = Stretch setting plus Flex is the right way to do it. In fact you were right on with the inner container and just missed applying the same technique to the outer fieldset.

    Getting rid of any %-based width and heights and relying solely in Ext.NET layout system, this is how your page should look like. I added default theme borders to the grid panels (well, panels actually as there's no grid at all), and a "red thin border" to the wrapping container.

    You may want to see how the container border's bottom side is hid in your original test case by just adding the border styling to the container.

    Then setting the height to "80%" will reveal the border. That would still not do, as the checkbox height, as fixed, may mean 5% to a tall window, and 35% to a short one.

    @(X.Window().Width(700).Height(400).Layout(LayoutType.Fit)
    .Items(
        X.FormPanel()
            .BodyPadding(10)
            .LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.Stretch })
            .Items(
                X.FieldSet().Title("Account").Flex(1).Margin(0)
                    .FieldDefaults(f => f.LabelWidth = 130)
                    .Items(
                        X.TextField(),
                        X.Checkbox()
                    ),
                X.FieldSet().Title("Departments").Flex(1).MarginSpec("0 0 0 20")
                    .LayoutConfig(new VBoxLayoutConfig { Align = VBoxAlign.Stretch })
                    .Items(
                        X.Checkbox().HideLabel(true).BoxLabel("Book to all departments"),
                        X.Container()
                            .StyleSpec("border:1px solid red").Flex(1)
                            .LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.Stretch })
                            .Items(
                                X.GridPanel().Border(true).Title("Allowed").Flex(1),
                                X.GridPanel().Border(true).Title("Available").Flex(1).MarginSpec("0 0 0 10")
                            )
                    )
            )
    )
)
    I left the MarginSpec() in the second inner grid just because it does not change anything at all, you may want to remove that setting, it only matters for what's inside the grid and won't affect the test case.

    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
  5. #5
    Oct 29, 2020, 10:34 PM
    Hi FabrÃ*cio,
    thank you for the explanation and the fixed test case. I apologize for a "newbie" question, but after a while of trying different variants, I no longer knew where to go.

    Thank you for your help, the ticket can be closed.

    Kind regards
    Dan
  6. #6
    Oct 29, 2020, 10:40 PM
    Thanks for the feedback, and glad it helped!
    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. [CLOSED] [1.3] Fieldset layout
    By softmachine2011 in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 07, 2012, 2:36 PM
  2. [CLOSED] checkbox layout mess in FieldSet
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 19, 2011, 12:41 PM
  3. HtmlEditor with label in fieldset layout bug
    By PetrSnobelt in forum 1.x Help
    Replies: 2
    Last Post: Jun 24, 2011, 10:50 AM
  4. Broken layout: Spinner in fieldset
    By PetrSnobelt in forum 1.x Help
    Replies: 1
    Last Post: Jun 13, 2011, 4:30 PM
  5. [CLOSED] Layout problem with fieldset
    By skyone in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 23, 2010, 2:31 PM

Posting Permissions