мой контент работает нормально на настольных компьютерах и других небольших устройствах, но в альбомной ориентации iPad (размер экрана 1024pX768) я сталкиваюсь с проблемой, когда я щелкаю боковую панель меню, чтобы переключить его на существующий контент.мы используем bootstap 3
Я не хочу перекрывать содержимое div там в той области, когда переключается меню.
На первом изображении оно выглядит хорошо при нажатии на кнопку меню переключения, оно будет перекрываться.
Мой HTML-код:
<div class="row">
<div class="box-hseader">
<div class="col-md-6 col-sm-6">
<div class="col-md-3" style="padding: 0 6px 0px 0px">
<a class="btn btn-app boxFlat " ng-click="totalComplaints()">
<div class="col-mds-3">
<span>Total: {{commonareacount||0}}</span>
</div>
</a>
</div>
<div class="col-md-3" style="padding: 0 6px">
<a class="btn btn-app boxFlat" ng-click="isSolved()">
<div class="col-mds-3">
<span>Solved: {{commonareacountsolved||0}}</span>
</div>
</a>
</div>
<div class="col-md-3" style="padding: 0 6px">
<a class="btn btn-app boxFlat " ng-click="isUnsolved()">
<div class="col-mds-3">
<span>Unsolved: {{commonareacountpending||0}}</span>
</div>
</a>
</div>
<div class="col-md-3" style="padding: 0 6px">
<a class="btn btn-app boxFlat " ng-click="isCancelled()">
<div class="col-mds-3">
<span>Cancelled: {{commoncanceled||0}}</span>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="form-group form-inline pull-right rghtFlt">
<select name="filterByRolenm" id="filterByRoleId" ng-model="roleFilter"
ng-change="showFilteredComplaints(CommonAreaComplaintsCopy)" class="form-control">
<option value="All">All roles</option>
<option ng-repeat="resPerson in personnelResType" value="{{resPerson.res_id}}">{{resPerson.res_type}}</option>
</select>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-search" aria-hidden="true"></i>
</span>
<input type="text" class="form-control" ng-model="searchText" ng-change="updateFilteredList('getcomplaints', complaintsCopy)"
placeholder="Search ">
</div>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-success pull-right iPhn5cbtn" data-toggle="modal"
data-whatever="@getbootstrap" data-target="#exportComplaintsId"
ng-click="getComplaintId(1)" data-keyboard="false">Export
</button>
</div>
</div>
</div>
Мой CSS-код:
@media only screen and (max-width: 320px){
.rghtFlt{
float: none !important;
}
}
@media only screen and (max-width: 568px) {
.rghtFlt{
float: none !important;
}
}
@media only screen and (max-width: 640px) {
.rghtFlt{
float: none !important;
}
}
.boxFlat {
position: relative;
border-radius: 3px;
background: #ffffff;
margin-bottom: 20px;
width: 100%;
box-shadow: 5px 5px 5px 6px rgba(0, 9, 0, 0.1);
}
Переключить навигационный JS-скрипт:
// toggle nav bar
function openNav() {
var marginLeftContent = document.getElementById("user_name");
if (marginLeftContent.style.display === 'none') {
var elements = document.getElementsByClassName('displayIcon');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = 'inline-block';
}
document.getElementById("sidebar-left").style.width = "230px";
// document.getElementsByClassName("displayIcon")[0].style.display = "none";
document.getElementById("user_name").style.display = "block";
document.getElementById("main-header").style.marginLeft = "228px";
document.getElementById("main-footer").style.marginLeft = "230px";
document.getElementById("wrapper").style.backgroundColor = '#ecf0f5';
document.getElementById("wrapper").style.backgroundImage = 'none';
document.getElementById("content-wrapper").style.marginLeft = '230px';
} else {
var elements = document.getElementsByClassName('displayIcon');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = 'none';
}
document.getElementById("sidebar-left").style.width = "70px";
// document.getElementsByClassName("displayIcon")[0].style.display = "none";
document.getElementById("user_name").style.display = "none";
document.getElementById("main-header").style.marginLeft = "70px";
document.getElementById("main-footer").style.marginLeft = "70px";
document.getElementById("wrapper").style.backgroundColor = '#ecf0f5';
document.getElementById("wrapper").style.backgroundImage = 'none';
document.getElementById("content-wrapper").style.marginLeft = '69px';
}
}