Me voila un exposé depuis quelques jours à un problème lorsque j'utilise jQCloud et bootstrap.
Mon contexte est le suivant:
Je suis actuellement en réalisation d'un projet de moteur de recherche, ce dernier est composé d'un systeme classique de recherche via mots-clés. Et un deuxième onglet est donc disponible, un onglet ou lorsque l'on clique dessus s'affiche normalement un nuage de mots, lorsque l'on clique sur un mot du nuage, cela lance une recherche sur le mot en question. Mon problème est que mon nuage de mots n'a pas un affichage normal, voila ce que j'obtiens:
Les mots sont empilés les uns sur les autres et je ne sais pas du tout pourquoi.
Voici le code source correspondant a cette page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Acceuil</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script type='text/javascript' charset='utf8' src='datatables/media/js/dataTables.bootstrap.min.js'></script>
<link rel='stylesheet' type='text/css' href='bootstrap/css/bootstrap.css'/>
<script type="text/javascript" src="bibliotheques/ajax.js"></script>
<script type='text/javascript' src ='bibliotheques/librairie.js'></script>
<link rel='stylesheet' type='text/css' href='datatables/media/css/dataTables.bootstrap.min.css'/>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>
<script type="text/javascript" charset="utf8" src="jquery/jquery-3.1.1.min.js"></script>
<script type='text/javascript' charset='utf8' src='jQCloud/jqcloud/jqcloud-1.0.4.js'></script>
<script>
var word_array = [
{text: "Lorem", weight: 15},
{text: "Ipsum", weight: 9, link: "http://jquery.com/"},
{text: "Dolor", weight: 6, html: {title: "I can haz any html attribute"}},
{text: "Sit", weight: 7},
{text: "Amet", weight: 5}
];
$(function() {
// When DOM is ready, select the container element and call the jQCloud method, passing the array of words as the first argument.
$("#sectionB").jQCloud(word_array);
});
var x = 1;
</script>
<style>
.jqcloud {
display: block; /* undo display:none */
height: 0; /* height:0 is also invisible */
overflow-y: hidden; /* no-overflow */
}
.modal.fade.in {
height: auto; /* let the content decide it */
}
</style>
</head>
<body>
<div class='container-fluid'>
<div class="bs-example">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#sectionA">Recherche mots clés</a></li>
<li><a data-toggle="tab" href="#sectionB">Nuage de mots</a></li>
</ul>
<div class="tab-content">
<div id="sectionA" class="tab-pane fade in active">
<div class='row'>
<p/>
</div>
<div class='container'>
<div class='row'>
<form method='GET' action='index.php' class='form-horizontal'>
<div class='form-group'>
<input type='text' id='recherche' class='form-control' name='recherche' placeholder='Rechercher' autocomplete='off'/>
<div class='row'>
<a style='cursor: pointer;'class='col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1'
onclick="
if(x == 1){
ajaxx('utilitaires/option.php','options')
x = 0;
}else{
x= 1;
ajaxx('utilitaires/option.php','options')
}">Plus d'options</a>
<div id='options'>
</div>
</div>
<input type='submit' class='btn btn-success btn-block' Value='Rechercher' />
</div>
</form>
</div>
</div>
</div>
<div id='sectionB' class="tab-pane fade jqcloud in" style='height: 100px; width: 500px;'>
Nuage de mots
</div>
</div>
</div>
</div>
Merci pour votre aide, je suis désespéré
- Edité par ErwanDSN 19 janvier 2017 à 14:46:25
Probleme JQCloud et Bootstrap
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
