LayUI表格中插入下拉框被隐藏的解决办法

 146 2019-10-28 19:56:51 艾奇站长网

TAG:LayUI表格下拉框

layui是大佬贤心开发的一款前端框架,使用简单,兼容性好,自从认识到LayUI框架之后,就爱不释手,但是有时也挺抓狂的,做前端页面的时候遇到各种问题。

比如在使用的时候,有时候我们会在表格中插入下拉框,但是下拉框在表格中没办法显示出来,效果:


LayUI表格中插入下拉框被隐藏的解决办法(图1)


解决办法:

给下拉框加上这个属性:lay-ignore.忽略了美化效果自然就是普通的下拉框了,可以正常显示的,但是效果并不美观,你觉得不是你想要的,别急,我给它美观一下。

首先给select表单加了lay-ignore属性,这样子就变成普通的表单了。

再美化一下css改变效果:

.table_select { width: 100%; height: 38px;
    line-height: 1.3;
    line-height: 38px \9;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
    background-color: #fff;
    border-radius: 2px;
    padding-left:10px;
}
.table_select option{
    padding: 0 10px;
    line-height: 36px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*修改表单默认文字颜色*/
input, textarea,select {
    color: #999; /* 光标的颜色*/
    text-shadow: 0px 0px 0px #999; /* 文本颜色 */
    -webkit-text-fill-color: transparent;
    }
input::-webkit-input-placeholder,select::-webkit-input-placeholder {
    color: rgb(60, 0, 248); /* 改变placeholder文本颜色 */ 
    text-shadow: none; 
    -webkit-text-fill-color: initial; 
}

效果:


LayUI表格中插入下拉框被隐藏的解决办法(图2)

大家可以看到效果了,只是默认效果跟原来的差不多一样,只是点击效果内容有点丑,也勉强接受。


还有一种方法就是 使用 “Dropdown 下拉菜单组件”。这里就不介绍了,有兴趣的可以去LayUI社区看看。




猜你喜欢
HTML用JS导出Excel的五种方法

HTML用JS导出Excel的五种方法

教程资讯 344 2019-09-29

今天遇到一个需要用JS导出Excel的功能,百度了一下,有很多种方法,这里总结了五种,推荐给大家。这五种方法前四种方法只...

TAG:JSExcel

WordPress基础–如何给自己的博客,网站嵌入小游戏

WordPress基础–如何给自己的博客,网站嵌入小游戏

教程资讯 269 2019-10-07

WordPress如何给自己的博客,网站嵌入小游戏呢?你需要先去找一个小游戏,比如4399、7K7K等。找到右键查看页面...

TAG:小游戏教程WordPress

百度站长工具里的LOGO权限快速开启必有绝招

百度站长工具里的LOGO权限快速开启必有绝招

教程资讯 137 2019-09-30

无论是针对seo从业者还是普通用户,带有百度站点LOGO的网站和没有百度站点LOGO的网站,带有百度站点LOGO的网站都...

TAG:站长工具LOGO

为什么说,百度SEO是经验主义?

为什么说,百度SEO是经验主义?

教程资讯 267 2019-09-30

俗话说:三人行必有我师焉,在做SEO的道路上,我们总是从小白,一点一滴的积累成为一名专业的SEO人员,在这之中,你会积累...

TAG:百度SEO