CSS 修改按钮控件的文字大小

我是社区第485122位番薯,欢迎点我头像关注我哦~
1. 描述
1.1 问题描述

除参数面板中自定义按钮外,单元格或者参数面板的按钮文字大小都不能改变 ,无论单元格拉多宽多高,字体设置为99  字体自适应都无效。

如何实现自定义按钮文字大小呢?如下图所示:

1.2 解决思路

通过 CSS 修改按钮大小和文字大小。

2. 操作步骤
2.1 新建模板

新建一个模板,在参数面板添加两个按钮控件,分别修改控件名称为:提交、重置:

2.2 编写 CSS

新建一个文本文档,另存为 button.css,输入下面的 CSS:

点击下载 button.css:button.css

  1. #fr-btn-BUTTON0 .fr-btn-small button.fr-btn-text,
  2. #fr-btn-BUTTON1 .fr-btn-small button.fr-btn-text{
  3. height:40px;
  4. font-size:25px;
  5. }
复制代码

说明:

height:高度;

font-size:设置字体的大小,文字的大小跟随你设定值的大小而定;

fr-btn-BUTTON0、fr-btn-BUTTON1:其中 BUTTON0 和 BUTTON1 为按钮名称,一定要大写,如下图所示:


2.3 引用 CSS 文件

将编辑好的 button.css 文件放入\webapps\webroot\help\css下。

打开模板,选择模板->模板 Web 属性->引用 CSS 进行引用。


3. 预览效果
3.1 PC 端预览效果

点击分页预览,效果如图。

3.2 移动端预览效果

注:不支持移动端。

4. 已完成模板

已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\CSS样式\07-利用CSS设置按钮文字大小.cpt

点击下载模板:07-利用CSS设置按钮文字大小.cpt

点击下载 CSS 文件:button.css



编辑于 2020-11-20 15:28  

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

0回帖数 1关注人数 7615浏览人数
最后回复于:2020-11-20 15:28

返回顶部 返回列表