Bonsoir,

J'essaye de creer un design d'une page dédié à un tchat en ligne.

Malheureusement, je n'arrive pas à empêcher les messages très courts de se positionner sur la même ligne.

Quelqu'un aurait une idée pour bloquer l espace restant à coté de chaque message ?

Voici mon code:

<style>
    .grid-container{
        display: grid;
        grid-template-columns: auto;
    }
    .left{
        max-width: 75%;
        margin-right: 25%;
        float: left;
        border-radius: 4px;
        padding: 1%;
        color: black;
        background-color: #e5f2ff;
    }
    .right{
        float: right;
        max-width: 75%;
        border-radius: 4px;
        margin-left: 25%;
        padding: 1%;
        color:white;
        background-color: #0084ff;
    }
    .btn-messenger{
        margin-left: 0.5%;
    }
</style>
<!-- Page Content -->
<div class="container">

    <h1 class="my-4">Conversation avec Monsieur X</h1>
    <div class="grid-container" style="border: 1px solid black; padding: 1%;">
        <div class="grid-item">
            <p class="left">A+</p><p class="right" style="display: block;">.</p>
            <p class="right">A+</p>
            <p class="left">L'extrait standard de Lorem Ipsum utilisé depuis le XVIè siècle est reproduit ci-dessous pour les curieux. Les sections 1.10.32 et 1.10.33 du "De Finibus Bonorum et Malorum" de Cicéron sont aussi reproduites dans leur version originale, accompagnée de la traduction anglaise de H. Rackham (1914).</p>
            <p class="right">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. </p>
        </div>
        <div class="grid-item">
            <div id="sender" style="display: flex; flex-wrap: nowrap;padding-top: 1%;" >
                <input type="text" style="width: 100%;" placeholder="Message..." value="">
                <button class="btn btn-primary btn-messenger">Envoyer</button>
            </div>
        </div>
    </div>
    <div class="row">

    </div>
    <!-- /.row -->
</div>

Merci d'avance à toute personne qui voudra bien m'aider 

-
Edité par bibiroro939 5 juin 2018 à 13:41:11

Bonsoir,

.grid-item p {
    min-width:51%;
}

?

philiga a écrit:

Bonsoir,

.grid-item p {
    min-width:51%;
}

?

Salut,

Le problème avec cette solution c'est que tous les messages prendront au minium 51% de large, donc les messages qui n'ont pas un contenu aussi "grand", vont prendre plus de largeur qu'ils n'en ont besoin et donc l'esthétique ne conviendra pas. (grand espace vide à droite du texte dans la bulle).

Peux-tu nous faire un screen du problème, j'ai essayé ton code, et aucun des messages ne se positionne sur la même ligne. A part ceux du même paragraphe.

Bonjour,

il faut que tu nettoies les flottants à chaque message. Donc avec un clear: both dans chaque classe - ou mieux, dans une classe commune à tes messages, où tu devrais d'ailleurs déplacer la majorité du code de tes .left et .right.

N.Parvedy a écrit:

Peux-tu nous faire un screen du problème, j'ai essayé ton code, et aucun des messages ne se positionne sur la même ligne. A part ceux du même paragraphe.

Bien sur voila un screenshot:

https://ibb.co/gKZZ3T

Lamecarlate a écrit:

Bonjour,

il faut que tu nettoies les flottants à chaque message. Donc avec un clear: both dans chaque classe - ou mieux, dans une classe commune à tes messages, où tu devrais d'ailleurs déplacer la majorité du code de tes .left et .right.

Excellent ! Je ne connaissais pas du tout cette propriété merci !

Mon problème est résolu 

-
Edité par bibiroro939 5 juin 2018 à 15:38:59

> Mon problème est résolu 

Dans ce cas, pense à marquer ton sujet comme tel, merci (tu as un bouton en haut à droite pour ça)