You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by hn...@apache.org on 2025/04/17 10:08:28 UTC
(myfaces-tobago) branch tobago-5.x updated: fix(sheet): column width pixel or percent only
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a commit to branch tobago-5.x
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
The following commit(s) were added to refs/heads/tobago-5.x by this push:
new e0d0776128 fix(sheet): column width pixel or percent only
e0d0776128 is described below
commit e0d077612840adc8bc62a4a4999f85352284780e
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Thu Apr 17 09:51:27 2025 +0200
fix(sheet): column width pixel or percent only
* fix wrong column width if only pixel value are used
* add tests
* adjust "horizontal scrollbar" test
* adjust SheetRendererUnitTest
Issue: TOBAGO-2405
---
.../internal/renderkit/renderer/SheetRenderer.java | 10 +++--
.../resources/renderer/sheet/sheet-columns.html | 2 +-
.../tobago-example-demo/src/main/scss/demo.scss | 2 +-
.../Sheet_Column_Width.test.js | 34 ++++++++++++++++-
.../20-sheet-column-width/Sheet_Column_Width.xhtml | 44 +++++++++++++++++++++-
.../src/main/webapp/css/demo.css | 2 +-
.../src/main/webapp/css/demo.css.map | 2 +-
.../src/main/webapp/css/demo.min.css | 2 +-
.../src/main/webapp/css/demo.min.css.map | 2 +-
9 files changed, 87 insertions(+), 13 deletions(-)
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SheetRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SheetRenderer.java
index a633b9ada2..ff8d142f63 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SheetRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SheetRenderer.java
@@ -949,9 +949,6 @@ private void writeColgroup(
final FacesContext facesContext, final AbstractUISheet sheet, final TobagoResponseWriter writer,
final List<Integer> columnWidths, final List<AbstractUIColumnBase> columns, final boolean isHeader)
throws IOException {
-
- final boolean columnWidthSetByUser = columnWidths.stream().noneMatch(columnWidth -> columnWidth <= -1);
-
writer.startElement(HtmlElements.COLGROUP);
int numOfCols = 0;
for (final AbstractUIColumnBase column : columns) {
@@ -970,6 +967,11 @@ private void writeColgroup(
final MeasureList columnLayout = sheet.getColumnLayout();
final String sheetId = sheet.getClientId(facesContext);
final String encodedSheetId = StyleRenderUtils.encodeIdSelector(sheetId);
+ final boolean columnWidthSetByUser = columnWidths.stream().noneMatch(columnWidth -> columnWidth <= -1);
+ final boolean hasAutoOrFrValue = columnLayout.stream()
+ .anyMatch(measure -> measure.getUnit().equals(Measure.Unit.AUTO)
+ || measure.getUnit().equals(Measure.Unit.FR));
+
float fr = 0;
MeasureList tangibleMeasures = new MeasureList();
for (int colIndex = 0; colIndex < numOfCols; colIndex++) {
@@ -1017,7 +1019,7 @@ private void writeColgroup(
Measure zeroPixel = new Measure(0, Measure.Unit.PX);
encodeColStyle(facesContext, encodedSheetId, TobagoClass.ROW__FILLER, null,
- columnWidthSetByUser ? Measure.AUTO : zeroPixel);
+ columnWidthSetByUser || !hasAutoOrFrValue ? Measure.AUTO : zeroPixel);
encodeColStyle(facesContext, encodedSheetId, TobagoClass.BEHAVIOR__CONTAINER, null, zeroPixel);
}
}
diff --git a/tobago-core/src/test/resources/renderer/sheet/sheet-columns.html b/tobago-core/src/test/resources/renderer/sheet/sheet-columns.html
index 7982e2e6d0..7f9dfc5a88 100644
--- a/tobago-core/src/test/resources/renderer/sheet/sheet-columns.html
+++ b/tobago-core/src/test/resources/renderer/sheet/sheet-columns.html
@@ -27,7 +27,7 @@
<col class='tobago-row-filler'>
<col class='tobago-behavior-container'></colgroup>
<style nonce='dummy' id='j_id__v_0'>#sheet > header > table > colgroup > col:nth-child(1), #sheet > .tobago-body > table > colgroup > col:nth-child(1){width:300px;}</style>
-<style nonce='dummy' id='j_id__v_1'>#sheet > header > table > colgroup > col.tobago-row-filler, #sheet > .tobago-body > table > colgroup > col.tobago-row-filler{width:0px;}</style>
+<style nonce='dummy' id='j_id__v_1'>#sheet > header > table > colgroup > col.tobago-row-filler, #sheet > .tobago-body > table > colgroup > col.tobago-row-filler{width:auto;}</style>
<style nonce='dummy' id='j_id__v_2'>#sheet > header > table > colgroup > col.tobago-behavior-container, #sheet > .tobago-body > table > colgroup > col.tobago-behavior-container{width:0px;}</style>
<thead>
<tr>
diff --git a/tobago-example/tobago-example-demo/src/main/scss/demo.scss b/tobago-example/tobago-example-demo/src/main/scss/demo.scss
index a1d4c34d1f..6ba6311712 100644
--- a/tobago-example/tobago-example-demo/src/main/scss/demo.scss
+++ b/tobago-example/tobago-example-demo/src/main/scss/demo.scss
@@ -112,7 +112,7 @@ .testframe-wrapper {
margin-bottom: 2px;
}
-#page\:testSheetColumnWidth {
+tobago-sheet.vertical-border-big {
td {
border-left: 7px solid;
border-right: 13px solid;
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/3000-sheet/20-sheet-column-width/Sheet_Column_Width.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/3000-sheet/20-sheet-column-width/Sheet_Column_Width.test.js
index 798290b35d..3ab8372b32 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/3000-sheet/20-sheet-column-width/Sheet_Column_Width.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/3000-sheet/20-sheet-column-width/Sheet_Column_Width.test.js
@@ -15,11 +15,41 @@
* limitations under the License.
*/
-import {querySelectorFn} from "/script/tobago-test.js";
+import {querySelectorAllFn, querySelectorFn} from "/script/tobago-test.js";
import {JasmineTestTool} from "/tobago/test/tobago-test-tool.js";
+it("Only pixel values set", function (done) {
+ const columnHeads = querySelectorAllFn("#page\\:mainForm\\:pixelOnly header table thead tr th");
+
+ const test = new JasmineTestTool(done);
+ test.do(() => expect(getComputedStyle(columnHeads()[0]).width).toBe("10px"));
+ test.do(() => expect(getComputedStyle(columnHeads()[1]).width).toBe("20px"));
+ test.do(() => expect(getComputedStyle(columnHeads()[2]).width).toBe("30px"));
+ test.start();
+});
+
+it("Only percent values set for a 1000px-sheet", function (done) {
+ const columnHeads = querySelectorAllFn("#page\\:mainForm\\:percentOnly header table thead tr th");
+
+ const test = new JasmineTestTool(done);
+ test.do(() => expect(getComputedStyle(columnHeads()[0]).width).toBe("100px"));
+ test.do(() => expect(getComputedStyle(columnHeads()[1]).width).toBe("200px"));
+ test.do(() => expect(getComputedStyle(columnHeads()[2]).width).toBe("300px"));
+ test.start();
+});
+
+it("Only auto value set for a 900px-sheet", function (done) {
+ const columnHeads = querySelectorAllFn("#page\\:mainForm\\:autoOnly header table thead tr th");
+
+ const test = new JasmineTestTool(done);
+ test.do(() => expect(getComputedStyle(columnHeads()[0]).width).toBe("300px"));
+ test.do(() => expect(getComputedStyle(columnHeads()[1]).width).toBe("300px"));
+ test.do(() => expect(getComputedStyle(columnHeads()[2]).width).toBe("300px"));
+ test.start();
+});
+
it("There must be no horizontal scrollbar", function (done) {
- const sheetBody = querySelectorFn("#page\\:testSheetColumnWidth .tobago-body");
+ const sheetBody = querySelectorFn("#page\\:mainForm\\:testSheetColumnWidth .tobago-body");
const test = new JasmineTestTool(done);
test.do(() => expect(sheetBody().clientWidth).toBeGreaterThanOrEqual(sheetBody().scrollWidth));
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/3000-sheet/20-sheet-column-width/Sheet_Column_Width.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/3000-sheet/20-sheet-column-width/Sheet_Column_Width.xhtml
index 8044b4fe96..c3ea23a435 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/3000-sheet/20-sheet-column-width/Sheet_Column_Width.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/3000-sheet/20-sheet-column-width/Sheet_Column_Width.xhtml
@@ -17,14 +17,56 @@
* limitations under the License.
-->
-<ui:composition template="/plain.xhtml"
+<ui:composition template="/main.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:tc="http://myfaces.apache.org/tobago/component"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<tc:style file="#{request.contextPath}/css/demo.css"/>
+ <tc:sheet id="pixelOnly" value="#{sheetController.solarList}" var="object" rows="2"
+ columns="10px 20px 30px">
+ <tc:column label="Name">
+ <tc:out value="#{object.name}"/>
+ </tc:column>
+ <tc:column label="Orbit">
+ <tc:out value="#{object.orbit}"/>
+ </tc:column>
+ <tc:column label="Period (Days)">
+ <tc:out value="#{object.period}"/>
+ </tc:column>
+ </tc:sheet>
+
+ <tc:sheet id="percentOnly" value="#{sheetController.solarList}" var="object" rows="2"
+ columns="10% 20% 30%">
+ <tc:style width="1000px"/>
+ <tc:column label="Name">
+ <tc:out value="#{object.name}"/>
+ </tc:column>
+ <tc:column label="Orbit">
+ <tc:out value="#{object.orbit}"/>
+ </tc:column>
+ <tc:column label="Period (Days)">
+ <tc:out value="#{object.period}"/>
+ </tc:column>
+ </tc:sheet>
+
+ <tc:sheet id="autoOnly" value="#{sheetController.solarList}" var="object" rows="2"
+ columns="auto">
+ <tc:style width="900px"/>
+ <tc:column label="Name">
+ <tc:out value="#{object.name}"/>
+ </tc:column>
+ <tc:column label="Orbit">
+ <tc:out value="#{object.orbit}"/>
+ </tc:column>
+ <tc:column label="Period (Days)">
+ <tc:out value="#{object.period}"/>
+ </tc:column>
+ </tc:sheet>
+
<tc:sheet id="testSheetColumnWidth" value="#{sheetController.solarList}" var="luminary"
columns="200px 1fr 1fr" rows="5" markup="bordered">
+ <tc:style customClass="vertical-border-big"/>
<tc:column label="Name">
<tc:out value="#{luminary.name}" labelLayout="skip"/>
</tc:column>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/css/demo.css b/tobago-example/tobago-example-demo/src/main/webapp/css/demo.css
index 550d8bb77c..51e45253cc 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/css/demo.css
+++ b/tobago-example/tobago-example-demo/src/main/webapp/css/demo.css
@@ -107,7 +107,7 @@ .testframe-wrapper {
margin-bottom: 2px;
}
-#page\:testSheetColumnWidth td {
+tobago-sheet.vertical-border-big td {
border-left: 7px solid;
border-right: 13px solid;
}
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/css/demo.css.map b/tobago-example/tobago-example-demo/src/main/webapp/css/demo.css.map
index 01b969322f..a000063af9 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/css/demo.css.map
+++ b/tobago-example/tobago-example-demo/src/main/webapp/css/demo.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/demo.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBA;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;EACE;EACA;EACA;AACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIA;EACE;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;;;AAIA;EA [...]
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../scss/demo.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBA;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;EACE;EACA;EACA;AACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIA;EACE;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;;;AAIA;EA [...]
\ No newline at end of file
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/css/demo.min.css b/tobago-example/tobago-example-demo/src/main/webapp/css/demo.min.css
index cfb0ab40b5..f4cb182b29 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/css/demo.min.css
+++ b/tobago-example/tobago-example-demo/src/main/webapp/css/demo.min.css
@@ -1,2 +1,2 @@
-.hide-navigation{display:none}.navigation-box{--bs-card-border-radius:0;border:none}.box-shadow{box-shadow:0 0 5px 5px rgba(200,200,200,.5)}.demo-selected{background-color:#fdf}#demo-view-source .demo-selected{border:1px solid #ccc}.blue{background-color:#2aabff}.demo-data-attribute{height:100px;border:1px solid #000;border-radius:.25rem}demo-highlight{font-size:75%}.language-markup .token.tag{font-weight:inherit;font-size:inherit;line-height:inherit;white-space:inherit;text-align:inheri [...]
+.hide-navigation{display:none}.navigation-box{--bs-card-border-radius:0;border:none}.box-shadow{box-shadow:0 0 5px 5px rgba(200,200,200,.5)}.demo-selected{background-color:#fdf}#demo-view-source .demo-selected{border:1px solid #ccc}.blue{background-color:#2aabff}.demo-data-attribute{height:100px;border:1px solid #000;border-radius:.25rem}demo-highlight{font-size:75%}.language-markup .token.tag{font-weight:inherit;font-size:inherit;line-height:inherit;white-space:inherit;text-align:inheri [...]
/*# sourceMappingURL=demo.min.css.map */
\ No newline at end of file
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/css/demo.min.css.map b/tobago-example/tobago-example-demo/src/main/webapp/css/demo.min.css.map
index 5dad89c4e4..1580806a66 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/css/demo.min.css.map
+++ b/tobago-example/tobago-example-demo/src/main/webapp/css/demo.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["src/main/webapp/css/demo.css"],"names":[],"mappings":"AAgBA,iBACE,QAAS,KAGX,gBACE,wBAAyB,EACzB,OAAQ,KAGV,YACE,WAAY,EAAE,EAAE,IAAI,IAAI,qBAG1B,eACE,iBAAkB,KAGpB,iCACE,OAAQ,IAAI,MAAM,KAGpB,MACE,iBAAkB,QAGpB,qBACE,OAAQ,MACR,OAAQ,IAAI,MAAM,KAClB,cAAe,OAGjB,eACE,UAAW,IASb,4BACE,YAAa,QACb,UAAW,QACX,YAAa,QAEb,YAAa,QACb,WAAY,QACZ,QAAS,QAGX,QACE,cAAe,QAGjB,YACE,cAAe,QAGjB,8BACE,iBAAkB,QAGpB,iCACE,iBAAkB,QAGpB,+BACE,iBAAkB,QAGpB,mBACE,iBAAkB,KAGpB,iBACE,iBAAkB,KAGpB,6BACE, [...]
\ No newline at end of file
+{"version":3,"sources":["src/main/webapp/css/demo.css"],"names":[],"mappings":"AAgBA,iBACE,QAAS,KAGX,gBACE,wBAAyB,EACzB,OAAQ,KAGV,YACE,WAAY,EAAE,EAAE,IAAI,IAAI,qBAG1B,eACE,iBAAkB,KAGpB,iCACE,OAAQ,IAAI,MAAM,KAGpB,MACE,iBAAkB,QAGpB,qBACE,OAAQ,MACR,OAAQ,IAAI,MAAM,KAClB,cAAe,OAGjB,eACE,UAAW,IASb,4BACE,YAAa,QACb,UAAW,QACX,YAAa,QAEb,YAAa,QACb,WAAY,QACZ,QAAS,QAGX,QACE,cAAe,QAGjB,YACE,cAAe,QAGjB,8BACE,iBAAkB,QAGpB,iCACE,iBAAkB,QAGpB,+BACE,iBAAkB,QAGpB,mBACE,iBAAkB,KAGpB,iBACE,iBAAkB,KAGpB,6BACE, [...]
\ No newline at end of file