Some elements don't display on smartphones, but on PC's with Firefox and Chromium, everything works. How can I fix this? I can't display elements from the showRecords js function.
HTML:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel='shortcut icon' href='{{ url_for("static", filename="favicon.png") }}' type='image/png'>
<title>
{% block titletext %}{% endblock %}
</title>
</head>
<body style='background:#F8F9FA;overflow-x:hidden;'>
<div class='container-fluid w-100 pl-0 pr-0 mx-0' id='mainContainer'>
<div class='container-fluid pl-0 pr-0' id='categoriesContainer'></div>
<div class='container-fluid pl-0 pr-0 w-100' id='contentContainer'></div>
</div>
<script src='{{ url_for("static", filename="front.js") }}'></script>
</body>
</html>
First, I changed front.js and I can see it on smartphones:
function showCategories(data, platform) {
const mainContainer = document.getElementById('categoriesContainer');
let categoriesRow, categoryColumn, categoryLink;
categoriesRow = document.createElement('div');
categoriesRow.className = 'row w-100';
categoriesRow.id = 'categoriesRow';
mainContainer.style.background = '#F3F3F9';
mainContainer.appendChild(categoriesRow);
categoryColumn = document.createElement('div');
categoryLink = document.createElement('a');
if ( desktopPlatforms.indexOf(platform) != -1 ) {
categoryColumn.className = 'col ml-5';
} else {
categoryColumn.className = 'col mx-1';
}
currentPage = document.location.pathname.split('/?')[0];
categoryLink.href = `${document.location.protocol}${document.location.host}${currentPage}`;
categoryLink.className = 'text-decoration-none';
categoryLink.textContent = 'Все';
categoriesRow.appendChild(categoryColumn);
categoryColumn.appendChild(categoryLink);
for (let i = 0; i < data.length; i++) {
categoryColumn = document.createElement('div');
categoryLink = document.createElement('a');
if ( desktopPlatforms.indexOf(platform) != -1 ) {
categoryColumn.className = 'col ml-5';
} else {
categoryColumn.className = 'col mx-1';
}
categoryLink.value = data[i];
categoryLink.href = `${document.location}?by_tag=${categoryLink.value}`;
categoryLink.className = 'text-decoration-none';
categoryLink.textContent = data[i];
categoryLink.onclick = categoryClick;
categoryColumn.id = `categoryNumber${i}`;
categoriesRow.appendChild(categoryColumn);
categoryColumn.appendChild(categoryLink);
}
}
But then I do this, and don't see it anymore:
function showRecords(records, platform) {
let someDiv, wrapperDiv
wrapperDiv = document.getElementById('contentContainer');
someDiv = document.createElement('div');
someDiv.id = 'someDiv';
someDiv.className = 'col alert alert-warning';
someDiv.textContent = 'Senior pomidor';
wrapperDiv.appendChild(someDiv);
}
On the smartphone, I have Chrome 79, on the PC, Firefox 72 and Chromium last stable.