Results 1 to 5 of 5

Thread: [RESOLVED] HTML Layout Question but using DevExpress Blazor Components

  1. #1

    Thread Starter
    PowerPoster MMock's Avatar
    Join Date
    Apr 2007
    Location
    Driving a 2018 Mustang GT down Route 8
    Posts
    4,484

    Resolved [RESOLVED] HTML Layout Question but using DevExpress Blazor Components

    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.

    Code:
    <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.
    There are 10 kinds of people in this world. Those who understand binary, and those who don't.

  2. #2

    Thread Starter
    PowerPoster MMock's Avatar
    Join Date
    Apr 2007
    Location
    Driving a 2018 Mustang GT down Route 8
    Posts
    4,484

    Re: HTML Layout Question but using DevExpress Blazor Components

    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.
    There are 10 kinds of people in this world. Those who understand binary, and those who don't.

  3. #3
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,809

    Re: HTML Layout Question but using DevExpress Blazor Components

    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/
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  4. #4

    Thread Starter
    PowerPoster MMock's Avatar
    Join Date
    Apr 2007
    Location
    Driving a 2018 Mustang GT down Route 8
    Posts
    4,484

    Re: HTML Layout Question but using DevExpress Blazor Components

    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.
    There are 10 kinds of people in this world. Those who understand binary, and those who don't.

  5. #5
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,809

    Re: HTML Layout Question but using DevExpress Blazor Components

    Quote Originally Posted by MMock View Post
    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/
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width