javascript - 可滚动 div 内的复选框显示在其外部,但代码在 jsfiddle 上运行良好

标签 javascript jquery html css checkbox

我的 JS 代码应该生成一个 html 可滚动 div,其表单包含复选框列表,我将字符串打印到控制台,这就是结果(未格式化):

<div><div id='div_Fluxo_de_transitoFonteFluxo_de_transitoFonteinput4' style='padding-left:1em; height:100px; max-width: 215px; border:2px solid #ccc; overflow-y: scroll; '><form id='form_Fluxo_de_transitoFonte'><label><input type='checkbox' value='CMP'>CMP</input></label><br/><label><input type='checkbox' value='IdP'>IdP</input></label><br/><label><input type='checkbox' value='PSP'>PSP</input></label><br/><label><input type='checkbox' value='Heli1'>Heli1</input></label><br/><label><input type='checkbox' value='Brisa'>Brisa</input></label><br/><label><input type='checkbox' value='Heli2'>Heli2</input></label><br/></form></div></div>

https://jsfiddle.net/k63o30ka/

生成的代码适用于 jsfiddle,但在我的小部件中,复选框显示在可滚动 div 之外: http://image.prntscr.com/image/80494dcbb220424d94ebd3ba629c5698.png

有什么想法可能导致这种情况吗? 请注意,这两种情况下的代码完全相同。

更新:问题与代码中使用的 Bootstrap 有关。

最佳答案

看起来很棒。我看到的唯一问题是,外部 div 应该有一个 overflow: hide

<div style="overflow:hidden">
  <div id='div_Fluxo_de_transitoFonteFluxo_de_transitoFonteinput4' style='padding-left:1em; height:100px; max-width: 215px; border:2px solid #ccc; overflow-y: scroll; '>
.....
</div>

fiddle 链接:https://jsfiddle.net/8xknfevx/

关于javascript - 可滚动 div 内的复选框显示在其外部,但代码在 jsfiddle 上运行良好,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40061379/

相关文章:

javascript - "Back to Top"按钮仅在窗口滚动时可见(但在移动设备上不起作用)

jquery - 使用 jQuery 计算 HTML 元素数量

javascript - 如何使用 JavaScript 包含/添加多个计算?

javascript - Enyo MVC实现和粒 subview 渲染

javascript - 当输入文本字段达到最大长度时移动焦点

javascript - 在 Owl Carousel 中设置轮播高度

jquery - 隐藏一个 div 并在初始位置显示新的 div

html - 将多个 div 对齐到父级的底部

javascript - 从对象中驻留的函数获取保存对象的变量的名称

javascript - javascript嵌入式youtube视频