Problèmes d'affichages Adonisjs/Bulmacss

Le problème exposé dans ce sujet a été résolu.

Bonjour,

J’ai deux problèmes avec bulma, les voici :

1) Sur le screen ci-dessous, il y a un bouton pour scroller et je n’ai pas vraiment envie que ça apparaisse, de plus à cause de ça je ne peux pas voir tout le titre et toute l’icône, c’est assez problématique.

Image utilisateur
Image utilisateur

2) Lorsque plusieurs topics ont été créés, les bordures de la box de n’affiche pas sauf pour le premier, c’est assez problématique et ça fait moche.

Image utilisateur
Image utilisateur

Voici le fichier .edge: 

@layout('master')

@section('content')

@if(flashMessage('notification'))

<div class="row">
  <div class="col-ld-12">
    <div class="alert alert-success">Le topic a été créé avec succès !</div>
  </div>
</div>
@endif

<br>
<br>
<br>

<div>

  <div class="compose has-text-centered">
     <a class="button is-danger is-block is-bold">
     <span class="compose">Actualités</span>
     </a>
  </div>
  <br>
</div>

<div class="card" style="width: 100%;margin-top: -1.3%;">
  @each(topic in topics)
  <div class="card-content">
    <div class="media">
      <div class="media-left">
      </div>
      <div class="media-content">
          <i class="fas fa-comment-alt fa-4x"></i>
      <p class="title is-4" style="margin-left: 6%; margin-top: -5%;">{{ topic.title }}</p>
      </div>
    </div>

    <div class="content">
      {{ topic.body }}
      <br>
    </div>

  </div>

</div>
<br>
<br>
  @endeach


@endsection

PS: Je tiens à préciser que les balises styles, je les utilise uniquement pour faire des tests, je sais bel et bien que c’est déconseillé et je ferai un dossier css lorsque j’aurais trouvé la solution :p.

Merci de votre aide !

Bonne soirée !

+0 -0

Pour le problème 1, c’est que dans les nouvelles version de Bulma, ils ont mis un overflow sur la classe media-content. J’ai rencontré ce problème sur un projet sur lequel je boss. La solution que j’ai trouvé est de surchargé cette classe en lui disant de ne pas mettre d’overflow.

Pour le 2, je ne connais pas Adonisjs, mais il semblerait que ton @endeach soit mal placé.

Voilà, en espérant que cela puisse te débloquer.

+0 -0

Problèmes résolus !

@layout('master')

@section('content')

@if(flashMessage('notification'))

<div class="row">
  <div class="col-ld-12">
    <div class="alert alert-success">Le topic a été créé avec succès !</div>
  </div>
</div>
@endif

<br>
<br>
<br>

<div>

  <div class="compose has-text-centered">
     <a class="button is-danger is-block is-bold">
     <span class="compose">Actualités</span>
     </a>
  </div>
  <br>
</div>

@each(topic in topics)

<div class="card" style="width: 100%;">
  <div class="card-content">
    <div class="media">
      <div class="media-left">
      </div>
      <div class="media-content">
          <i class="fas fa-comment-alt fa-lg"></i>
      <a href="/topic/{{ topic.id }}"><p class="title is-4" style="margin-left: 3%; overflow-y: hidden; margin-top: -2%;">{{ topic.title }}</p></a>
      </div>
    </div>

    <div class="content">
      {{ topic.body }}
      <br>
      
    </div>
  </div>
</div>



  @endeach


@endsection

Pour le problème n°1, j 'avais d’abord fait des tests en mettant overflow-y: hidden;, ça marchait, on voyait plus la chose qui était gênante que j’ai entourée sur le screen (je sais pas comment ça s’appelle) mais en fait le problème était que l’image était trop grosse, je l’ai donc rétrécie et ça a résolu ce problème.

Pour le problème n°2, c’était mon @each(topic in topics) qui était mal placé.

Merci pour votre aide !

Résolu !

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte