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

 126 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社区看看。




猜你喜欢
使用静态站点生成器的 7 个理由

使用静态站点生成器的 7 个理由

教程资讯 169 2019-10-15

静态站点生成器变得越来越流行。下面解释一下我们所说的“静态站点生成器”到底是什么。什么是静态站点?回想一下你建立的第一个...

TAG:静态生成器

Discuz不使用插件实现简单的打赏功能

Discuz不使用插件实现简单的打赏功能

教程资讯 248 2019-10-16

本文介绍Discuz不使用插件实现简单的打赏功能实现目标:用户自行上传自己的支付宝及微信收款二维码,在主题帖增加打赏按钮...

TAG:Discuz插件打赏

Dedecms5.7安装百度(ueditor)编辑器的方法

Dedecms5.7安装百度(ueditor)编辑器的方法

教程资讯 199 2019-10-12

用过dedecms的朋友都知道dede自带的文本编辑器很不好用,且有些功能还需要我们自己手动去修改源码,才能完成我们想要...

TAG:ueditor编辑器Dedecm

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

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

教程资讯 265 2019-09-30

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

TAG:百度SEO