Problèmes d'overflow et de responsivité par Otakin - page 1

Bonjour, j'ai un problème avec l'overflow-x de mes blocs.

Actuellement, voici ce que cela fait :

https://i.imgur.com/3MxlM27.gif

Je souhaite que mon bloc "Objets utiles" ne se casse pas lorsque la taille de l'écran se réduit. Toutefois, j'aimerais que l'overflow-x automatique se déclenche pour le bloc en général et non pas uniquement pour ce qu'il contient à l'intérieur.

Voici mon code responsable de l'affichage (ne prêtez pas attention aux classes en polonais et à la structure sous forme de table, qui n'est pas adaptée pour du responsive design, mais je n'ai pas le choix, l'ensemble du site est conçu de cette manière) :

<div class='oknoNT' style='max-width: 620px;width: 100%;display:inline-block;margin-bottom:20px;'>
    <div class="tytul lang" key="arenaT4">&nbsp;</div>
    <div class='ramka'>
        <div class='dane'>
            <div class='zawartosc'
                style='overflow-x: auto; position:relative; margin:10px 1% 10px 1%; color:#FFF; width:98%; display:inline-block'>
                <table id="tabUzyteczneRzeczy" width="100%" style="border-spacing: 10px 30px;">
                </table>
            </div>
        </div>
    </div>
</div>

    function uzyteczneRzeczy() {
        document.getElementById("tabUzyteczneRzeczy").innerHTML = "";

        for (r = 0; r < tabUzyteczne.length; r++) {
            var linia = "<tr>";
            linia += "<td><div class='divEQIkona infoSkad' skadID='" + tabUzyteczne[r][5] + "'><img src='/images/" +
                tabUzyteczne[r][0] + ".png'/></div></td>";
            linia += "<td style='color:#FB8'>" + tabUzyteczne[r][1] + "</td>";
            linia += "<td style='text-align: left; padding-left: 20px;'>" + tabUzyteczne[r][2] + "<img src='/images/" + tabUzyteczne[r][3] + ".png'/>" +
                tabUzyteczne[r][4] + "</td>";
            linia += "</tr>";
            document.getElementById("tabUzyteczneRzeczy").innerHTML += linia;
        }
    }

    document.addEventListener("DOMContentLoaded", function() {
        uzyteczneRzeczy();

Si je retire le "overflow-x: auto;" de la classe "zawartosc" et que je remplace le "max-width: 620px; width: 100%;" par "width: 650px; overflow-x: auto" dans la classe "oknoNT", cela produit presque le comportement que je souhaite. Cependant, à l'exception près que la barre de défilement ne s'affiche pas.

https://i.imgur.com/MPrvEfB.gif

Et cela pose un problème, car lorsque mes éléments se cassent, cela devient illisible. De plus, il y a d'autres blocs de code encore plus compliqués, avec des éléments positionnés en absolu, rendant ainsi impossible l'adaptation du code sans tout refaire depuis le début. C'est pourquoi, pour les petits écrans, si les blocs en table pouvaient ne pas se casser et simplement défiler, cela me soulagerait énormément.

https://imgur.com/pn4Gvb0

Quant au nommage des classes, je prévois de tout traduire du polonais au français avec un script Python une fois mon site terminé ; pour l'instant, je laisse tel quel pour ne pas me mélanger les pinceaux.

Otakin

18 avril 2024 à 16:11:28