Rendre responsive un bloc

Sujet résolu

18 octobre 2021 à 12:51:55

Bonjour, je voudrais savoir si c'est possible de rendre le responsive, car avec les labels c'est pas évident qu'ils restent bien à coter, je n'ai pas trouvé de solution, peut-être en avez-vous une?

Et aussi savoir pourquoi, les inputs sortent du bloc en bas ? Au fait je sais, c'est à cause du wrap mais pourquoi ?

Et si c'est pas possible, quelle solution s'offre à moi svp ?

Merci

Code:

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>debut html</title>
        <link rel="stylesheet" href="./test-ocr.css">
        <style>

        </style>
    </head>

    <body style="background:wheat">
        <section>
            <h1>code</h1>
            <div id="container" class="flex_row">
                <div id="input_user" class="flex_row j_around">
                    <div id="consign_top" class="consign flex_row j_around">
                        <label class="label_consigne">0</label>
                        <label class="label_consigne">0</label>
                        <label class="label_consigne">0</label>
                        <label class="label_consigne">0</label>
                    </div>
                    <div id="consign_right" class="consign flex_row j_around">
                        <label class="label_consigne">0</label>
                        <label class="label_consigne">0</label>
                        <label class="label_consigne">0</label>
                        <label class="label_consigne">0</label>
                    </div>
                    <div id="consign_bottom" class="consign flex_row j_around">
                        <label class="label_consigne">0</label>
                        <label class="label_consigne">0</label>
                        <label class="label_consigne">0</label>
                        <label class="label_consigne">0</label>
                    </div>
                    <div id="consign_left" class="consign flex_row j_around">
                        <label class="label_consigne">0</label>
                        <label class="label_consigne">0</label>
                        <label class="label_consigne">0</label>
                        <label class="label_consigne">0</label>
                    </div>
                    
                    <input type="text" maxlength="1">
                    <input type="text" maxlength="1">
                    <input type="text" maxlength="1">
                    <input type="text" maxlength="1">
                    <input type="text" maxlength="1">
                    <input type="text" maxlength="1">
                    <input type="text" maxlength="1">
                    <input type="text" maxlength="1">
                    <input type="text" maxlength="1">
                    <input type="text" maxlength="1">
                    <input type="text" maxlength="1">
                    <input type="text" maxlength="1">
                    <input type="text" maxlength="1">
                    <input type="text" maxlength="1">
                    <input type="text" maxlength="1">
                    <input type="text" maxlength="1">
                </div>
            </div>
            <nav>
                <button id="btnTest">Test</button>
                <button id="btnMap">New map</button>
                <button id="btnSolution">Avoir la réponse</button>
            </nav>
            <p id="isGood"></p>
            </section>
    </body>
</html>

section{
    width: 20%;
    margin: auto;
}
/* utils */
.flex_row{
    display: flex;
    flex-flow: wrap row;
}

.flex_column{
    display: flex;
    flex-flow: wrap column;
}

.j_between{
    justify-content: space-between;
}

.j_around{
    justify-content: space-around;
}
/* end utils */

#container{
    width: 70%;
    border: 1px solid black;
    margin: auto;
    position: relative;
}


#container #input_user{
    width: 100%;
}

#container #input_user input{
    width: 15%;
    height: 20%;
    margin: 5px;
    text-align: center;
    border: 1px solid green;
}

#container #input_user > div.consign{
    position: absolute;
}

#container #consign_top, #container #consign_bottom{
    width: 100%;
    left: 0px;
    text-align: center;
}

#container #consign_bottom{
   bottom: -20px;
}

#container #consign_top{
    top: -20px;
}

#container #consign_left, #container #consign_right{
    height: 100%;
    top: 0px;
    text-align: center;
    flex-flow: wrap column;
}

#container #consign_right{
    right: -25px;
}

#container #consign_left{
    left: -25px;
}

/* label */
#container div.consign label{
    background-color: rgb(117, 182, 117);
    padding: 2px;
    height: 15px;
    width: 15px;
    border-radius: 3px;
    line-height: 15px;
}

/* p: réponse */
#isGood{
    margin: auto;
    text-align: center;
}

-
Edité par AlexisW09 18 octobre 2021 à 12:52:38

ChrisLebure

18 octobre 2021 à 14:02:47

Bonjour,

pour un planing hebdomadaire, j'ai rencontré le problème

je suis parti de la version mobile : deux tableaux superposés, indépendants donc, chacun avec 1ère colonne contenant la légende (ici c'était les heures), et en version desktop, ces deux tableaux sont côte à côte, avec la colonne des légendes masquée pour le tableau de droite

donc des colonnes en version smartphone :

tableau un : heures lundi mardi mercredi
tableau deux : heures jeudi vendredi samedi

en version desktop ça donne :

heures lundi mardi mercredi [heures] jeudi vendredi samedi

Le contenant et les deux tableaux en flexbox pour une mise en page propre

C'est une solution simple, légère et efficace

AlexisW09

18 octobre 2021 à 22:48:14

ChrisLebure a écrit:

Bonjour,

pour un planing hebdomadaire, j'ai rencontré le problème

je suis parti de la version mobile : deux tableaux superposés, indépendants donc, chacun avec 1ère colonne contenant la légende (ici c'était les heures), et en version desktop, ces deux tableaux sont côte à côte, avec la colonne des légendes masquée pour le tableau de droite

donc des colonnes en version smartphone :

tableau un : heures lundi mardi mercredi
tableau deux : heures jeudi vendredi samedi

en version desktop ça donne :

heures lundi mardi mercredi [heures] jeudi vendredi samedi

Le contenant et les deux tableaux en flexbox pour une mise en page propre

C'est une solution simple, légère et efficace

Bonjour, merci pour votre retour,

pensez vous qu'il serait possible d'avoir une photo du rendu ? Car je n'ai pas totalement compris merci

ChrisLebure

19 octobre 2021 à 7:34:44

ok voici la version desktop, tableau complet :

et la version smartphone, deux copies d'écran, deux tableaux l'un au dessous de l'autre :

et la deuxième copie d'écran :

-
Edité par ChrisLebure 19 octobre 2021 à 7:36:08

AlexisW09

23 octobre 2021 à 22:11:51

Merci @ChrisLebure