[CLOSED] FieldContainer - alignment of child components

  1. #1

    [CLOSED] FieldContainer - alignment of child components

    Hello, support team,
    in the following example, I am not able to align the components in the FieldContainer to fit its owner. In this particular case, there is always a gap between the bottom border of the TextArea and its parent container.

    Various layout configurations are used to demonstrate the issue:

    @using Ext.Net;
    @using Ext.Net.MVC;
    
    @{
        ViewBag.Title = "Field container";
        Layout = null;
    
        var X = Html.X();
        var N = Html.N();
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <title>Ext.NET MVC Test Case</title>
    </head>
    
    <body>
        @X.ResourceManager()
    
        @(X.Container().LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.Stretch }).Width(800).Height(100).Margin(10)
            .Items(
                X.FieldContainer().Layout(LayoutType.Anchor).Flex(1)
                    .Items(
                        X.Toolbar(),
                        X.TextArea().AnchorVertical("100%").AnchorHorizontal("100%")
                    ),
                X.TreePanel().Title("Macros").Width(300).MinWidth(150).MaxWidth(400).Collapsible(true).CollapseDirection(Direction.Right).Split(true)
            )
        )
    
        @(X.Container().LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.Stretch }).Width(800).Height(100).Margin(10)
            .Items(
                X.FieldContainer().LayoutConfig(new VBoxLayoutConfig { Align = VBoxAlign.Stretch }).Flex(1)
                    .Items(
                        X.Toolbar(),
                        X.TextArea().Flex(1)
                    ),
                X.TreePanel().Title("Macros").Width(300).MinWidth(150).MaxWidth(400).Collapsible(true).CollapseDirection(Direction.Right).Split(true)
            )
        )
    
        @(X.Container().Layout(LayoutType.HBox).Width(800).Height(100).Margin(10)
            .Items(
                X.FieldContainer().LayoutConfig(new VBoxLayoutConfig { Align = VBoxAlign.Stretch }).Flex(1).HeightSpec("100%")
                    .Items(
                        X.Toolbar(),
                        X.TextArea().Flex(1)
                    ),
                X.TreePanel().Title("Macros").HeightSpec("100%").Width(300).MinWidth(150).MaxWidth(400).Collapsible(true).CollapseDirection(Direction.Right).Split(true)
            )
        )
    
        @(X.Container().Layout(LayoutType.Border).Width(800).Height(100).Margin(10)
            .Items(
                X.FieldContainer().LayoutConfig(new VBoxLayoutConfig { Align = VBoxAlign.Stretch }).Region(Region.Center)
                    .Items(
                        X.Toolbar(),
                        X.TextArea().Flex(1)
                    ),
                X.TreePanel().Title("Macros").Region(Region.East).Width(300).MinWidth(150).MaxWidth(400).Collapsible(true).CollapseDirection(Direction.Right).Split(true)
            )
        )
    </body>
    </html>
    How to make the bottom edge of a TextArea aligned just like a TreePanel?

    Thank you.

    Kind regards
    Dan
    Last edited by fabricio.murta; Mar 10, 2021 at 9:52 PM.
  2. #2
    Hello, Dan!

    What about: X.Container().Flex(1).Layout(LayoutType.Fit).Items(X.TextArea())?

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi FabrÃ*cio,
    thank you for your hint. An interesting solution. At first glance, wrapping TextArea into another container seemed excessive (over nested), but it works.

    Thanks for your assistance, the thread can be closed.

    Kind regards
    Dan
  4. #4
    Hello Dan!

    I agree with your point, it seems there's some CSS styling issues with form fields that keeps them from nicely growing up all the size. The Fit layout though goes out of its way to make whatever is within it to fit all its area so, given panels worked the way you needed, their parent, Container, would be the lightest alternative to employ the Fit layout to ensure the dimensions are stretched all the way.

    There is probably another couple combinations of layouts that attain the result you wanted; this was just the one I could find that looked the simplest in terms of markup code.

    Thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] FieldContainer and Validation
    By adrianot in forum 3.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 01, 2016, 10:10 AM
  2. [CLOSED] FieldContainer
    By Z in forum 3.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 21, 2015, 1:30 PM
  3. [CLOSED] FieldContainer hideLabel
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: May 06, 2014, 12:06 PM
  4. Replies: 5
    Last Post: Feb 10, 2014, 3:16 AM
  5. [CLOSED] TableLayout not resizing child components
    By jchau in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 25, 2012, 1:09 AM

Tags for this Thread

Posting Permissions