Click here to Skip to main content
15,881,715 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi all

How I can arrange my form elements in this format":

 **************   **************   **************
 *   select   *   *   select   *   *   select   *   **chkbox**
 **************   **************   **************
                                                    **chkbox**
***********************  ************************
*                     *  *                      *
*                     *  *                      *   **chkbox**
*                     *  *                      *
*                     *  *                      *
*                     *  *                      *   **chkbox**
*                     *  *                      *
*      textarea       *  *      textarea       *   **chkbox**
*                     *  *                      *
*                     *  *                      *
*                     *  *                      *   **chkbox**
*                     *  *                      *
*                     *  *                      *
*                     *  *                      *   **chkbox**
***********************  ************************


My main difficulty is the spaces between horizontal elements
and the arrange of check boxes on the right of the textarea element

Thank you very much.

What I have tried:

I have not any idea of how to try for this.
Posted
Updated 12-Apr-22 2:09am
v2

1 solution

I don't know Blazor at all but this sounds more like a HTML/CSS question about laying out components on a screen. If this is the case, you can use the flex grid system to layout components quite nicely. Bootstrap has a great grid system which works out of the box, you can also just import the grid CSS to exclude all of the other components:

Grid system · Bootstrap[^]

Using that you can create a layout similar to what you want, here's an example JSFiddle I put together[^]
 
Share this answer
 
v2
Comments
TheRealSteveJudge 12-Apr-22 8:42am    
5ed

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900