Docz: Éléments cassés dans Playground

Créé le 1 juil. 2018  ·  3Commentaires  ·  Source: doczjs/docz

Rapport d'erreur

Décrivez le bogue
Lorsque j'ajoute un ensemble d'éléments plus grands que la largeur du terrain de jeu, cela casse l'élément

Reproduire
captura de tela 2018-07-01 as 15 39 10

Environnement

  • Système d'exploitation : macOS High Sierra 10.13.4
  • Version nœud/fil : 8.5.0/1.6.0
question

Commentaire le plus utile

C'est un effet sous-estimé de CSS, le problème réside dans le fait que vos balises a sont des éléments display: inline (navigateur par défaut).

Les liens sont coupés en deux car ils sont traités comme du texte normal, pas comme des éléments de niveau bloc.

Vous pouvez leur attribuer white-space: nowrap; , mais ils ne seront pas réactifs au fur et à mesure que l'écran se redimensionne. Par conséquent, l'utilisation de display: inline-block; devrait résoudre le problème et en faire de véritables liens de niveau bloc.

J'espère que c'est ce que vous cherchez

image

Tous les 3 commentaires

Salut @nicholasess , merci pour le retour.

Je le déboguais ici et tout semble aller bien avec l'exemple.

Pourriez-vous s'il vous plaît fournir un exemple de code ou de référentiel pour ce bogue, s'il vous plaît ?

@marceloavf Oui, c'est le référentiel que j'ai créé.
https://github.com/nicolasess/docz-example/blob/master/src/components/Button.mdx#L21

C'est un effet sous-estimé de CSS, le problème réside dans le fait que vos balises a sont des éléments display: inline (navigateur par défaut).

Les liens sont coupés en deux car ils sont traités comme du texte normal, pas comme des éléments de niveau bloc.

Vous pouvez leur attribuer white-space: nowrap; , mais ils ne seront pas réactifs au fur et à mesure que l'écran se redimensionne. Par conséquent, l'utilisation de display: inline-block; devrait résoudre le problème et en faire de véritables liens de niveau bloc.

J'espère que c'est ce que vous cherchez

image

Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

regrettably picture regrettably  ·  3Commentaires

koddr picture koddr  ·  3Commentaires

brunolemos picture brunolemos  ·  3Commentaires

bichotll picture bichotll  ·  3Commentaires

wldcordeiro picture wldcordeiro  ·  3Commentaires