SAP Fiori Elements 里 Smart Table column 的宽度问题

简介: SAP Fiori Elements 里 Smart Table column 的宽度问题

如下图所示,我有一个 SAP Fiori Elements List Report 制作出的应用:image.png层级结构:thead - tr - th: 宽度: 2rem.image.pngem是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。EM特点

em的值并不是固定的;

em会继承父级元素的字体大小。

注意:任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。


所以我们在写CSS的时候,需要注意两点:


body选择器中声明Font-size=62.5%;


将你的原来的px数值除以10,然后换上em作为单位;


重新计算那些被放大的字体的em数值。避免字体大小的重复声明。


rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem.


image 列的 width: 5remimage.pngProduct 列的宽度: 11remimage.png152 行 oTable 实例的 getColumns 方法,在 TableRenderer.renderColumns 里被调用:image.pngsId: com.sap.jerry.jerryfioriapp::sap.suite.ui.generic.template.ListReport.view.ListReport::SEPMRA_C_PD_Product–responsiveTable


这个数据结构里只有 4 列?image.pngimage.pngProductForEdit: 11rem

image.pngimage.png后续会介绍,这些 column 的 width 属性,是在何处根据什么逻辑被计算出来的。

SAP Fiori Elements 点击 Smart Table 之后,如何在代码里通过 event 对象,拿到点击行项目的数据image.png具体参考这个StackOverflow 链接




相关文章
|
12月前
|
Web App开发 开发框架 前端开发
SAP Fiori Elements 应用中 table id 的生成逻辑
SAP Fiori Elements 应用中 table id 的生成逻辑
|
API 容器
sap.m.Table 和 sap. ui.table.Table 两个控件的功能对比
sap.m.Table 和 sap. ui.table.Table 两个控件的功能对比
|
API 容器
什么是 SAP UI5 的 Smart Field
什么是 SAP UI5 的 Smart Field
|
前端开发
SAP Fiori Elements 里 Smart Table column 的宽度问题
SAP Fiori Elements 里 Smart Table column 的宽度问题
SAP Fiori Elements 里 Smart Table column 的宽度问题
|
Web App开发 存储 编解码
SAP Fiori Elements List Report Smart Table 列项目宽度计算的奥妙
SAP Fiori Elements List Report Smart Table 列项目宽度计算的奥妙
SAP Fiori Elements List Report Smart Table 列项目宽度计算的奥妙
SAP Fiori Elements - smart field id generation
SAP Fiori Elements - smart field id generation
95 0
SAP Fiori Elements - smart field id generation
|
JSON 数据格式
SAP Fiori Elements List Report 里的表格类型(tableType)是如何决定出来的
从 SAP Fiori Elements 实现源代码中的 SmartTable.xml 能看出,ListReport 类型的 SAP Fiori Elements 应用,其表格类型包含 4 种: AnalyticalTable TreeTable GridTable ResponsiveTable
SAP Fiori Elements List Report 里的表格类型(tableType)是如何决定出来的
SAP Fiori Elements - Smart table add button debug 2 setDirty
SAP Fiori Elements - Smart table add button debug 2 setDirty
125 0
SAP Fiori Elements - Smart table add button debug 2 setDirty
|
XML 数据格式
SAP Fiori Elements List Report Smart Table Toolbar 的 XML 视图实现
http://localhost:8080/resources/sap/suite/ui/generic/template/ListReport/view/fragments/SmartTableToolbar.fragment.xml SmartTableToolbar.fragment.xml 里,包含了 BreakoutActions.fragment:
SAP Fiori Elements List Report Smart Table Toolbar 的 XML 视图实现
如何从 SAP Fiori Elements List Report Table 点击事件响应函数里拿到表格某一行的信息
如下图所示,我按照这篇文章 如何在 SAP Fiori Elements List Report 表格工具栏里增添新的自定义按钮 里介绍的方式,在 SAP Fiori Elements List Report 应用的 table 工具栏里,添加了一个自定义按钮:
如何从 SAP Fiori Elements List Report Table 点击事件响应函数里拿到表格某一行的信息