0
Приложение не распространяется на все дисплеи на мобильных устройствах - на нижней панели находится тонкая черная полоса.Как заставить приложение отображать все пространство на мобильном устройстве (jqueryMobile)?
<body>
<div data-role="page" id="main" data-theme="b" data-fullscreen="true">
<div data-role="header" data-fullscreen="true">
<h1>Scheduler</h1>
<a href="#adding" data-icon="plus" data-iconpos="notext" class="ui-btn-right" data-rel="dialog" data-role="button">Dodaj</a>
</div>
<div data-role="main" class="ui-content" id="list">
</div>
<div data-role="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
<div data-role="navbar">
<ul>
<li><a href="#settings" data-transition="flip" data-role="button" data-icon="gear" data-rel="dialog">Settings</a></li>
<li><a href="#info" data-transition="flip" data-role="button" data-icon="info" data-rel="dialog">Info</a></li>
</ul>
</div>
</div>
</div>
<!--Adding goals-->
<div data-role="page" id="adding">
<div data-role="header">
<h1>Adding new goal</h1>
</div>
<div data-role="main" class="ui-content">
<form data-theme="e">
<form onsubmit="return false;">
<label>
NEW GOAL:<input type="text" id="goal" />
</label>
<input type="button" value="ADD" id="addBtn"/>
</form>
</form>
</div>
</div>
<!--Settings-->
<div data-role="page" id="settings">
<div data-role="header">
<h1>Settings</h1>
</div>
<div data-role="main" class="ui-content">
<form data-theme="e">
<input type="button" value="Clear all elements" id="delBtn"/>
</form>
</div>
</div>
<!-- Info -->
<div data-role="page" id="info">
<div data-role="header">
<h1>Info</h1>
</div>
<div data-role="main" class="ui-content">
Here help will be. ~~Yoda
</div>
</div>
код CSS, как это:
#main{height:100% !important;}
html,body{
margin:0;
padding:0;
border:none;
}
Javascript код:
var db = new PouchDB('goals');
var remoteCouch = 'goals_remote';
db.changes({
since: 'now',
live: true
}).on('change', createList);
createList();
//creating goals
document.getElementById('addBtn').addEventListener('click', function(){
var txt = document.getElementById('goal').value;
var goal = {
_id: new Date().toISOString(),
text: txt,
completed: false
}
db.put(goal, function callback(err, result){
if(!err){
console.log('success');
refresh();
}
});
}, false);
//deleting elements
document.getElementById('delBtn').addEventListener('click', function(){
db.destroy().then(function() {
refresh();
});
}, false);
function refresh(){
location.reload(true);
}
//pressing goal
function pressGoal(goal){
if(goal.completed){
goal.completed = false;
} else {
goal.completed = true;
}
db.put(goal);
createList();
}
function createList() {
var completedTasks = [];
var notCompletedTasks = [];
db.allDocs({
include_docs: true,
descending: true
}).then(function(result) {
for(var k = 0; k < result.rows.length; k++){
if(result.rows[k].doc.completed){
completedTasks.splice(completedTasks.length, 0, result.rows[k].doc);
} else {
notCompletedTasks.splice(notCompletedTasks.length, 0, result.rows[k].doc);
}
renderList(completedTasks, notCompletedTasks);
}
}).catch(function(err) {
console.log(err);
});
}
function renderList(completedTasks, notCompletedTasks){
var code = '';
var notCode = '';
var elementsArr = [];
//creating lists
for(var i = 0; i < notCompletedTasks.length; i++){
code += '<div class="ui-checkbox" id="'+notCompletedTasks[i]._id+'"><label class="ui- checkbox-off ui-btn ui-btn-corner-all ui-fullsize ui-btn-icon-left ui-btn-up-b" data-corners="true" data-shadow="false" data-iconshadow="true" data- wrapperels="span" data-icon="checkbox-off" data-theme="b" data-mini="false"> <span class="ui-btn-inner"><span class="ui-btn-text">'+notCompletedTasks[i].text+'</span><span class="ui-icon ui-icon-checkbox-off ui-icon-shadow"> </span></span></label><input type="checkbox"></div>';
}
for(var j = 0; j < completedTasks.length; j++){
notCode += '<div class="checked" id="'+completedTasks[j]._id+'">'+'<div class="ui-icon ui-icon-check">'+'</div>'+'<span class="field">'+completedTasks[j].text+'</span>'+'</div>';
}
//build
document.getElementById('list').innerHTML = code + notCode;
for(var k = 0; k < notCompletedTasks.length; k++){
(function(){
var arg = notCompletedTasks[k];
document.getElementById(arg._id).addEventListener('click', function(){
pressGoal(arg);
}, false);
})();
}
for(var k = 0; k < completedTasks.length; k++){
(function(){
var arg = completedTasks[k];
document.getElementById(arg._id).addEventListener('click', function(){
pressGoal(arg);
}, false);
})();
}
}
Я надеюсь, что код будет достаточно. Я не знаю, почему код CSS не работает так, как должен.
Есть ли способ сделать это? Я не мог найти ответ на этот вопрос.
Редактировать: Я добавил код javascript. К сожалению, я не знаю, что создало эту проблему, поэтому код очень дорог. Простите за это. Я использовал pouchDB для хранения данных пользователей и скомпилировал с cocoon.io для мобильных телефонов.
есть только код css и html, почему теги javascript и jquery-mobile? –
предоставляют некоторые из кода 'javascript', которые вы используете, чтобы мы могли помочь вам лучше. Попробуйте ответы здесь http://stackoverflow.com/a/37026141/1020127 – melanholly
@melanholly Спасибо, я только что решил эту проблему - нужно было добавить html {height: 100%;}. – daniel1234567