Je rencontre un problème avec la réactivité de la table bootstrap.
7 Réponses :
Vous pouvez simplement utiliser bootstrap .table-responsive{-sm|-md|-lg|-xl} breakpoint specific :
Je le sais déjà mais j'ai besoin de quelque chose en CSS personnalisé en fonction de ce travail
hmm ... Je pense que c'est le meilleur moyen puisque vous utilisez bootstrap, si vous voulez une personnalisation supplémentaire, vous pouvez créer une autre classe personnalisée et l'ajouter simplement à la classe de l'élément
Avez-vous essayé d'ajouter une méta-fenêtre?
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
oui je l'ai déjà ajouté. s'il vous plaît voir mon info-bulle masquée lorsque j'utilise table responsive.
<div class="table table-striped table-bordered dt-responsive nowrap">
<table class="table table-hover noMargin arUinqueteable">
<thead>
<tr>
<th>POS</th>
<th>NAME</th>
<th>AV PACE</th>
<th>TIME</th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody class="results_section">
<tr class="resultTotalTr "> <!--log_user_active-->
<td class="blue">1</td>
<td class="blue">Subha Dev <!--1--><!--Limpopo--></td>
<td class="blue">00:07:23</td>
<td class="black tooltipItem_dist">04:04:04
<div class="tooltipItem">
<ul>
<li><span>SWIM</span> 04:23:04</li>
<li><span>T1</span> sdfsdf</li>
<li><span>BIKE</span></li>
<li><span>T2</span></li>
<li><span>RUN</span></li>
<li><span>TOTAL</span></li>
</ul>
</div>
</td>
<td><!--<span>PB</span>--></td>
<td><!--<i class="fa fa-check-circle-o"></i>--></td>
</tr>
<tr class="resultTotalTr "> <!--log_user_active-->
<td class="blue">2</td>
<td class="blue">Subha Dev <!--1--><!--Limpopo--></td>
<td class="blue">00:09:43</td>
<td class="black tooltipItem_dist">05:21:01
<div class="tooltipItem">
<ul>
<li><span>SWIM</span> 04:23:04</li>
<li><span>T1</span> sdfsdf</li>
<li><span>BIKE</span></li>
<li><span>T2</span></li>
<li><span>RUN</span></li>
<li><span>TOTAL</span></li>
</ul>
</div>
</td>
<td><!--<span>PB</span>--></td>
<td><!--<i class="fa fa-check-circle-o"></i>--></td>
</tr>
<tr class="resultTotalTr "> <!--log_user_active-->
<td class="blue">3</td>
<td class="blue">Subha Dev <!--1--><!--Limpopo--></td>
<td class="blue">00:18:56</td>
<td class="black tooltipItem_dist">10:25:01
<div class="tooltipItem">
<ul>
<li><span>SWIM</span> 04:23:04</li>
<li><span>T1</span> sdfsdf</li>
<li><span>BIKE</span></li>
<li><span>T2</span></li>
<li><span>RUN</span></li>
<li><span>TOTAL</span></li>
</ul>
</div>
</td>
<td><!--<span>PB</span>--></td>
<td><!--<i class="fa fa-check-circle-o"></i>--></td>
</tr>
</tbody>
</table>
</div>
.tooltipItem_dist:hover .tooltipItem {
visibility: visible;
opacity: 1;
}
.tooltipItem_dist{
position: relative;
}
.tooltipItem_dist .tooltipItem {
top: 100%;
}
.tooltipItem {
color: #fff;
position: absolute;
top: calc(100% - 30px);
width: 160px;
background: #333;
z-index: 1;
text-align: center;
padding: 10px;
border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
left: 50%;
transform: translate(-50% , 0);
-moz-transform: translate(-50% , 0);
-webkit-transform: translate(-50% , 0);
opacity: 0;
visibility: hidden;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
réponse éditée..prendre et exécuter le même code dans le stylet de code cela fonctionnera selon vos besoins..dans la console stackoverflow, il affiche la barre de défilement mais là, il ne sera pas montré.essayez simplement avec la solution ci-dessus
Remplacez le css suivant par relatif par absolute
.tooltipItem_dist {
position: absolute;
}
merci @learning. pouvez-vous s'il vous plaît dire pourquoi la question a été rejetée
Je n'ai pas voté contre votre question que quelqu'un d'autre pourrait avoir, certains utilisateurs ont voté contre mais ne donne aucune raison de voter contre, malheureusement .....
Veuillez jeter un œil à la solution ci-dessous pour mettre à jour votre css en conséquence.
.table-responsive { overflow-x: visible }
@media screen and (max-width: 767px) {
.table-responsive { overflow-y: visible }
}
Le "problème" (notez la citation) est qu'en utilisant À propos des implications possibles, eh bien vous perdrez la possibilité de faire défiler horizontalement sur mobile, dans ce cas, vous pouvez écrire une requête multimédia pour restaurer la fonctionnalité sur les appareils mobiles, car vous n'aurez pas besoin de l ' .table-responsive dans votre wrapper change sa valeur par défaut Comportement de
débordement .
Ainsi, lorsque votre info-bulle apparaît, elle reçoit trap dans votre wrapper .
Pour résoudre ce problème, définissez simplement le
overflow: visible; dessus.
info-bulle sur un mobile de toute façon.
0 commentaires
Essayez ces solutions
Méthode 1:
.table-responsive{
overflow: visible;
}
Elle sera positionnée directement en relation avec l'élément HTML (la page elle-même).
Une chose importante à garder à l'esprit lors de l'utilisation du positionnement absolu est de s'assurer qu'il n'est pas surutilisé, sinon cela peut conduire à un cauchemar de maintenance.
Méthode 2:
.tooltipItem_dist{
position: absolute;
}
What Popup ?, pouvez-vous ajouter plus de détails
désolé j'ai fait une erreur c'est une info-bulle s'il vous plaît survoler la section de temps.
Vérifiez ma réponse, cela fonctionne maintenant
pourquoi cette question est rejetée, quelqu'un peut-il me dire