Looking for the architecture of web app build for more than one window resolutions

Question

User-1651604128 posted

Hi,

I am using Visual Studio 2015 to design MVC web app, the app uses webgrid to display tablet data with simple HTML table to show data under windows 7.

I don't use bootstraps everywhere in my site.

The site is not displayed properly if I change the window screen resolution (such as from 800x600 to  1680x1050), I am not asking about the Mobile apps since this app is not used by mobile users. but at least it should be displayed properly with more than one window resolutions.

I know there is a way to make the site shrink and expand if I change the screen, but I can not find it.

Can anybody guide me the best architecture to achieve this? such as MVC templates, ASP.net Core,  or others?

Much appreciated for any resources, links,

Answer 1

User-474980206 posted

it's called responsive design, and is just the html & css you use. bootstrap is a responsive CSS framework that make creating responsive sites easier. if you really just need responsive tables, google responsive tables for the CSS tricks. in general responsive uses percentages rather than fixed widths.

the current MVC or asp.net core templates use bootstrap. but its just sample bootstrap markup. 

the best approach is to pick a responsive framework (like bootstrap), and change you markup. google webgrid bootstrap, for example of converting your webgrids.

Answer 2

User-17257777 posted

Hi Peter Cong,

In addition to Bruce's reference to third-party libraries, you can also use the media screen of native CSS.

I used it to make a simple demo:

Code:

<style>
        @media screen and (min-width:900px)
        {
            #div1 {
                width: 25%;
                height: 100px;
                border: 1px solid #ccc;
                float: left;
                box-sizing: border-box;
            }

            #div2 {
                width: 25%;
                height: 100px;
                border: 1px solid #ccc;
                float: left;
                box-sizing: border-box;
            }

            #div3 {
                width: 25%;
                height: 100px;
                border: 1px solid #ccc;
                float: left;
                box-sizing: border-box;
            }

            #div4 {
                width: 25%;
                height: 100px;
                border: 1px solid #ccc;
                float: left;
                box-sizing: border-box;
            }
            
        }
        

        @media screen and (min-width:600px) and (max-width:900px)
        {
            #div1 {
                width: 50%;
                height: 100px;
                border: 1px solid #ccc;
                float: left;
                box-sizing: border-box;
            }
            #div2 {
                width: 50%;
                height: 100px;
                border: 1px solid #ccc;
                float: left;
                box-sizing: border-box;
            }
            #div3 {
                width: 50%;
                height: 100px;
                border: 1px solid #ccc;
                float: left;
                box-sizing: border-box;
            }

            #div4 {
                width: 50%;
                height: 100px;
                border: 1px solid #ccc;
                float: left;
                box-sizing: border-box;
            }
        }

        @media screen and (max-width:600px) {
            #div1 {
                width: 100%;
                height: 100px;
                border: 1px solid #ccc;
                float: left;
                box-sizing: border-box;
            }

            #div2 {
                width: 100%;
                height: 100px;
                border: 1px solid #ccc;
                float: left;
                box-sizing: border-box;
            }

            #div3 {
                width: 100%;
                height: 100px;
                border: 1px solid #ccc;
                float: left;
                box-sizing: border-box;
            }

            #div4 {
                width: 100%;
                height: 100px;
                border: 1px solid #ccc;
                float: left;
                box-sizing: border-box;
            }
        }
    </style>

<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    <div id="div4">div4</div>
</body>

Result:

Width is more than 900px:

Width is between 600px and 900px:

Width is less than 600px:

Best Regards,

Jiadong Meng.

Answer 3

User-1651604128 posted

Hi jiadongm,

Thanks a lot for your example codes, that helps a lot,

but in my case, I use webgrid to display the tabular data, and when the record is opened, I use bootstrap tab table with many tabs to display each record, each tab contains html table(s). the data display UI is not that simple, therefore, using div(s) may not each to display the UI data layout,

and in your case, I can  see you use div to display data which is each to control through css.

I will dig more to find out what's the best way suitable for my case,

anyway, thanks a lot for your help,

Answer 4

User-17257777 posted

Hi Peter Cong,

Webgrid is rendered in the form of <table>. Similarly, you can display different styles at different resolutions by setting the styles of <table>, <tr>, <td>. For example:

Code:

<style>
        
        @media all and (max-width:800px) {
            table {
                
                width: 100%;
            }

            td {
                display: block;
                width: 100%;
            }

            tr {
                border: 1px solid #000000;
                display: block;
                margin-bottom: 30px;
            }
        }

        @media all and (min-width:800px) {
            table{
                width:100%;
            }

            td {
                border: 1px solid #000000;
                width:50%
            }
        }
    </style>
<body>
    <table>
        <tr>
            <td>
                <table>
                    <tr>
                        <td style="width:100%;text-align:center;" colspan="2">Table1</td>

                    </tr>
                    <tr>
                        <td style="width:100%;text-align:center" colspan="2">Title1</td>
                    </tr>
                    <tr>
                        <td style="text-align:center">Table1Content1</td>
                        <td style="text-align:center">Table1Content2</td>
                    </tr>
                    <tr>
                        <td style="text-align:center" colspan="2"><button style="width:100%">click</button></td>
                    </tr>
                </table>
                
            </td>
            <td>
                <table>
                    <tr style="width:100%">
                        <td style="text-align:center" colspan="2">Table2</td>
                    </tr>
                    <tr>
                        <td style="text-align:center" colspan="2">Title2</td>
                    </tr>
                    <tr>
                        <td style="text-align:center">Table2Content1</td>
                        <td style="text-align:center">Table2Content2</td>
                    </tr>
                    <tr>
                        <td style="text-align:center" colspan="2"><button style="width:100%">click</button></td>
                    </tr>

                </table>
            </td>
        </tr>
    </table>

Result:

Width is more than 800px:

Width is less than 800px:

Best Regards,

Jiadong Meng.

Answer 5

User-1651604128 posted

Hi Peter Cong,

Webgrid is rendered in the form of <table>. Similarly, you can display different styles at different resolutions by setting the styles of <table>, <tr>, <td>. For example:

Code:

<style>
        
        @media all and (max-width:800px) {
            table {
                
                width: 100%;
            }

            td {
                display: block;
                width: 100%;
            }

            tr {
                border: 1px solid #000000;
                display: block;
                margin-bottom: 30px;
            }
        }

        @media all and (min-width:800px) {
            table{
                width:100%;
            }

            td {
                border: 1px solid #000000;
                width:50%
            }
        }
    </style>
<body>
    <table>
        <tr>
            <td>
                <table>
                    <tr>
                        <td style="width:100%;text-align:center;" colspan="2">Table1</td>

                    </tr>
                    <tr>
                        <td style="width:100%;text-align:center" colspan="2">Title1</td>
                    </tr>
                    <tr>
                        <td style="text-align:center">Table1Content1</td>
                        <td style="text-align:center">Table1Content2</td>
                    </tr>
                    <tr>
                        <td style="text-align:center" colspan="2"><button style="width:100%">click</button></td>
                    </tr>
                </table>
                
            </td>
            <td>
                <table>
                    <tr style="width:100%">
                        <td style="text-align:center" colspan="2">Table2</td>
                    </tr>
                    <tr>
                        <td style="text-align:center" colspan="2">Title2</td>
                    </tr>
                    <tr>
                        <td style="text-align:center">Table2Content1</td>
                        <td style="text-align:center">Table2Content2</td>
                    </tr>
                    <tr>
                        <td style="text-align:center" colspan="2"><button style="width:100%">click</button></td>
                    </tr>

                </table>
            </td>
        </tr>
    </table>

Result:

Width is more than 800px:

Width is less than 800px:

Hi iadongm,

Best Regards,

Jiadong Meng.

Hi Jiadong, Thanks a lot for your quick updates, that is good idea,

OK, we have solution for webgrid, how about tab tables? my app uses many webgrid and tab tables (I think it is bootstrap tab tables), some tab tables contain even 10 tabs, how to make this tab work?

If we have solution for tab tables, then I may consider to use your solution to change my design.

I will on my vacation next 3 weeks, I will reply you when I return from my vacation.

much appreciated,