Gostemilov
New Member
This is what I made dashboard. Which contains 4 \[code\]DIVs\[/code\].when browser is fully open
when I reduce browser's screen size
I want whenever browser screen decreases ... dashboard \[code\]DIVs\[/code\] should get \[code\]horizontal scroll bar\[/code\] rather than cutting display.This is my code for how I render partial view in main view. \[code\]<fieldset> <%using (Ajax.BeginForm(new AjaxOptions { InsertionMode = InsertionMode.Replace}))/*, UpdateTargetId = "RecentDiv" }))*/ { %> <div id="MainDashboardDiv"> <div class="LiveTile"> <div id="RecentDiv"> <h4 class="RequestTitle"> <%: Html.ActionLink("Recent Requests", "CRMRequestsList", new { requestType = "Recent" })%> </h4> <%Html.RenderAction("RecentRequests",Model); %> </div> <!--End of RecentDiv --> <div id="PriorityDiv"> <h4 class="RequestTitle"> <%: Html.ActionLink("High Priority Requests", "CRMRequestsList", new { requestType = "Priority" })%> </h4> <%Html.RenderAction("PriorityRequests", Model); %> </div> <!--End of PriorityDiv --> </div> <!--End of UpperLiveTiles --> <div class="LiveTile"> <div id="PendingDiv"> <h4 class="RequestTitle"> <%: Html.ActionLink("Pending Requests", "CRMRequestsList", new { requestType = "Pending" })%> </h4> <%Html.RenderAction("PendingRequests", Model); %> </div> <!--End of PendingDiv --> <div id="ApprovedDiv"> <h4 class="RequestTitle"> <%: Html.ActionLink("Approved Requests", "CRMRequestsList", new { requestType = "Approved" })%> </h4> <%Html.RenderAction("ApprovedRequests", Model); %> </div> <!--End of ApprovedDiv --> </div> <!--End of LowerLiveTiles --> </div> <!--End of MainDashboardDiv --> <%} %> </fieldset>\[/code\]This is CSS which I apply :\[code\]#MainDashboardDiv { height: auto; width: 100%; margin: 0 auto; padding-bottom: 4%; overflow: hidden;}.LiveTile{ height: 260px; overflow: hidden; padding-top: 1%; position: relative; width: 100%;}#RecentDiv, #PendingDiv{ width: 48%; display: inline-block; position: relative; height:inherit; overflow: scroll; float: left; margin-bottom: 1%; margin-right: 1%; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; background:rgba(0,117,149,0.9);}#PriorityDiv,#ApprovedDiv{ width: 48%; position: relative; height:inherit; display: inline-block; overflow: scroll; float: left; margin-bottom: 1%; margin-right: 1%; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; background:rgba(0,117,149,0.9);}\[/code\]