[Résolu] Problème CSS scroll bar avec les Cards Materialize par N°0 fix - page 1

Bonsoir,

mon problème se situe au niveau d'une Card, un élément du framework "materialize" (http://materializecss.com/cards.html).

En effet, j'ai réduit la taille du body avec les paramètres :

body{
  width : 60%;
  margin-left: 20%;
}

Le problème, c'est que lorsque je crée ma carte avec le code ci dessous, une barre de scroll apparaît si je sélectionne la dernière "section" de la Card (comme montré sur le screenshot ci-dessous). Merci d'avance !

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title><?=$title?></title>
<!--  <link rel="stylesheet" href="https://cdn.concisecss.com/concise.css">
--><link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">

  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
  <script>
      $(document).ready(function(e){
          $('.dropdown-button').dropdown();
      });
  </script>
  <link rel="stylesheet" href="<?php echo base_url()."/res/css/style.css"?>">
</head>
<body container>

<div class="col s12 m7" >

  <div class="card horizontal">
    <div class="card-image">
      <img class="profil" src="<?php echo base_url()."/res/empty.png"?>">
    </div>
    <div class="card-stacked">
      <?php
      foreach ($users as $user){
        echo  "<div class=\"card-content\">
        <p>Nom : $user->nom</p>
        </div>";
        echo  "<div class=\"card-content\">
        <p>Sport : $user->sport</p>
        </div>";
        echo  "<div class=\"card-content\">
        <p>Ville : $user->ville</p>
        </div>";
        echo  "<div class=\"card-content\">
        <p>Description : $user->description</p>
        </div>";
        echo  "<div class=\"card-content\">
        <p>Mixité : $user->mixité</p>
        </div>";

      }
      ?>
      <div class="card-tabs">
        <ul class="tabs tabs-fixed-width">
          <?php if(!$membre)
            echo  '<li class="tab"><a class="active" href="#test4">Rejoindre l\'équipe</a></li>';
            else{
              echo '
              <li class="tab"><a class="active" href="#test5">Membres</a></li>
              <li class="tab"><a href="#test6">Entraineurs</a></li>';

            }

           ?>

             </ul>
      </div>

      <div class="card-content grey lighten-4">

          <?php echo validation_errors();
            if(!$membre){
              echo '<div id="test4">';
              echo '<br \ />';
              echo '<div class="row" >';
                $attributes = array('class' => 'col s12' , 'method'=>'POST');
                echo form_open("", $attributes);

                echo '  <div class="row">
                    <div class="input-field col s12">
                      <input name="passwordInscription" type="password" class="validate">
                      <label >Mot de passe de l\'équipe</label>
                    </div>
                  </div>

                    <input type="submit" value="Valider"><br /><br />
                </form>
                </div></div>';
            } else {
              echo '<div id="test5">';
              $this->table->set_heading(array('Nom', 'Prenom', 'Login','Id',''));

              $template = array(
                'table_open' => '<table class="centered">'
              );

              $this->table->set_template($template);
              if(!isset($displayingTeam) && count($liste) != 0 && !isset($entraineur)){
                foreach ($liste as $membre){
                  $this->table->add_row(
                    $membre->nom,
                    $membre->prenom,
                    $membre->login,
                    $membre->id,
                    array(
                        'data'=>anchor('Equipe/ajouterUnMembreDansEquipe/'.$nomEquipe.'/'.$membre->id,
                        '<i class="fa fa-times">Ajouter à l\'équipe</i>')
                    )
                  );
                }
              } else if(count($liste) != 0 && isset($entraineur)){
                foreach ($liste as $membre){
                  $this->table->add_row(
                    $membre->nom,
                    $membre->prenom,
                    $membre->login,
                    $membre->id,
                    array(
                        'data'=>anchor('Equipe/ajouterUnEntraineurDansEquipe/'.$nomEquipe.'/'.$membre->id,
                        '<i class="fa fa-times">Désigner comme entraineur</i>')
                    )
                  );
                }
              } else {
                foreach ($liste as $membre){
                  $this->table->add_row(
                    $membre->nom,
                    $membre->prenom,
                    $membre->login,
                    $membre->id
                  );
                }
              }

              echo $this->table->generate();

            echo '</div>';
            echo '<div id="test6">';

                  $this->table->set_heading(array('Nom', 'Prenom', 'Login','Id',''));

                  $template = array(
                    'table_open' => '<table class="centered">'
                  );

                  $this->table->set_template($template);
                  if(!isset($displayingTeam) && count($liste) != 0 && !isset($entraineur)){
                    foreach ($entraineurs as $membre){
                      $this->table->add_row(
                        $membre->nom,
                        $membre->prenom,
                        $membre->login,
                        $membre->id,
                        array(
                            'data'=>anchor('Equipe/ajouterUnMembreDansEquipe/'.$nomEquipe.'/'.$membre->id,
                            '<i class="fa fa-times">Ajouter à l\'équipe</i>')
                        )
                      );
                    }
                  } else if(count($entraineurs) != 0 && isset($entraineur)){
                    foreach ($entraineurs as $membre){
                      $this->table->add_row(
                        $membre->nom,
                        $membre->prenom,
                        $membre->login,
                        $membre->id,
                        array(
                            'data'=>anchor('Equipe/ajouterUnEntraineurDansEquipe/'.$nomEquipe.'/'.$membre->id,
                            '<i class="fa fa-times">Désigner comme entraineur</i>')
                        )
                      );
                    }
                  } else {
                    foreach ($entraineurs as $membre){
                      $this->table->add_row(
                        $membre->nom,
                        $membre->prenom,
                        $membre->login,
                        $membre->id
                      );
                    }
                  }

                  echo $this->table->generate();
                  echo '</div>';

                }

           ?>

    </div>
    </div>
  </div>
</div>
<br /> <br />

<script>
$("#anchor").click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 500);
    return false;
});
</script>

</body>
</html>

-
Edité par N°0 fix 15 juin 2017 à 22:49:04

Bonjour et merci pour la réponse

J'avais fait mes recherches de mon côté, et donc j'avais déjà essayé de mettre la barre en hidden, mais sans succès.

Voila le code sous JSFiddle :

https://jsfiddle.net/v4zoa1nh/

Alors : la barre ne s'affiche pas si la taille de la fenetre (en hauteur) est assez faible.

On peut le voir sur la page du JSfiddle, tant qu'on n'augmente pas la taille du rendu tout se passe bien, si on augmente la hauteur la barre apparaît...

Une idée de l'origine du problème?

EDIT :

J'ai rajouté :

.tabs{

overflow:hidden;

background-color:red;

}

sur le fiddle, et en effet la zone avec Entraineur et Membre devient rouge, et la barre n’apparaît plus, comme voulu.

Cependant, dans mon code, mon css est un fichier que j'inclus au html (logique).

Lorsque je rajoute ces lignes dans mon css (qui vient s'ajouter après toutes les autres inclusions), le .tabs n'a pas l'air d'être reconnu : la barre est toujours la et la zone n'est pas rouge. Problème d'include donc?

EDIT2: Problème réglé après avoir réparé mes inclusions de css. Merci quand même

-
Edité par N°0 fix 17 juin 2017 à 10:50:43

Problème CSS scroll bar avec les Cards Materialize

Problème CSS scroll bar avec les Cards Materialize

Supprimer

Modérer

Signaler le message aux modérateurs