[CSS] Gestion des retours à la ligne dans les balises <ul> et <li>

[Xav-74]

Hello à tous !

J’ai besoin de faire appel à des spécialistes du CSS
Je m’arrache en effet les cheveux sur mon widget.

Comme une image vaut mieux qu’une explication :

Pour résumer j’affiche les messages de la voiture en utilisant des balises <ul> et <li>
Mon problème est que si le texte dépasse la largeur fixée de mes <li>, le texte ne revient pas à la ligne auto
Et là j’avoue que je sèche ! Donc si

Voici le code php utilisé :

<div class="row" id="messages">
	<span class="label cmdName" style="font-weight: bold">Messages</span><span class="nb_message#id#"></span>
	<div id="liste_msg" class="label Cmd#vehicleMessages_id# table_message#id#"></div>
</div>

le script :

jeedom.cmd.update['#vehicleMessages_id#'] = function(_options) {
  	var messages = jQuery.parseJSON(_options.display_value);
	var table_html= "";
	$('.nb_message#id#').empty().append('<span>'+'('+Object.keys(messages).length+')'+'</span>');
			
	table_html += '<ul class="list-group" style="text-align: left">';
	jQuery.each(messages,function(key,message){
		table_html += '<li class="list-group-item" style="margin-bottom: 10px"><span class="label cmdName">'+message.date+'  -  '+message.criticalness+'</span><br/><span class="label cmdName">'+message.title+'</span><br/><span class="label cmdName">'+message.description+'</span></li>'
	});
	table_html += '</ul>';
	$('.table_message#id#').empty().append(table_html);
}
jeedom.cmd.update['#vehicleMessages_id#']({display_value:'#vehicleMessages#'});

et le CSS :

.myBMW_widget #messages {
	margin : 10px 23px 10px 23px;
}
	
.myBMW_widget #liste_msg {
	width: 380px;
	height: 255px;
	overflow: auto;
}

Merci d’avance

Xav

[pifou]

Bonjour
c’est sans doute le width: 380px qui est trop grand non ? Si tu l’enlève, ou bien au pire tu le met à 100% ça donne quoi ?

[Phpvarious]

Bonsoir,
Je soupçonne la class « label » (desktop.main.css) du span, celui-ci contient le style « white-space: nowrap; »
Pour contrer il faudrait rajouter une class css comme ceci :

.myBMW_widget #messages span {   
    white-space: normal;
    text-align: left;
    }

Bonne soirée.

[Xav-74]

Merci infiniment @Phpvarious
C’est bien la class Label de mon span qui était à l’origine du non retour à la ligne !

Xav