[RESOLVED] HTML Layout Question but using DevExpress Blazor Components

[MMock]

Hi. I believe this is an HTML question. I am writing my first web app and learning. I can ask DevExpress questions about their components but I'm trying not to ask them questions that are *not* specific to their components (HTML). This one I am not 100% sure but I'll start here.

On my webpage I have tabpages. On one of the tab pages I have a grid; it can have n number of rows. It only has a few columns and there's space to the right of it where I want to display a caption and a box on one line and another caption/box pair directly underneath the first. But because of the grid, the code I wrote is putting the 2nd caption/box underneath the grid. Because I believe the grid and the 1st caption/box are in one row (albeit a very tall one) and the 2nd caption/box begins a new row.

I tried playing around with <nobr> but did not get what I am aiming for. In this code I am posting, it actually put both boxes under the grid. Other things I tried put the first box next to the grid and the second box under the grid. I can't get both boxes next to the grid.

<DxFormLayout>
    <DxFormLayoutItem ColSpanMd="10">
        <DxTabs @bind-ActiveTabIndex="@ActiveTabIndex">

            <DxTabPage Text="Sites" >

                <DxFormLayout Data="@allSystemsData">
                    <nobr>

                    <DxFormLayoutItem Context="gridCtx" ColSpanMd="8">
                        <DxGrid Data="@sites" PageSize="25" 
                            CssClass="mw-1100">
                        <Columns>
                            <DxGridDataColumn Caption="Site Name" FieldName="Sitename" Width="200px" />
                            <DxGridDataColumn Caption="Address" FieldName="Address1" Width="200px" />
                            <DxGridDataColumn Caption="Town" FieldName="City" />
                        </Columns>
                        </DxGrid>
                    </DxFormLayoutItem>

                    <DxFormLayoutItem Context="siteReferenceCtx" Field="@nameof(CustomerSystem.SitesType)" Caption="Site Reference:" ColSpanMd="2" ReadOnly=true />
                    <DxFormLayoutItem Context="ctxControlMethod" Field="@nameof(CustomerSystem.ControlMethod)" Caption="Control Method" ColSpanMd="2" ReadOnly=true />

                    </nobr>
                </DxFormLayout>

            </DxTabPage>

        </DxTabs>
    </DxFormLayoutItem>
</DxFormLayout>

Even if you don't know DX, maybe you can advise me how to lay this out. Thank you.

[MMock]

Update: I removed the <nobr> tag and it is laying everything out in one row which looks nice. So if I can't have the Site Reference and Control Method stacked, I'll live with all in a row.

[dday9]

I have not used DevExpress but typically in web development you'd use FlexBox or Grid CSS styling to format your page.

Take a look at this example: https://jsfiddle.net/rweoqy45/

And here is a FlexBox sandbox that allows you to change flex properties on the fly and see what they do: https://flexbox.tech/

[MMock]

Thank you, I will take a look at those links.
I also realized - I am taking our windows application and rewriting some of the forms to run on the web. Just because in the windows application I have a grid with some textboxes adjacent doesn't mean that's how it needs to be layed out on the web. If people are running it on their phones, they would probably rather scroll down than right. I'll see what happens to layout requirements when we start using tablets.

[dday9]

I also realized - I am taking our windows application and rewriting some of the forms to run on the web. Just because in the windows application I have a grid with some textboxes adjacent doesn't mean that's how it needs to be layed out on the web. If people are running it on their phones, they would probably rather scroll down than right.

You're absolutely correct, typically you will want the content to grow vertically rather than horizontally. You can use CSS media queries to setup breakpoints so CSS executes one way for one viewpoint and another way for a different viewpoint.

I'd recommend looking at how Bootstrap sets up their breakpoints: https://getbootstrap.com/docs/5.3/layout/breakpoints/