Как отображать горизонтальную полосу прокрутки при уменьшении экрана браузера

Question

Это то, что я сделал на приборной панели. Который содержит 4 DIVs. когда браузер полностью открыт , когда я уменьшить размер экрана браузера

Я хочу, чтобы каждый раз, когда экран браузера уменьшается ... панель DIVs должна получить horizontal scroll bar вместо урезания дисплея. Это мой код для того, как я обрабатываю частичный вид в главном представлении.

<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> 

Это CSS, которые я применяю:

#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); 

} 

Answer 1

Этот стиль является виновником.

.LiveTile{ 
    overflow: hidden; 
} 

Вы говорите, что скрываете все, что не соответствует границам. Попробуйте scroll или auto.

.LiveTile{ 
    overflow: scroll; 
} 

Или

.LiveTile{ 
    overflow: auto; 
} 

EDIT:

К сожалению, я думаю, что я получил разметка смешалось, вы хотите настроить таргетинг на DIV под заголовком. Попробуйте обернуть Html.RenderAction("RecentRequests",Model);, Html.RenderAction("PriorityRequests",Model); и т. Д. В div и применить его к этому.

HTML

<div id="RecentDiv"> 
     <h4 class="RequestTitle"> 
     <%: Html.ActionLink("Recent Requests", "CRMRequestsList", new { requestType = "Recent" })%> 
    </h4> 
    <div class="InnerDiv"> 
     <%Html.RenderAction("RecentRequests",Model); %> 
    </div> 
</div> 

CSS

.InnerDiv { 
    overflow:scroll; 
}