I did a function in private section of my website, to get and display some file of a repository.
Below is the function I did :
function getFilesChantier($devis, $cp) {
// Si dossier cp n'existe pas on le créé
if (!file_exists(_DOCS_ . 'C' . $cp)) {
mkdir(_DOCS_ . 'C' . $cp, 0777, true);
fopen(_DOCS_ . 'C' . $cp . '/index.html', w);
}
if (!file_exists(_DOCS_ . 'C' . $cp . '/' . $devis)) {
mkdir(_DOCS_ . 'C' . $cp . '/' . $devis, 0777, true);
fopen(_DOCS_ . 'C' . $cp . '/' . $devis . '/index.html', w);
}
//On liste les fichiers pdf
$repertoire = _DOCS_ . 'C' . $cp . '/' . $devis;
if ($dossier = opendir($repertoire)) {
while (false !== ($fichier = readdir($dossier))) {
if ($fichier != '.' && $fichier != '..' && $fichier != 'index.php' && $fichier != 'index.html' && $fichier != 'Thumbs.db') {
$nb_fichier++; // On incrémente le compteur de 1
$retour[$nb_fichier]['name_file'] = str_replace('/var/www/sp-batiment.com/htdocs/docs/C' . $cp . '/' . $devis . '/', '', $repertoire . '/' . $fichier);
$retour[$nb_fichier]['url_file'] = str_replace('/var/www/sp-batiment.com/htdocs/', '', $repertoire . '/' . $fichier);
$retour[$nb_fichier]['nb_file'] = $nb_fichier;
$retour[$nb_fichier]['date_file'] = date("F d Y H:i:s.", filectime($repertoire . '/' . $fichier));
}
}
}
return $retour;
}
All works fine in all browsers.
Below is the rendering of my website:
but when we turn to a phone (Android Samsung), it does not work on Google Chrome browser, it displays nothing.
I don't know if something is wrong with my function, or is it the fact that it is calling on a telephone ?
The page called is the same, just the browser change (the first is classic Google Chrome on a computer), the other is a Samsung Galaxy with Google Chrome.
I use Bootstrap, below is the code of my table:
<div class="col-md-12">
<h3>Mes documents</h3>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th><i class="fa fa-calendar"></i> Date</th>
<th class="text-center">Type</th>
<th>Fichier</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr>
<td nowrap="">1</td>
<td nowrap="">17-08-2016 </td>
<td nowrap="" class="text-center"><span class="label label-danger" style="text-transform:uppercase;tex-align:left"><i class="fa fa-file-pdf-o"></i></span></td>
<td nowrap=""> compément-de-devis-1.pdf</td>
<td nowrap="">
<form action="php/download.php" method="post">
<button class="btn btn-dark btn-xs"><i class="fa fa-cloud-download"></i> Télécharger</button>
</form>
</td>
</tr>
<tr>
<td nowrap="">2</td>
<td nowrap="">04-08-2016 </td>
<td nowrap="" class="text-center"><span class="label label-danger" style="text-transform:uppercase;tex-align:left"><i class="fa fa-file-pdf-o"></i></span></td>
<td nowrap=""> autorisation-changement-de-façade.pdf</td>
<td nowrap="">
<form action="php/download.php" method="post">
<button class="btn btn-dark btn-xs"><i class="fa fa-cloud-download"></i> Télécharger</button>
</form>
</td>
</tr>
<tr>
<td nowrap="">3</td>
<td nowrap="">03-08-2016 </td>
<td nowrap="" class="text-center"><span class="label label-danger" style="text-transform:uppercase;tex-align:left"><i class="fa fa-file-pdf-o"></i></span></td>
<td nowrap=""> devis-initial.pdf</td>
<td nowrap="">
<form action="php/download.php" method="post">
<button class="btn btn-dark btn-xs"><i class="fa fa-cloud-download"></i> Télécharger</button>
</form>
</td>
</tr>
<tr>
<td nowrap="">4</td>
<td nowrap="">03-08-2016 </td>
<td nowrap="" class="text-center"><span class="label label-danger" style="text-transform:uppercase;tex-align:left"><i class="fa fa-file-pdf-o"></i></span></td>
<td nowrap=""> plan-du-batiment.pdf</td>
<td nowrap="">
<form action="php/download.php" method="post">
<button class="btn btn-dark btn-xs"><i class="fa fa-cloud-download"></i> Télécharger</button>
</form>
</td>
</tr>
<tr>
<td nowrap="">5</td>
<td nowrap="">03-08-2016 </td>
<td nowrap="" class="text-center"><span class="label label-danger" style="text-transform:uppercase;tex-align:left"><i class="fa fa-file-pdf-o"></i></span></td>
<td nowrap=""> facture-acompte-n-1.pdf</td>
<td nowrap="">
<form action="php/download.php" method="post">
<button class="btn btn-dark btn-xs"><i class="fa fa-cloud-download"></i> Télécharger</button>
</form>
</td>
</tr>
</tbody>
</table>
</div>
In your html code there is no issue as i run it in my mobile device and its working fine.
A small typo error tex-align
to text-error
in your code
You can inspect your html code in your mobile google chrome browser through your PC. Check this links
https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging?hl=en
From it you can check that the table row are inflating from your php code or is there any problem with your html code
Hope this will help
The problem can't be in PHP code (it interprets on server, not on device), it is in your HTML or Javascript code. You didn't provide it so I can't help to debug. But you can try resizing window to phone's screen size in Chrome and you will probably get the same result. Also in desktop Chrome, you can press F12, press "Toggle Device" button and select appropriate device.
Update: I posted HTML code you provided to jsfiddle (sorry for duplicating your code in answer but SO doesn't allow link to jsfiddle without code).
<div class="col-md-12">
<h3>Mes documents</h3>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th><i class="fa fa-calendar"></i> Date</th>
<th class="text-center">Type</th>
<th>Fichier</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr>
<td nowrap="">1</td>
<td nowrap="">17-08-2016 </td>
<td nowrap="" class="text-center"><span class="label label-danger" style="text-transform:uppercase;tex-align:left"><i class="fa fa-file-pdf-o"></i></span></td>
<td nowrap=""> compément-de-devis-1.pdf</td>
<td nowrap="">
<form action="php/download.php" method="post">
<button class="btn btn-dark btn-xs"><i class="fa fa-cloud-download"></i> Télécharger</button>
</form>
</td>
</tr>
<tr>
<td nowrap="">2</td>
<td nowrap="">04-08-2016 </td>
<td nowrap="" class="text-center"><span class="label label-danger" style="text-transform:uppercase;tex-align:left"><i class="fa fa-file-pdf-o"></i></span></td>
<td nowrap=""> autorisation-changement-de-façade.pdf</td>
<td nowrap="">
<form action="php/download.php" method="post">
<button class="btn btn-dark btn-xs"><i class="fa fa-cloud-download"></i> Télécharger</button>
</form>
</td>
</tr>
<tr>
<td nowrap="">3</td>
<td nowrap="">03-08-2016 </td>
<td nowrap="" class="text-center"><span class="label label-danger" style="text-transform:uppercase;tex-align:left"><i class="fa fa-file-pdf-o"></i></span></td>
<td nowrap=""> devis-initial.pdf</td>
<td nowrap="">
<form action="php/download.php" method="post">
<button class="btn btn-dark btn-xs"><i class="fa fa-cloud-download"></i> Télécharger</button>
</form>
</td>
</tr>
<tr>
<td nowrap="">4</td>
<td nowrap="">03-08-2016 </td>
<td nowrap="" class="text-center"><span class="label label-danger" style="text-transform:uppercase;tex-align:left"><i class="fa fa-file-pdf-o"></i></span></td>
<td nowrap=""> plan-du-batiment.pdf</td>
<td nowrap="">
<form action="php/download.php" method="post">
<button class="btn btn-dark btn-xs"><i class="fa fa-cloud-download"></i> Télécharger</button>
</form>
</td>
</tr>
<tr>
<td nowrap="">5</td>
<td nowrap="">03-08-2016 </td>
<td nowrap="" class="text-center"><span class="label label-danger" style="text-transform:uppercase;tex-align:left"><i class="fa fa-file-pdf-o"></i></span></td>
<td nowrap=""> facture-acompte-n-1.pdf</td>
<td nowrap="">
<form action="php/download.php" method="post">
<button class="btn btn-dark btn-xs"><i class="fa fa-cloud-download"></i> Télécharger</button>
</form>
</td>
</tr>
</tbody>
</table>
</div>
It looks fine and is displayed in my chrome on mobile devices. Are you sure that there is nothing more then this HTML? Some kind of extra CSS and JS besides standard bootstrap, for example.
You havent provided your php codes for that output process (from PHP) for that HTML parts. Although in PHP
there exists classes to detect BROWSER, there is a very little chance that you accidentally used that in your output process. However, lets provide that part, or check it yourself.
As you say, that while "toggling" the device, you see them, then it means there is CSS problem. Check if elements have css classes/styles like @media max-width:
... or overflow:hidden
or like them, which causes the table to be hidden.
Although you say, that there is no more codes in page, i doubt there may be some Javascript code, that may cause problems. Many times, JS tables are dynammically loaded after Page-Load, and maybe in the device browser, it has some problems. If you have shared all your PHP/HTML codes you use for the project, then it would have been easier to detect the problem.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With