【问题标题】:Prevent Bootstrap .table-responsive style from cropping a tooltip我正面临问题引导表响应
【发布时间】:2019-09-23 19:31:25
【问题描述】:

我在响应引导表时遇到了一些问题。

我在这里尝试了一些代码https://codepen.io/arindamx01/pen/gJOqxK 我需要完整的工具提示可见。我试过没有.table-responsive 类。如果没有表格响应类,它运行良好我的意思是我可以通过按时悬停来查看工具提示。但是当我添加.table-responsive 时,我看不到整个工具提示。那张桌子上出现了一个长卷轴,我该怎么办……请帮忙。我的预期 ans 喜欢

【问题讨论】:

  • 什么弹出窗口?,你能补充更多细节
  • 对不起,我犯了一个错误,这是一个工具提示,请将鼠标悬停在时间部分。
  • 检查我的答案,它现在正在工作
  • 为什么这个问题被否决了谁能告诉我

标签: javascript html css twitter-bootstrap-3 responsive-design


【解决方案1】:

把下面的css改成relative改成absolute

.tooltipItem_dist {
    position: absolute;
}

https://codepen.io/kashmiriguide/pen/gJOyjW

【讨论】:

  • 感谢@learning。你能告诉为什么它拒绝了这个问题
  • 我没有否决其他人可能提出的问题,有些用户投了反对票,但不幸的是,我没有给出任何反对的理由.....
【解决方案2】:

您可以简单地使用引导程序.table-responsive{-sm|-md|-lg|-xl} breakpoint specific

【讨论】:

  • 我已经知道了,但根据这项工作,我需要自定义 css 中的一些东西
  • hmm...我认为这是最好的方式,因为您使用的是引导程序,如果您想要额外的自定义,您可以创建另一个自定义类并将其简单地附加到元素的类
【解决方案3】:

请查看以下解决方案,相应地更新您的 css。

.table-responsive { overflow-x: visible }
@media screen and (max-width: 767px) { 
.table-responsive { overflow-y: visible }
}

【讨论】:

    【解决方案4】:

    “问题”(注意引号)是通过在包装器<div> 中使用.table-responsive 会改变它的默认overflow 行为。 因此,当您的工具提示出现时,它会在您的 <div class="table-responsive"> 包装器中获得 trap。 要解决这个问题,只需将overflow: visible; 设置为它。

    关于可能的影响,您将失去在移动设备上水平滚动的能力,在这种情况下,您可以编写媒体查询来恢复移动设备上的功能,因为无论如何您都不需要在移动设备上使用tooltip

    https://codepen.io/jose-guzman-ojeda/pen/wbvZEp

    【讨论】:

      【解决方案5】:

      试试这些解决方案

      方法一:

      .tooltipItem_dist{
        position: absolute;
      }
      

      它将与 HTML 元素(页面本身)直接相关。

      使用绝对定位时要记住的重要一点是确保它没有被过度使用,否则可能会导致维护噩梦。

      方法二:

      .table-responsive{
        overflow: visible;
      }
      

      我会选择方法2。

      【讨论】:

        【解决方案6】:

        你有没有尝试添加元视口?

        <meta name="viewport" content= "width=device-width, initial-scale=1.0"> 
        

        【讨论】:

        • 是的,我已经添加了。当我使用表格响应时,请查看我的工具提示隐藏。
        【解决方案7】:

        .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;
        }
        <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>&nbsp;</th>
                            <th>&nbsp;</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>

        【讨论】:

        • edited answer..take ans 在代码笔中运行相同的代码,它将根据您的要求工作..在 stackoverflow 控制台中它显示滚动条但不会显示。只需尝试上述解决方案
        猜你喜欢
        • 2020-07-06
        • 1970-01-01
        • 1970-01-01
        • 2017-05-31
        • 2016-05-25
        • 1970-01-01
        • 2017-04-16
        • 2016-12-06
        • 1970-01-01
        相关资源
        最近更新 更多