- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在使用 Twitter Bootstrap 3.2 的 Fancyfile jQuery 插件 ( http://plugins.upbootstrap.com/bootstrap-fancyfile/ ) 将我的文件输入设置为更像 Bootstrap 的主题。
当在 tab-pane
中的输入上使用它时,在加载时不是可见的 tab-pane,输入中断;它变窄,占位符文本消失,单击输入的右侧部分可以触发表单提交。冲突是什么,有没有办法解决这个问题?
jsFiddle:http://jsfiddle.net/dbailey/bv2swf2t/1/
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a href="#main" data-toggle="tab">Description</a></li>
<li><a href="#photos" data-toggle="tab">Photos</a></li>
<li><a href="#contributors" data-toggle="tab">Contributors</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane in active fade" id = "main">
<input type="file" class="fancyfile"></input>
</div>
<div class="tab-pane fade" id = "photos">
<input type="file" class="fancyfile"></input>
</div>
<div class="tab-pane fade" id = "contributors">
<input type="file" class="fancyfile"></input>
</div>
</div>
</div>
<script>
$('input.fancyfile').fancyfile({
text: 'Select File',
icon: '',
style: 'btn-primary',
placeholder: 'Select File…'
});
</script>
最佳答案
我找不到冲突的确切来源。不知何故,宽度在后两个选项卡上设置为 11px。占位符文本仍然存在,只是由于框的大小而看不到它。
这里有一个简单的修复方法:只需使用 css 手动设置输入框的宽度。您必须放置 !important 标志,这样脚本才不会覆盖它。
.fake-input {
width: 188px !important; /* same as first one
}
fiddle :http://jsfiddle.net/bv2swf2t/2/
编辑:阅读您的评论并再次查看后,该按钮不起作用的原因是实际按钮没有任何作用。 “fancyfile”输入应该占据输入和按钮的宽度,这会打开“选择文件”对话框。出于某种原因,宽度在选项卡 2 和 3 中设置为 0px。修复与上面类似:
.fancyfile {
width: 280px !important; /* same as first one
}
这会在按钮上扩展输入框,并匹配第一个框的功能。
希望这对您有所帮助!
关于jquery - Bootstrap 3 fancyfile 在选项卡 Pane 中使用时中断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25626183/
我目前正在用 C 语言解决 USACO 的一个旧编码问题。这是我的代码的前几行,其中我尝试使用 fscanf() 函数来获取第一个值,一个 int,来自 blocks.in 文件: #include
我正在使用 Twitter Bootstrap 3.2 的 Fancyfile jQuery 插件 ( http://plugins.upbootstrap.com/bootstrap-fancyfi
我是一名优秀的程序员,十分优秀!