28172 sujets

CSS et mise en forme, CSS3

Bonjour,
j'utilise un plugin permettant d'afficher les notes de bas de page dans des infos bulles. (bigfoot.js) Lorque le texte de celles-ci est trop grand normalement une scrollbar apparaît.

Cela marche bien sur firefox et safari; Seulement dans chrome la barre reste invisible. On peut bien scroller avec la molette ou le trackpad; mais pas de scrollbarr affiché.

C'est très certainement une question css de position ou overflow mal écrite; mais je ne vois pas quoi. Si vous avez une idée ?

Vous pouvez voir le problème en ligne à cette adresse sur la première note:
http://test.cas-p.net/spip.php?article1

J'imagine que c'est
 <div class="bigfoot-footnote__wrapper" ></div>
ou
 <div class="bigfoot-footnote__content" ></div>
qui pose problème.

Actuellement leur css est:
.bigfoot-footnote__wrapper {
  position: relative;
  z-index: 14;
  width: 22em;
  display: inline-block;
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  overflow: hidden;
  margin: 0;
  background-color: #fafafa;
  border-radius: 0.5em;
  line-height: 0;
}

.bigfoot-footnote__content {
  position: relative;
  z-index: 8;
  display: inline-block;
  max-height: 15em;
  padding: 1.1em 1.3em 1.2em;
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #fafafa;
  border-radius: 0.5em;
  font-smoothing: subpixel-antialiased;
  line-height: normal;
}


Merci !
Modifié par casp (08 Apr 2017 - 15:16)