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

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




猜你喜欢
最新织梦漏洞,首页head之间被篡改加入异常代码解决办法

最新织梦漏洞,首页head之间被篡改加入异常代码解决办法

教程资讯 174 2019-09-30

最近不少用户反映首页被篡改,登录服务器查看没有被上传异常文件,但是首页生成后,有一段异常且被加密过的代码。更换内核后,还...

TAG:dedecms织梦

织梦DedeCMS系统列表页调用TAG标签并带上链接的实现方法

织梦DedeCMS系统列表页调用TAG标签并带上链接的实现方法

教程资讯 196 2019-09-30

织梦(DedeCMS)系统列表页调用TAG标签并带上链接的实现方法,这里以默认模板为例,打开 /templets/def...

TAG:织梦DedeCMSTAG标签

DEDECMS5.7使用KindEditor编辑器栏目内容无法保存

DEDECMS5.7使用KindEditor编辑器栏目内容无法保存

教程资讯 247 2019-09-27

kindeditor编辑器是一个国内团队开发的轻巧的编辑器了,但有朋友会发现把DEDECMS5.7的编辑器修改成kind...

TAG:DEDECMSkindeditor编辑器

WordPress主题教程,知更鸟主题评论留言等级美化教程,部署美化留言者等级图标

WordPress主题教程,知更鸟主题评论留言等级美化教程,部署美化留言者等级图标

教程资讯 223 2019-10-29

WordPress的评论区个人总是感觉不太美观,找了各种办法美化博客评论区,还找了很多相关教程,好多不支持知更鸟Begi...

TAG:WordPress主题知更鸟等级图标