Aspx Web App containing rendered MVC View to available screen size

Question

I have inherited an older web app, which is primarily written inside of ASPX page's, and am working on migrating it over to MVC, but it's a bit of a slow process, since there are only two/three of us and the project just began. Along with this effort we are also using DevExpress controls. So when we load a page, it first goes through the ASPX (because of we are still using the Site.Master for the menu content), Which then calls the MVC Render Action, to load the view within the ASPX Page.

<asp:Content ID="blah" ContentPlaceHolderID="anotherBlah" runat="server">
    <style>
        .container {
           position: relative;
           width: 100%;
           overflow: auto;
           max-width: 2150px;
        }
    </style>
    <div class="container">
        <%Path.To.MVC.RenderAction("Controller","Action" new {}); %>
    </div>
</asp:Content>

How would I programmatically limit the max-width to the available size of the screen, so that it contents of the Controller doesn't require the browser's scroll bar?

The DevExpress dxDataGrid has it's own built in scroll bar, that the user's could utilize instead. The issue is that the ColumnPicker, Add New Button, Search, or Export Button's go along for the journey, to the maximum width of the table. Which is why I want to contain it to the available width of the screen, and let the dxDataGrid handle the rest.

score 0 · Answer 1 · answered Mar 18 '22 at 20:18

A friend of mine pointed me towards viewport-percentages. This seems to have been what I was looking for all day! So if anybody else stumble's upon this quiestion, follow the link to read more:

CSS get height of screen resolution

My solution:

<asp:Content ID="blah" ContentPlaceHolderID="anotherBlah" runat="server">
    <style>
        .container {
           position: relative;
           width: 93vw;
        }
    </style>
    <div class="container">
        <%Path.To.MVC.RenderAction("Controller","Action" new {}); %>
    </div>
</asp:Content>

Aspx Web App containing rendered MVC View to available screen size

1 Answers1