我在溢出容器内有一个响应表，如 uikit docs 中所述:
<div class="uk-overflow-container">
<table class="uk-table uk-table-striped uk-table-hover">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
</div>
在 tbody 每一行的最后一个 td 中，我有一些下拉按钮:
...
<td>...</td>
<td>
...
<div class="uk-button-dropdown"
data-uk-dropdown="{mode:'click', pos:'bottom-right'}">
<button class="uk-button">
<i class="uk-icon-angle-down"></i>
</button>
<div class="uk-dropdown uk-dropdown-close">
<ul class="uk-nav uk-nav-dropdown">
<li>...</li>
</ul>
</div>
</div>
</td>
在表格的末尾，下拉菜单被溢出容器截断了:
如您所见，下拉菜单使溢出容器垂直滚动，而在表格顶部，下拉菜单(或 dropup 可以这么说)只是被剪裁而没有滚动:
在只有一行或几行的表格中问题更大:
到目前为止，这是我尝试解决的问题:
1. 我尝试使用 boundary 选项，如 uikit docs 中所述(自动下拉翻页)
<div class="uk-overflow-container" id="fix-dropdowns">
...
<div class="uk-button-dropdown" data-uk-dropdown="{mode:'click', pos:'bottom-right', boundary:'#fix-dropdowns'}">
这应该会向上翻转较低的下拉菜单，但自动翻转仍然指的是视口(viewport)。
我什至将 id="fix-dropdowns" 放在不同的父元素中，例如 table 或 tbody
2. 我删除了 uk-overflow-container 类并将其替换为一些自己的 css。
<div style="overflow-x: scroll; overflow-y: visible;">
也不起作用。
解决方案？
上面的例子省略了一些细节但我准备了一个JSFiddle为您提供从我的元素中获取的确切代码。
最佳答案
根据 this post , 你不能使用 overflow-x: scroll; overflow-y: visible;，因为 visible 总是会变成 auto:
If you are using
visiblefor eitheroverflow-xoroverflow-yand something other thanvisiblefor the other. Thevisiblevalue is interpreted asauto.
如果这是一个选项，您可以将整个容器设置为overflow: visible;:
.container.uk-overflow-container {
overflow: visible;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/uikit.almost-flat.min.css" rel="stylesheet"/>
<br><br><br><br><br>
<div class="container uk-overflow-container bordered-container">
<table class="uk-table uk-table-striped uk-table-hover">
<thead>
<tr>
<th>Name</th>
<th class="uk-text-nowrap">Adressen</th>
<th class="uk-text-nowrap">Projekte</th>
<th class="uk-text-nowrap">Tickets</th>
<th class="uk-text-nowrap">Intern</th>
<th class="uk-text-nowrap">Cool</th>
<th class="uk-text-nowrap">Beschreibung</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Bechtelar, Bergnaum and King</td>
<td class="uk-text-nowrap"><b>Little Pike 605</b>
<br>352 Howemouth</td>
<td class="uk-text-nowrap"><a href="#" class="uk-text-muted">Lorem ipsum </a></td>
<td>
<div class="uk-button-group">2</div>
</td>
<td><i class="uk-icon-ban uk-text-danger"></i></td>
<td class="uk-text-nowrap"><i class="uk-icon-check uk-text-success"></i></td>
<td>Quia soluta numquam harum fuga distinctio cupiditate aperiam. Ipsum iure sequi necessitatibus volupt...</td>
<td class="uk-text-right">
<div class="uk-button-group">
<a href="#" class="uk-button uk-button-small uk-button-primary" data-uk-tooltip="">
<i class="uk-icon-eye"></i>
</a>
<div class="uk-button-dropdown" data-uk-dropdown="{mode:'click', pos:'bottom-right', boundary:'#fix-dropdowns'}" data-uk-tooltip="" aria-haspopup="true" aria-expanded="false">
<button class="uk-button uk-button-small uk-button-primary">
<i class="uk-icon-angle-down"></i>
</button>
<div class="uk-dropdown uk-dropdown-small uk-dropdown-close uk-dropdown-bottom" style="width: 250px; top: 25px; left: -221px;" aria-hidden="true" tabindex="">
<ul class="uk-nav uk-nav-dropdown uk-text-left">
<li class="uk-nav-header">Kontakt</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">2</span> <i class="uk-icon-map-marker"></i> Adressen
</a>
</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">4</span> <i class="uk-icon-user"></i> Ansprechpartner
</a>
</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">2</span> <i class="uk-icon-credit-card"></i> Kontoverbindungen
</a>
</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">0</span> <i class="uk-icon-key"></i> Zugänge
</a>
</li>
<li class="uk-nav-header">Projekte</li>
<li>
<a href="#">
<i class="uk-icon-university"></i> Projekte
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-check-circle-o"></i> Tickets
</a>
</li>
<li class="uk-nav-header">Buchhaltung</li>
<li>
<a href="#">
<i class="uk-icon-tag"></i> Angebote
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-edit"></i> Aufträge
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-euro"></i> Rechnungen
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-warning"></i> Mahnungen
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-plus-square"></i> Gutschriften
</a>
</li>
</ul>
</div>
</div>
<a href="#" class="uk-button uk-button-small uk-button-primary" data-uk-tooltip="" title="Bearbeiten">
<i class="uk-icon-pencil"></i>
</a>
<a href="#" class="uk-button uk-button-small uk-button-danger" data-uk-tooltip="" title="Löschen" data-uk-modal="">
<i class="uk-icon-trash"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Bechtelar, Bergnaum and King</td>
<td class="uk-text-nowrap"><b>Little Pike 605</b>
<br>352 Howemouth</td>
<td class="uk-text-nowrap"><a href="#" class="uk-text-muted">Lorem ipsum </a></td>
<td>
<div class="uk-button-group">2</div>
</td>
<td><i class="uk-icon-ban uk-text-danger"></i></td>
<td class="uk-text-nowrap"><i class="uk-icon-check uk-text-success"></i></td>
<td>Quia soluta numquam harum fuga distinctio cupiditate aperiam. Ipsum iure sequi necessitatibus volupt...</td>
<td class="uk-text-right">
<div class="uk-button-group">
<a href="#" class="uk-button uk-button-small uk-button-primary" data-uk-tooltip="">
<i class="uk-icon-eye"></i>
</a>
<div class="uk-button-dropdown" data-uk-dropdown="{mode:'click', pos:'bottom-right', boundary:'#fix-dropdowns'}" data-uk-tooltip="" aria-haspopup="true" aria-expanded="false">
<button class="uk-button uk-button-small uk-button-primary">
<i class="uk-icon-angle-down"></i>
</button>
<div class="uk-dropdown uk-dropdown-small uk-dropdown-close uk-dropdown-bottom" style="width: 250px; top: 25px; left: -221px;" aria-hidden="true" tabindex="">
<ul class="uk-nav uk-nav-dropdown uk-text-left">
<li class="uk-nav-header">Kontakt</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">2</span> <i class="uk-icon-map-marker"></i> Adressen
</a>
</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">4</span> <i class="uk-icon-user"></i> Ansprechpartner
</a>
</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">2</span> <i class="uk-icon-credit-card"></i> Kontoverbindungen
</a>
</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">0</span> <i class="uk-icon-key"></i> Zugänge
</a>
</li>
<li class="uk-nav-header">Projekte</li>
<li>
<a href="#">
<i class="uk-icon-university"></i> Projekte
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-check-circle-o"></i> Tickets
</a>
</li>
<li class="uk-nav-header">Buchhaltung</li>
<li>
<a href="#">
<i class="uk-icon-tag"></i> Angebote
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-edit"></i> Aufträge
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-euro"></i> Rechnungen
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-warning"></i> Mahnungen
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-plus-square"></i> Gutschriften
</a>
</li>
</ul>
</div>
</div>
<a href="#" class="uk-button uk-button-small uk-button-primary" data-uk-tooltip="" title="Bearbeiten">
<i class="uk-icon-pencil"></i>
</a>
<a href="#" class="uk-button uk-button-small uk-button-danger" data-uk-tooltip="" title="Löschen" data-uk-modal="">
<i class="uk-icon-trash"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Bechtelar, Bergnaum and King</td>
<td class="uk-text-nowrap"><b>Little Pike 605</b>
<br>352 Howemouth</td>
<td class="uk-text-nowrap"><a href="#" class="uk-text-muted">Lorem ipsum </a></td>
<td>
<div class="uk-button-group">2</div>
</td>
<td><i class="uk-icon-ban uk-text-danger"></i></td>
<td class="uk-text-nowrap"><i class="uk-icon-check uk-text-success"></i></td>
<td>Quia soluta numquam harum fuga distinctio cupiditate aperiam. Ipsum iure sequi necessitatibus volupt...</td>
<td class="uk-text-right">
<div class="uk-button-group">
<a href="#" class="uk-button uk-button-small uk-button-primary" data-uk-tooltip="">
<i class="uk-icon-eye"></i>
</a>
<div class="uk-button-dropdown" data-uk-dropdown="{mode:'click', pos:'bottom-right', boundary:'#fix-dropdowns'}" data-uk-tooltip="" aria-haspopup="true" aria-expanded="false">
<button class="uk-button uk-button-small uk-button-primary">
<i class="uk-icon-angle-down"></i>
</button>
<div class="uk-dropdown uk-dropdown-small uk-dropdown-close uk-dropdown-bottom" style="width: 250px; top: 25px; left: -221px;" aria-hidden="true" tabindex="">
<ul class="uk-nav uk-nav-dropdown uk-text-left">
<li class="uk-nav-header">Kontakt</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">2</span> <i class="uk-icon-map-marker"></i> Adressen
</a>
</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">4</span> <i class="uk-icon-user"></i> Ansprechpartner
</a>
</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">2</span> <i class="uk-icon-credit-card"></i> Kontoverbindungen
</a>
</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">0</span> <i class="uk-icon-key"></i> Zugänge
</a>
</li>
<li class="uk-nav-header">Projekte</li>
<li>
<a href="#">
<i class="uk-icon-university"></i> Projekte
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-check-circle-o"></i> Tickets
</a>
</li>
<li class="uk-nav-header">Buchhaltung</li>
<li>
<a href="#">
<i class="uk-icon-tag"></i> Angebote
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-edit"></i> Aufträge
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-euro"></i> Rechnungen
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-warning"></i> Mahnungen
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-plus-square"></i> Gutschriften
</a>
</li>
</ul>
</div>
</div>
<a href="#" class="uk-button uk-button-small uk-button-primary" data-uk-tooltip="" title="Bearbeiten">
<i class="uk-icon-pencil"></i>
</a>
<a href="#" class="uk-button uk-button-small uk-button-danger" data-uk-tooltip="" title="Löschen" data-uk-modal="">
<i class="uk-icon-trash"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Bechtelar, Bergnaum and King</td>
<td class="uk-text-nowrap"><b>Little Pike 605</b>
<br>352 Howemouth</td>
<td class="uk-text-nowrap"><a href="#" class="uk-text-muted">Lorem ipsum </a></td>
<td>
<div class="uk-button-group">2</div>
</td>
<td><i class="uk-icon-ban uk-text-danger"></i></td>
<td class="uk-text-nowrap"><i class="uk-icon-check uk-text-success"></i></td>
<td>Quia soluta numquam harum fuga distinctio cupiditate aperiam. Ipsum iure sequi necessitatibus volupt...</td>
<td class="uk-text-right">
<div class="uk-button-group">
<a href="#" class="uk-button uk-button-small uk-button-primary" data-uk-tooltip="">
<i class="uk-icon-eye"></i>
</a>
<div class="uk-button-dropdown" data-uk-dropdown="{mode:'click', pos:'bottom-right', boundary:'#fix-dropdowns'}" data-uk-tooltip="" aria-haspopup="true" aria-expanded="false">
<button class="uk-button uk-button-small uk-button-primary">
<i class="uk-icon-angle-down"></i>
</button>
<div class="uk-dropdown uk-dropdown-small uk-dropdown-close uk-dropdown-bottom" style="width: 250px; top: 25px; left: -221px;" aria-hidden="true" tabindex="">
<ul class="uk-nav uk-nav-dropdown uk-text-left">
<li class="uk-nav-header">Kontakt</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">2</span> <i class="uk-icon-map-marker"></i> Adressen
</a>
</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">4</span> <i class="uk-icon-user"></i> Ansprechpartner
</a>
</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">2</span> <i class="uk-icon-credit-card"></i> Kontoverbindungen
</a>
</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">0</span> <i class="uk-icon-key"></i> Zugänge
</a>
</li>
<li class="uk-nav-header">Projekte</li>
<li>
<a href="#">
<i class="uk-icon-university"></i> Projekte
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-check-circle-o"></i> Tickets
</a>
</li>
<li class="uk-nav-header">Buchhaltung</li>
<li>
<a href="#">
<i class="uk-icon-tag"></i> Angebote
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-edit"></i> Aufträge
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-euro"></i> Rechnungen
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-warning"></i> Mahnungen
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-plus-square"></i> Gutschriften
</a>
</li>
</ul>
</div>
</div>
<a href="#" class="uk-button uk-button-small uk-button-primary" data-uk-tooltip="" title="Bearbeiten">
<i class="uk-icon-pencil"></i>
</a>
<a href="#" class="uk-button uk-button-small uk-button-danger" data-uk-tooltip="" title="Löschen" data-uk-modal="">
<i class="uk-icon-trash"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Bechtelar, Bergnaum and King</td>
<td class="uk-text-nowrap"><b>Little Pike 605</b>
<br>352 Howemouth</td>
<td class="uk-text-nowrap"><a href="#" class="uk-text-muted">Lorem ipsum </a></td>
<td>
<div class="uk-button-group">2</div>
</td>
<td><i class="uk-icon-ban uk-text-danger"></i></td>
<td class="uk-text-nowrap"><i class="uk-icon-check uk-text-success"></i></td>
<td>Quia soluta numquam harum fuga distinctio cupiditate aperiam. Ipsum iure sequi necessitatibus volupt...</td>
<td class="uk-text-right">
<div class="uk-button-group">
<a href="#" class="uk-button uk-button-small uk-button-primary" data-uk-tooltip="">
<i class="uk-icon-eye"></i>
</a>
<div class="uk-button-dropdown" data-uk-dropdown="{mode:'click', pos:'bottom-right', boundary:'#fix-dropdowns'}" data-uk-tooltip="" aria-haspopup="true" aria-expanded="false">
<button class="uk-button uk-button-small uk-button-primary">
<i class="uk-icon-angle-down"></i>
</button>
<div class="uk-dropdown uk-dropdown-small uk-dropdown-close uk-dropdown-bottom" style="width: 250px; top: 25px; left: -221px;" aria-hidden="true" tabindex="">
<ul class="uk-nav uk-nav-dropdown uk-text-left">
<li class="uk-nav-header">Kontakt</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">2</span> <i class="uk-icon-map-marker"></i> Adressen
</a>
</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">4</span> <i class="uk-icon-user"></i> Ansprechpartner
</a>
</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">2</span> <i class="uk-icon-credit-card"></i> Kontoverbindungen
</a>
</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">0</span> <i class="uk-icon-key"></i> Zugänge
</a>
</li>
<li class="uk-nav-header">Projekte</li>
<li>
<a href="#">
<i class="uk-icon-university"></i> Projekte
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-check-circle-o"></i> Tickets
</a>
</li>
<li class="uk-nav-header">Buchhaltung</li>
<li>
<a href="#">
<i class="uk-icon-tag"></i> Angebote
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-edit"></i> Aufträge
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-euro"></i> Rechnungen
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-warning"></i> Mahnungen
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-plus-square"></i> Gutschriften
</a>
</li>
</ul>
</div>
</div>
<a href="#" class="uk-button uk-button-small uk-button-primary" data-uk-tooltip="" title="Bearbeiten">
<i class="uk-icon-pencil"></i>
</a>
<a href="#" class="uk-button uk-button-small uk-button-danger" data-uk-tooltip="" title="Löschen" data-uk-modal="">
<i class="uk-icon-trash"></i>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<br><br><br><br><br>
关于jquery - uikit 下拉菜单被溢出容器截断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42157447/
rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送
我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam
对于用户模型，我有一个过滤器来检查用户的预订状态，该状态由整数值(0、1或2)表示。UserActiveAdmin索引页上的过滤器是通过以下代码实现的:filter:booking_status,as::select然而，这会导致下拉选项为0、1或2。当管理员用户从下拉列表中选择它们时，我更愿意自己将它们命名为“未完成”、“待定”和“已确认”之类的名称。有没有办法在不改变booking_status在模型中的表示方式的情况下做到这一点？ 最佳答案 假设booking_status是模型中的枚举字段，您可以使用:过滤器:booking
我遇到了ruby正则表达式的问题。我需要找到所有(可能重叠的)匹配项。这是问题的简化:#Simpleexample"Hey".scan(/../)=>["He"]#Actualresults#Withoverlappingmatchestheresultshouldbe=>["He"],["ey"]我尝试执行并获得所有结果的正则表达式如下所示:"aaaaaa".scan(/^(..+)\1+$/)#Thislooksformultiplesof(here)"a"biggerthanonethat"fills"theentirestring."aa"*3=>true,"aaa"*2=
我使用脚手架和Rails3创建了2个模型。模型是位置和作业，每个作业都有一个位置。我在脚手架生成代码中创建了所需的引用调用，但是当我查看创建新作业的View时，我看到的只是一个文本框，我应该在其中添加location_id。我怎样才能让它变成下拉菜单以获得更好的用户体验？ 最佳答案 想象一下，您有每个位置的titleAPI:http://apidock.com/rails/ActionView/Helpers/FormOptionsHelper/collection_select 关于r
我以为它已经安装了，但在我的gemfile中有gem"jquery-rails"但是在我的asset/javascripts文件夹中accounts.js.coffeeapplication.js都被注释掉了这是我的虚拟railsapplication但是在源代码中没有jQuery并且删除链接不起作用......任何想法都丢失了 最佳答案 看看thisRailscast.您可能需要检查application.js文件并确保它包含以下语句。//=requirejquery//=requirejquery_ujs
我想在页面顶部创建自定义Jquery消息而不是标准RailsFlash消息。我想在我的投票底部附近创建一条即时消息。我的Controller:defvote_up@post=Post.find(params[:id])current_user.up_vote(@post)flash[:message]='Thanksforvoting!'redirect_to(root_path,:notice=>'Takforditindlæg,deternuonline!')rescueMakeVoteable::Exceptions::AlreadyVotedErrorflash[:error]
我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文
我正在尝试解决我们测试中的一个错误，我认为它应该有效。我很确定这是selectize或capybara中的错误，但我不明白为什么。我已经进入了capybara的源代码，一切似乎都在正常工作。我真的不确定如何前进。为了测试这个错误，我已经尽可能地把这个错误剥离成一个小的testapplication.请参阅下面的设置bugs/show.html.erbOneTwoThreeFourOneTwoThreeFourbug_spec.rbfeature'bug'doit"specsetup",js:truedovisitbug_pathfind('div.selectize-inputinpu
我目前从prototype切换到jquery主要是为了支持简单的ajax文件上传。我使用:https://github.com/indirect/jquery-rails95%的javascript代码是由railshelper编写的，例如:-remote_function-render:updatedo|page|-page.replace_html'id',:partial=>'content'-page['form']['name']=something-page.visual_effect:highlight,'head_success'...我知道我必须为Jquery重写5%