layui form表单自定义sm格式
1. 新建以下sm样式,保存为layform_sm.css文件名,然后放到layuiadmin/layui/css/文件夹下面。
.layui-input-sm,.layui-select-sm,.layui-textarea-sm
{
width:100px;
height:25px;
line-height:;
border-width:1px;
border-style:solid;
background-color:#fff;
border-radius:2px;
border-color:#e6e6e6;
padding-left: 5px;
}
.layui-form-item-sm .layui-input-inline-sm {
float: left;
width: 100px;
margin-right: 5px;
}
.layui-input-inline-sm {
display: inline-block;
vertical-align: middle;
position: relative;
}
.layui-form-label-sm {
float: left;
display: block;
padding: 0px 8px;
width: 60px;
font-weight:;
/* line-height: 24px; */
text-align: right;
position: relative;
}
.layui-card-header-sm {
position: relative;
/* height: 42px; */
line-height: 28px;
color: rgb(51, 51, 51);
font-size: 14px;
padding: 10px 15px;
border-bottom: 1px solid rgb(246, 246, 246);
border-radius: 2px 2px 0px 0px;
} .layui-select-title > input {
width:100px;
height:25px;
line-height:;
border-width:1px;
border-style:solid;
background-color:#fff;
border-radius:2px;
border-color:#e6e6e6;
padding-left: 5px;
}
.layui-pop-search {
cursor: pointer
}
2. 使用方法:
将小表单样式放后面引入。
<link type="text/css" href="${ctx}/resources/layuiadmin/layui/css/layui.css" media="all" rel="Stylesheet" />
<link type="text/css" href="${ctx}/resources/layuiadmin/layui/css/layform_sm.css" media="all" rel="Stylesheet" />
在from中使用:
注意点:
单个页面中只能使用某一种样式。即如果使用表单小样式,就不能使用原来样式。
我这边使用当是iframe框架当,基本能满足这个条件。当使用表单小样式时,引入当文件是
<%@ include file="/WEB-INF/page/commons/common_layuiadmin_sm.jsp"%>
当使用正常大小时,引入文件是
<%@ include file="/WEB-INF/page/commons/common_layuiadmin.jsp"%>
这两个文件一个包含layform_sm.css,一个不包含而已。
3. 样式对比:
修改前的表单样式如下:
每行才允许3个字段,对于大量查询条件的系统来说,并不友好。边距普遍偏大。
修改后的表单样式如下:
layui form表单自定义sm格式的更多相关文章
- 20181019 记录 window.setTimeout('dofunction()',2000); - layui form 表单提交 事件 - F11全屏 事件 window.onresize
1 延时事件 window.setTimeout('dofunction()',2000); 函数外面要有引号 如果没有引号 就不能延时执行 应该是内容进行eval,所以外层不是传递字符串的话,外层函 ...
- form表单内容JSON格式转化
form表单提交时,对于Content-type为application/json是提交时需要转换成json格式,据说form enctype=‘application/json’这样就可以,然而在我 ...
- 避免layui form表单重复触发submit绑定事件
个人博客 地址:http://www.wenhaofan.com/article/20180927002336 在使用以下代码监听lay-filter为editConfig的提交按钮后,当点击提交按钮 ...
- Layui form表单提交注意事项
// 表单提交form.on('submit(first1)', function (data) { var articleFrom = data.field; $.ajax({ type:" ...
- js Form表单转json格式,及后台接收(多种方法)
转载:https://blog.csdn.net/qq_40138785/article/details/81533015 一.serialize()方法格式:var data = $("# ...
- JS的Form表单转JSON格式
一.serialize()方法 格式:var data = $("#formID").serialize(); 功能:将表单内容序列化成一个字符串. 注意:要使用params = ...
- layui form表单提交
layui.use(['form'], function () { var form = layui.form; //监听提交 form.on('submit(formDemo)', function ...
- easyui form表单提交标准格式
$("#temForm").form('submit', { url: '', queryParams: {}, cache: false, type: 'POST', dataT ...
- layUI form表单 防止多次点击重复提交
//监听 弹框-变更处理备注-提交 form.on('submit(popFormSubPass)', function (data) { //防止重复点击: 单击之后提交按钮不可选,防止重复提交 v ...
随机推荐
- [jzoj]1417.数学题
Link https://jzoj.net/senior/#main/show/1417 Problem 当Alice在浏览数学书时,看到一个等式A=S,奇怪的是A和S并不相等.Alice发现可以通过 ...
- Redis 数据变化通知服务实践
从Redis 2.8.0版本起,Redis加入了“Keyspace notifications”(即“键空间通知”)的功能.键空间通知,允许Redis客户端从“发布/订阅”通道中建立订阅关系,以便客户 ...
- YIi url美化
一.Yii Url美化,配置urlManager组件 'urlManager' => [ 'enablePrettyUrl' => true, // 开启URL美化,可以去掉 index. ...
- Mac使用Clion配置OpenGL
Mac使用Clion配置OpenGL 之前博主是用Xcode配置的openGL,但后来因为要与非Mac队友合作,于是大家决定统一使用Clion,博主于是再次配置开发环境,这里记录一下 预先准备 Mac ...
- 基于Python Pillow库生成随机验证码
from PIL import Image from PIL import ImageDraw from PIL import ImageFont import random class ValidC ...
- PAT Basic 1020
1020 月饼 (25 分) 月饼是中国人在中秋佳节时吃的一种传统食品,不同地区有许多不同风味的月饼.现给定所有种类月饼的库存量.总售价.以及市场的最大需求量,请你计算可以获得的最大收益是多少. 注意 ...
- hihocoder1696 折线中点(几何)
https://hihocoder.com/problemset/problem/1696 求折线中点,一开始想成先求横坐标中点了,肯定是错的. 一定要从线段长度求中点,然后中点公式推了好久.. #i ...
- .Net core下的配置设置(一)——Configuration
ASP.NET Core 中提供了一个Configuration 包,用以应用配置基于配置提供程序建立的键值对.这里以json文件配置的方式,简单的介绍一下它的用法. 首先定义一个配置文件appset ...
- 前端工程化系列[02]-Grunt构建工具的基本使用
本文主要介绍前端开发中常用的构建工具Grunt,具体包括Grunt的基本情况.安装.使用和常见插件的安装.配置和使用等内容. 1.1 Grunt简单介绍 Grunt是一套前端自动化构建工具.对于需要反 ...
- php 通过 create user 和grant 命令无法创建数据库用户和授权的解决办法
php 通过 create user 和grant 命令无法创建数据库用户和授权的解决办法 解决办法, 通过 insert 命令的方式进行创建. 创建数据库用户: $sql= "insert ...