Comment append un saut de ligne dans les info-bulles J’ai implémenté l’info-bulle mais je ne suis pas en mesure d’append des sauts de ligne ou des sauts de ligne dans tooltip. Voici mon code
http://codepen.io/apps4any/pen/RWQLyr
Html
List1
List2
List3
List4
CSS:
.tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button, .tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button:hover { box-shadow: none; border: none; transform: none; -webkit-transform: none; } .tooltipdemoBasicUsage .left { top: 70px !important; left: 56px !important; } .tooltipdemoBasicUsage .right { top: 70px !important; right: 56px !important; }
JS
angular.module('MyApp') .controller('AppCtrl', function($scope) { $scope.demo = {}; });
L’ajout de ce CSS semble fonctionner dans votre cas (avec le
s):
md-tooltip .md-content { height: auto; }
Je ne sais pas pourquoi Angular-Material a codé en dur la hauteur à 22px. Vous devrez vérifier si cette modification rompt les autres info-bulles.
Ou vous pouvez l’appliquer spécifiquement à ce cas d’utilisation en lui donnant une classe, par exemple tt-multiline
, pour pouvoir la cibler en CSS:
md-tooltip.tt-multiline .md-content { height: auto; }
Edit: À partir de Angular-Material 1.1, certains noms de classes ont été modifiés pour commencer par un trait de soulignement.
Dans ce cas, utilisez
md-tooltip ._md-content { height: auto; }
et pour une classe spécifique
md-tooltip.tt-multiline ._md-content { height: auto; }
Depuis la version de matériau angular> 1.1.2, vous pouvez simplement remplacer la classe .md-tooltip
:
( JsFiddle )
.md-tooltip { height: auto; }
Et si vous voulez styliser une info-bulle particulière, ajoutez une classe personnalisée à l’élément md-tooltip
:
( jsFiddle )
HTML
I'm a multiline
tooltip
CSS
.tooltip-multiline { height: auto; }
les deux cas testés dans les versions à matériaux angulars 1.1.2, 1.1.3 et 1.1.4
Vous pouvez voir le style de md-tooltip (v0.11.4) ici: https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.css
Mes propres réécrit le style de conception matérielle pour permettre des infobulles multi-lignes agréables:
md-tooltip { font-family: Roboto, 'Helvetica Neue', sans-serif; .md-background { border-radius: inherit; } .md-content { height: auto; width: 400px; max-width: 400px; padding: 8px; white-space: initial; } } @media screen and (min-width: 600px) { md-tooltip .md-content { font-size: 14px; height: auto; width: 300px; padding: 8px; max-width: 300px; } }
C’est ce que j’ai fait. Maintenant, il va faire des sauts de ligne automatiques ou y placer un
. Définissez le max-with
ci-dessous à ce dont vous avez besoin.
md-tooltip .md-content { height: auto !important; max-width: 200px !important; font-size: 13px !important; } md-tooltip { height: auto !important; max-width: 200px !important; font-size: 13px !important; overflow: visible !important; white-space: normal !important; } md-tooltip ._md-content { height: auto !important; max-width: 200px !important; font-size: 13px !important; }
Ou vous pouvez utiliser white-space: pre-line;
dans la classe personnalisée de votre info-bulle md. 🙂