0
モバイル解像度とウェブ解像度の両方でページを作成していますが、モバイル解像度ではこの解像度に予約されたコンテンツで満たされた空きスペースがあります。モバイル解像度のdiv間の空白を排除
var map;
$(document).ready(function(){
map = L.map('map', {
center: [33.960057, -6.916462],
minZoom: 2,
zoom: 14,
zoomControl: true
});
L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']
}).addTo(map);
function checkWidth() {
if ($(window).width() < 800) {
$('#map').removeClass('soft-padding');
$('.col-sm-9').addClass('map-padding map-container-mobile');
} else {
$('#map').addClass('soft-padding');
$('.col-sm-9').removeClass('map-padding map-container-mobile');
}
}
$(window).resize(checkWidth);
/*(function() {
$(window).resize(function() {
console.log($(this).width());
if($(this).width() >1100){
if($('#map').hasClass('soft-padding')){
$('#map').removeClass('soft-padding');
}
if(!$('.col-sm-9').hasClass('map-padding map-container-mobile')){
$('.col-sm-9').addClass('map-padding map-container-mobile');
}
} else {
console.log("hhh");
if(!$('#map').hasClass('soft-padding')){
$('#map').addClass('soft-padding');
}
if($('.col-sm-9').hasClass('map-padding map-container-mobile')){
$('.col-sm-9').removeClass('map-padding map-container-mobile');
}
}
})
})()*/
$('#open-mod').click(function() {
$('#myModal').modal('show');
});
/* Add a basic data series with six labels and values */
new Chartist.Line('.ct-chart', {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
series: [
[3, 2, 1, 0.5, 1, 0, -1, -3, 2, 0.8, -2, -1, 3, 2, -0.02, 0.3]
]
}, {
high: 3,
low: -3,
fullWidth: true,
// As this is axis specific we need to tell Chartist to use whole numbers only on the concerned axis
axisY: {
onlyInteger: true,
offset: 20
}
});
});.hide-overflow{
overflow:hidden;
}
.container, html, body{
width: 100% !important;
height: 100% !important;
padding:0;
position: relative;
}
#container{
min-height: 100%;
display : table;
}
#container>div{
display: table-row;
height: 0;
}
/*Herder Section*/
#header-row{
display: table-row;
}
#header-row .navbar{
margin : 0;
background: rgb(89,167,27);
border:none;
}
#header-row .navbar a{
color: white;
}
#header-row .navbar button{
color: white;
}
.navbar-brand{
font-size: 2em;
}
/*Section of "Zone géographique"*/
#zone-geog{
padding: 0px;
white-space: nowrap;
color : white;
display: table-row;
}
#menu-geog{
height : 100%;
}
#menu-geog .row {
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-top : 5px;
}
#zone-geog .container{
background: rgb(6,117,179);
border-radius: 10px;
white-space: nowrap;
}
#zone-geog-text{
margin-top: 3px;
padding-left: 30px;
font-family: 'Roboto Light';
}
#zone-geog .col-xs-12{
height: 100%;
padding: 0px;
white-space: nowrap;
}
#zone-geog select option{
font-family: 'Roboto Light';
font-size: 1em;
color : rgb(245,245,245);
}
/*Data viewer section*/
#data-viewer{
height: auto;
display: table-row;
}
#indica{
height: 30%;
}
#print-contact{
padding-left: 30px;
padding-right: 5px;
}
#print-contact-mobile{
left: 11.95%;
}
#print-contact-mobile{
padding-left: 0px;
padding-top: 10px;
}
#indica .container{
background: rgb(6,117,179);
border-radius: 10px;
}
#indica .row .col-xs-9 {
margin-top: 10px;
}
#indica .row .col-xs-3 {
margin-top: 10px;
}
#indica p{
padding-left: 10px;
font-family: 'Roboto Light';
color: white;
}
#evolu{
min-height: 70%;
display:table;
border-radius:10px;
}
#evolu .container{
background: rgb(6,117,179);
border-radius: 10px;
display:table-cell;
}
#evolu .container .row .col-xs-9{
margin-top: 10px;
}
#evolu .container .row .col-xs-3{
margin-top: 10px;
}
#evolu p{
font-family: 'Roboto Light';
color: white;
}
#map{
height : 100%;
border-radius: 10px;
position: relative;
z-index: 500
}
#data-viewer .col-sm-9{
padding: 0px;
}
#img-width-user{
width: 20px;
}
#img-expand{
width:17px;
float: right;
margin-top: 5px;
margin-right: 10px;
}
#img-cmnt{
width:17px;
float: right;
margin-top: 5px;
margin-right: 10px;
}
.modal-border{
border:none;
}
.modal{
top:25%;
}
.modal-backdrop {
background-color: white;
}
.modal-dialog{
width:450px;
}
#open-mod{
}
.modal-header h5{
font-size: 2em;
}
.modal-footer p{
font-size: 2em;
}
.modal-button{
width: 100%;
}
/*padding, margin, chart and some elements properties*/
.ct-chart-line{
background: white;
border-radius: 10px;
}
.ct-series-a .ct-bar, .ct-series-a .ct-line, .ct-series-a .ct-point, .ct-series-a .ct-slice-donut {
stroke: #337ab7;
}
.margin-zero{
margin :0px;
}
.soft-padding{
padding: 10px;
border-radius: 10px;
}
.padding-zero{
padding: 0px;
}
#select-start-padding{
padding-right : 2px;
padding-left : 0px;
}
#soft-padding-select-indica1{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 10px;
}
#soft-padding-select-indica2{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-top: 5px;
}
#soft-padding-select-evolu1{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 10px;
}
#soft-padding-select-evolu2{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-top: 5px;
}
#soft-padding-select-evolu1 p{
font-size: 0.7em;
}
.padding-text{
padding-left: 10px;
}
.select-prop{
padding-left: 10px;
padding-right: 10px;
-webkit-box-flex: 2;
-ms-flex-positive: 2;
flex-grow: 2;
}
.select-prop select{
background-position-x: 200px;
background-position-y: 8px;
background-color: white;
}
.row-select{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#background-textarea{
background: rgb(245,245,245);
border:none;
}
.padding-modal{
padding-top: 7px;
padding-bottom: 7px;
padding-left:15px;
padding-left: 15px;
}
/* Roboto font familly*/
.roboto-light{
font-family: 'Roboto Light';
}
/*font awsome property*/
.fa-comments-o{
margin-right: 5px;
}
/* Classes to align vertically and horizontally*/
.vertical-center {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.align-horizontally{
display: flex;
flex-direction: row;
}
/*mobile section*/
#mobile-section{
padding: 0px;
}
#mobile-section .col-xs-12{
position: fixed;
bottom : 0;
padding : 0px;
}
.map-container-mobile{
height : 100%;
position : absolute;
}
/*Footer section*/
#footer-row{
background-color:rgb(66, 66, 66);
padding: 0;
text-align: center;
font-size: 0.9em;
color: white;
bottom: 0;
z-index: 999;
display: table-row;
}
#footer-row p{
margin : 0px;
vertical-align: middle;
height : 100%;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Hind+Siliguri" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/le[email protected]/dist/leaflet.css"
integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg=="
crossorigin=""></script>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<!--<link rel="stylesheet" href="style.css">-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header padding-modal modal-border">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h5 class=" roboto-light modal-title " id="exampleModalLabel">Commentaire</h5>
</div>
<div class="modal-body padding-moda modal-borderl">
<textarea id="background-textarea" class="form-control roboto-light" rows="5" id="comment" placeholder="Votre commentaire ici"></textarea>
</div>
<div class="modal-footer padding-modal modal-border">
<div class="col-xs-12 margin-zero padding-zero">
<button type="button" class="btn btn-primary modal-button roboto-light margin-zero padding-zero"><p class="margin-zero">Envoyer</p></button>
</div>
</div>
</div>
</div>
</div>
<div id="container" class="container ">
<div id="header-row" class="row margin-zero hidden-xs">
<nav class="navbar navbar-inverse sidebar " role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand hidden-xs" href="#">IRRISAT</a>
</div>
<ul class="nav navbar-nav navbar-right ">
<li class="hidden-xs navbar-form">
<div class="center-block select-prop margin-zero">
<select class="form-control">
<option>Campagne en cours</option>
</select>
</div>
</li>
<li class="hidden-xs"><button class="btn btn-link navbar-btn" onclick="openNav()">Compte(Agriculteur)</button></li>
<li class="hidden-xs"><a href="#" ><i class="fa fa-user-circle-o" aria-hidden="true"></i> </a></li>
</ul>
</div>
</nav>
</div>
<div id="zone-geog" class="row margin-zero hidden-xs">
<div class="col-xs-12 margin-zero">
<div id="menu-geog" class="row soft-padding margin-zero">
<div class="container border-solid-black" >
<p id="zone-geog-text">Zone Géographique</p>
<div class="row margin-zero padding-zero row-select">
<div class="col-xs-2 center-block select-prop margin-zero">
<select class="form-control">
<option>BASSIN 1</option>
</select>
</div>
<div class="col-xs-2 center-block select-prop margin-zero">
<select class="form-control">
<option>PERIMETRE 1</option>
</select>
</div>
<div class="col-xs-2 center-block select-prop margin-zero">
<select class="form-control">
<option>SECTEUR 1</option>
</select>
</div>
<div class="col-xs-2 center-block select-prop margin-zero">
<select class="form-control">
<option>BLOC 1</option>
</select>
</div>
<div class="col-xs-2 center-block select-prop margin-zero"style="display:inline-flex;">
<select class="form-control">
<option>PARCELLE 3</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="data-viewer" class="row margin-zero">
<div class="col-xs-12 col-sm-9 col-sm-push-3 col-lg-push-0 col-md-push-0 margin-zero padding-zero">
<div class="row soft-padding margin-zero" >
<div class="container border-solid-black">
<div class="row padding-zero margin-zero">
<div id="map" class="col-xs-12 padding-zero margin-zero">
</div>
</div>
</div>
</div>
</div>
<div id="indica-evolu" class="col-xs-12 col-sm-3 col-sm-pull-9 col-lg-pull-0 col-md-pull-0 padding-zero margin-zero">
<div id="indica" class="row margin-zero soft-padding">
<div class="container border-solid-black">
<div class="row margin-zero padding-zero">
<div class="col-xs-9 margin-zero padding-zero">
<p class="margin-zero">Indicateur</p>
</div>
<div id="print-contact" class="col-xs-3 clearfix text-right align-horizontally">
<i id="open-mod" class="fa fa-comments-o fa-inverse" aria-hidden="true"></i>
<i class="fa fa-print fa-inverse" aria-hidden="true"></i>
</div>
</div>
<div id="soft-padding-select-indica1" class="row margin-zero">
<select class="form-control">
<option>Prod</option>
</select>
</div>
<div id="soft-padding-select-indica2" class="row margin-zero ">
<select class="form-control">
<option>27/04/2017</option>
</select>
</div>
</div>
</div>
<div id="evolu" class="row margin-zero soft-padding hidden-xs hidden-sm">
<div class="container border-solid-black">
<div class="row margin-zero padding-zero">
<div class="col-xs-9 margin-zero padding-zero">
<p class="margin-zero padding-text">Evolution</p>
</div>
<div class="col-xs-3 text-right">
<i class="fa fa-expand fa-inverse" aria-hidden="true"></i>
</div>
</div>
<div id="soft-padding-select-evolu1" class="row margin-zero soft-padding">
<div class="col-xs-6 margin-zero padding-zero">
<p class="margin-zero padding-zero">Début</p>
</div>
<div class="col-xs-6 margin-zero padding-zero">
<p class="margin-zero padding-zero">Fin</p>
</div>
</div>
<div id="soft-padding-select-evolu2" class="row margin-zero soft-padding">
<div id="select-start-padding" class="col-xs-6">
<select class="form-control">
<option>29/04/2015</option>
</select>
</div>
<div class="col-xs-6 padding-zero">
<select class="form-control">
<option>27/04/2017</option>
</select>
</div>
</div>
<div class=" row margin-zero soft-padding margin-zero">
<div class=" ct-chart col-xs-12 margin-zero padding-zero">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer-row" class="row margin-zero hidden-xs vertical-center">
<div class="col-xs-12">
2017 - Tous droits réservés
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function setMapHeight(){
var FooterHeight = $("#footer-row").outerHeight();
/*var indicaHeight = $("#indica").outerHeight();
var evoluHeight = $("#evolu").outerHeight();
/*alert(indicaHeight);
alert(evoluHeight);*/
if($("#header-row").is(":visible")){
var HeaderHeight = $("#header-row").outerHeight();
}else{
var HeaderHeight = 0;
}
if($("#header-row").is(":visible")){
var FooterHeight = $("#footer-row").outerHeight();
}else{
var FooterHeight = 0;
}
if($("#menu-geog").is(":visible")){
var MenuGeogHeight = $("#menu-geog").outerHeight();
}else{
var MenuGeogHeight = 0;
}
if($("#data-viewer").is(":visible")){
var dataViewerHeight = $("#data-viewer .padding-zero > div").outerHeight();
}else{
var dataViewerHeight = 0;
}
mapHeight = $(document).outerHeight() - HeaderHeight - MenuGeogHeight - FooterHeight - dataViewerHeight;
$("#map").height(mapHeight);
}
setMapHeight();
$(window).on("resize", setMapHeight);
</script>
</html>あなたは私を通知し、それらの空のスペースを削除する方法についてのアイデアを持っている場合。おかげで以前
「java」は「javascript」ではありません – SomeJavaGuy
私は知っています。私はjavaを押すことを意味していませんでした。それはちょうど間違いです。 –
「この解像度に予約されたコンテンツで満たされる空白がいくつかあります。あなたは、何がレンダリングされているのか、そして何をレンダリングしたいのかについて少し具体的にすることができますか？ – JasperZelf