UI spacing issues

[gordon-matt]

Hi there,

I am trying to create an extension and for the most part I've worked out how to use the layout controls.. but I am stuck when trying to use a file selector.. the UI doesn't look right and I can't work out how to fix it. Here's a screenshot:

Here's the code:

internal sealed class MyExtension : IGuiTool
{
    private object model = null;
    private bool hasHeaderRow = true;

    private IUISwitch switchHasHeaderRow = Switch();
    private IUISingleLineTextInput txtDelimiter = SingleLineTextInput();
    private IUIDropDownButton ddbLanguage = DropDownButton();

    private IUIInfoBar infoBar = InfoBar();
    private IUIFileSelector fileSelector = FileSelector();
    private IUIMultiLineTextInput txtModel = MultiLineTextInput();
    private IUIMultiLineTextInput txtOutput = MultiLineTextInput();
    private IUIMultiLineTextInput txtTemplate = MultiLineTextInput();

    public MyExtension()
    {
        ddbLanguage
            .AlignHorizontally(UIHorizontalAlignment.Left)
            .Icon("FluentSystemIcons", '\uEE93')
            .WithMenuItems(
                UIHelper.GetMenuItems(txtTemplate, txtOutput));
    }

    private enum ColumnId : byte
    {
        Left = 0,
        Right = 1
    }

    private enum RowId : byte
    {
        Alert = 0,
        Content = 1,
        Output = 2
    }

    public UIToolView View => new
    (
        isScrollable: true,
        Grid()
            .ColumnMediumSpacing()
            .RowLargeSpacing()

            // Define rows: toolbar, middle content, bottom content
            .Rows(
                (RowId.Alert, UIGridLength.Auto), // Alert row
                (RowId.Content, new UIGridLength(1, UIGridUnitType.Fraction)), // Main content
                (RowId.Output, new UIGridLength(1, UIGridUnitType.Fraction)))  // Output area

            // Two equal columns
            .Columns(
                (ColumnId.Left, new UIGridLength(1, UIGridUnitType.Fraction)),
                (ColumnId.Right, new UIGridLength(1, UIGridUnitType.Fraction)))

            .Cells(
                // Alerts spanning both columns
                Cell(
                    RowId.Alert, RowId.Alert,
                    ColumnId.Left, ColumnId.Right,
                    Stack()
                        .Vertical()
                        .WithChildren(
                            infoBar
                                .Title("Error")
                                .Description("Something went wrong.")
                                .Error()
                                .Close()
                        )
                ),

                // File input + options (left column)
                Cell(
                    RowId.Content, RowId.Content,
                    ColumnId.Left, ColumnId.Left,

                    Stack()
                        .Vertical()
                        .WithChildren(
                            fileSelector
                                .CanSelectOneFile()
                                .LimitFileTypesTo(".csv", ".txt", ".tsv", ".tab")
                                .OnFilesSelected(async x => await OnFileSelected(x)),

                            Setting()
                                .Title("Has Header Row")
                                .Description("Are there column headers in the file?")
                                .InteractiveElement(
                                    switchHasHeaderRow
                                        .On()
                                        .OnText("Yes")
                                        .OffText("No")
                                        .OnToggle((isOn) =>
                                        {
                                            hasHeaderRow = isOn;
                                            return ValueTask.CompletedTask;
                                        })
                                ),

                            Setting()
                                .Title("Delimiter")
                                .Description("Specify the delimiter used in the file.")
                                .InteractiveElement(
                                    txtDelimiter
                                        .Text(",")
                                        .HideCommandBar()
                                )

                        )
                ),

                // Model (right column)
                Cell(
                    RowId.Content, RowId.Content,
                    ColumnId.Right, ColumnId.Right,
                    txtModel
                        .Title("Model")
                        .Language("liquid")
                        .ReadOnly()
                        .AlwaysWrap()),

                // Template (left column, bottom row)
                Cell(
                    RowId.Output, RowId.Output,
                    ColumnId.Left, ColumnId.Left,
                    txtTemplate
                        .Title("Template")
                        .Text("")
                        .Extendable()
                        .CommandBarExtraContent(
                            Stack()
                                .Horizontal()
                                .WithChildren(
                                    ddbLanguage,
                                    Button()
                                    .Icon("FluentSystemIcons", '\uEE3A')
                                    .Text("Generate")
                                    .AccentAppearance()
                                    .OnClick(Generate_Click)
                                )
                        )
                ),

                // Output (right column, bottom row)
                Cell(
                    RowId.Output, RowId.Output,
                    ColumnId.Right, ColumnId.Right,
                    txtOutput
                        .Title("Output")
                        .Extendable()
                        .ReadOnly())
            ));

    public void OnDataReceived(string dataTypeName, object? parsedData)
    {
        // Handle Smart Detection.
    }

    private async Task OnFileSelected(SandboxedFileReader[] files)
    {
    }

    private void Generate_Click()
    {
    }
}

How can I shift the file selector down to align with the top of the multi line textbox on the right? Is there some kind of padding/margin I can add?

[gordon-matt]

Okay so I found a hacky way to do what I wanted.... :

And voila!

Not ideal... but not half bad either

[gordon-matt]

If anyone has a better / less hacky solution, please do let me know