Hi,
when I try to run my f7 app on a tablet the page aspect is not in fullscreen (see image). How can I make the page in fullscreen?
thank you!
can you share some code?
my guess without any code would be a fixed width. but with no code its difficult to know.
Hi, below is the code of html:
<body id="_gesLogPage">
<!-- App root element -->
<div id="app">
<!-- Statusbar overlay -->
<div class="statusbar"></div>
<!-- Your main view, should have "view-main" class -->
<div class="view view-main view-init safe-areas" data-master-detail-breakpoint="800" data-url="/" stackPages=“true”>
<!-- Initial Page, "data-name" contains page name
-->
<div class="page _stacked" data-name="{{pageName}}">
<!-- Top Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="chip">
<div class="chip-media bg-color-blue">
<i class="icon f7-icons">phone_portrait</i>
</div>
<div class="chip-label"><span id="_infoDispositivo"></span></div>
</div>
<div class="chip">
<div class="chip-media bg-color-red">
<i class="icon f7-icons">person</i>
</div>
<div class="chip-label"><span id="_infoCliente"></span></div>
</div>
</div>
</div>
<!-- Bottom Toolbar -->
<div class="toolbar toolbar-bottom">
<div class="toolbar-inner">
<!-- Toolbar links -->
<a href="#" class="link"></a>
<a href="/invialista/" class="link">
<i class="f7-icons" style="font-size: 16px;">cloud_upload</i> Invia lista
</a>
</div>
</div>
<!-- Scrollable page content -->
<div class="page-content">
<form class="list no-margin" id="my-form">
<input type="hidden" id="_lastListFromServer" value="1">
<input type="hidden" id="_codiceDispositivo" value="0">
<input type="hidden" id="_targetHost" value="">
<input type="hidden" id="_dittaGamma" value="">
<input type="hidden" id="_codiceDitta" value="">
<input type="hidden" id="_prodCheckLotto" value="N">
<input type="hidden" id="_prodCheckScadenza" value="N">
<div class="list no-hairlines-md no-margin">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">SELEZIONARE LA LISTA</div>
<div class="item-input-wrap">
<select id="_selectLista" onchange="selezionaLista();">
<option value="0">Seleziona...</option>
</select>
</div>
</div>
<div class="item-media">
<a class="button button-fill margin-right " href="#" onclick="creaLista();">
<i class="f7-icons" style="font-size: 16px;">add_round</i> CREA
</a>
</div>
</li>
<li>
<div class="item-content item-input">
<div class="item-media">
<a class="button button-col no-margin" href="#" id="_btnShowKb128" onclick="showKb()">
<i class="f7-icons" style="margin-top: 6px; font-size: 12px;">keyboard</i>
</a>
</div>
<div class="item-inner no-margin">
<div class="item-input-wrap">
<input type="text" name="barcode128" id="_barcode128" readonly="" onfocus="test(this)" onblur="riReadOnly(this)"
placeholder="BARCODE EAN CODE">
<input type="hidden" name="barcode13" id="_barcode13">
</div>
</div>
<div class="item-media">
<a class="button button-col margin-right " href="#" id="_btnCheckBarCode">
<i class="f7-icons" style="margin-top: 6px">barcode</i>
</a>
</div>
</div>
</li>
<!--
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-input-wrap">
<input type="text" name="barcode13" id="_barcode13"
placeholder="COD EAN 13">
</div>
</div>
<div class="item-media">
<a class="button button-col margin-right " href="#" onclick="checkEAN13()"><i class="f7-icons"
style="margin-top: 6px">barcode_fill</i></a>
</div>
</div>
</li>
-->
<li>
<hr class="no-margin">
<div class="item-content item-input">
<div class="item-inner">
<div class="item-input-wrap">
<input type="text" name="descrizione" id="_descrizione" placeholder="DESCRIZIONE" readonly>
</div>
</div>
<div class="item-media">
<a class="button button-col margin-right " href="/ricerca/" id="_btnSearch">
<i class="f7-icons"
style="margin-top: 6px">search</i>
</a>
</div>
</div>
</li>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-input-wrap">
<input type="text" name="giacenza" id="_giacenza" placeholder="GIACENZA" readonly>
</div>
</div>
<div class="item-media">
<a class="button button-col margin-right popup-open" href="#" data-popup=".popup-about">
VEDI PREZZI
</a>
</div>
</div>
</li>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-input-wrap">
<input type="text" name="lotto" id="_lotto" placeholder="LOTTO">
</div>
</div>
<div class="item-inner">
<div class="item-input-wrap">
<select id="_selectOmaggio" onchange="setOmaggio();">
<option value="0">Non è omaggio</option>
<option value="1">Omaggio con rivalsa</option>
<option value="2">Omaggio senza rivalsa</option>
</select>
</div>
</div>
</div>
</li>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">SCADENZA</div>
<div class="item-input-wrap">
<input type="date" name="dataScadenza" id="_dataScadenza"
placeholder="SCADENZA">
</div>
</div>
<div class="item-inner">
<div class="item-title item-label">SCONTO</div>
<div class="item-input-wrap">
<input type="number" name="sconto" id="_sconto" placeholder="SCONTO">
</div>
</div>
</div>
</li>
<li>
<div class="item-content item-input">
<div class="item-inner">
<!-- Stepper element -->
<div class="item-title item-label">QTA:</div>
<div class="stepper stepper-init" data-autorepeat="true"
data-autorepeat-dynamic="true">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="number" id="_quantita" name="quantita" value="1"
max="9999">
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
<div class="item-media">
<a id="_btnAdd" class="button button-fill margin-right convert-form-to-data" href="/addinlist/">
<i class="f7-icons"
style="font-size: 16px;">add</i> aggiungi
</a>
</div>
</div>
</li>
</ul>
</div>
</form>
<div class="data-table card" style="margin-bottom:100px;">
<div class="">
<div class="data-table-header">
<div class="data-table-title margin-horizontal">Articoli</div>
</div>
</div>
<div class="card-content">
<table id="_tabLista">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Cod.</th>
<th scope="col">Descrizione</th>
<th scope="col">lotto</th>
<th scope="col">Scadenza</th>
<th scope="col">Qta</th>
</tr>
</thead>
<tbody id="_corpoTabella"></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="login-screen" id="_login">
<div class="view">
<div class="page">
<div class="page-content login-screen-content">
<div class="login-screen-title">Sedas GesLog</div>
<form>
<div class="list">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Inserisci il codice di licenza</div>
<div class="item-input-wrap">
<input type="text" name="codLicenza" id="_codLicenza"
placeholder="Codice Licenza">
</div>
</div>
</li>
</ul>
</div>
<div class="list">
<ul>
<li><a class="item-link list-button" href="#" id="_btnSaveCfg">Conferma</a></li>
</ul>
<div class="block-footer">
<p>
Il codice di licenza ti è stato fornito con il palmare, nel caso non ne fossi in
possesso contatta il supporto sedas.
</p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>and css, or even better, make a small jsfiddle with the error.
Hi, header with css:
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy"
content="default-src 'self' 'unsafe-inline' data: http://crm.sedaspz.com gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="#673ab7">
<link rel="stylesheet" href="framework7/css/framework7-icons.css">
<link rel="stylesheet" href="framework7/css/framework7.bundle.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Sedas GesLog</title>
</head>
and my index.css
{
-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}
body {
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
background-color:#E4E4E4;
background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
font-size:12px;
height:100vh;
margin:0px;
padding:0px;
/* Padding to avoid the "unsafe" areas behind notches in the screen */
padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-right, 0px);
text-transform:uppercase;
width:100%;
}
/* Portrait layout (default) */
.app {
background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
position:absolute; /* position in the center of the screen */
left:50%;
top:50%;
height:50px; /* text area height */
width:225px; /* text area width */
text-align:center;
padding:180px 0px 0px 0px; /* image height is 200px (bottom 20px are overlapped with text) */
margin:-115px 0px 0px -112px; /* offset vertical: half of image height and text area height */
/* offset horizontal: half of text area width */
}
/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
.app {
background-position:left center;
padding:75px 0px 75px 170px; /* padding-top + padding-bottom + text area = image height */
margin:-90px 0px 0px -198px; /* offset vertical: half of image height */
/* offset horizontal: half of image width and text area width */
}
}
h1 {
font-size:24px;
font-weight:normal;
margin:0px;
overflow:visible;
padding:0px;
text-align:center;
}
.event {
border-radius:4px;
-webkit-border-radius:4px;
color:#FFFFFF;
font-size:12px;
margin:0px 30px;
padding:2px 0px;
}
.event.listening {
background-color:#333333;
display:block;
}
.event.received {
background-color:#4B946A;
display:none;
}
@keyframes fade {
from { opacity: 1.0; }
50% { opacity: 0.4; }
to { opacity: 1.0; }
}
@-webkit-keyframes fade {
from { opacity: 1.0; }
50% { opacity: 0.4; }
to { opacity: 1.0; }
}
.blink {
animation:fade 3000ms infinite;
-webkit-animation:fade 3000ms infinite;
}