You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@royale.apache.org by GitBox <gi...@apache.org> on 2022/04/15 12:33:12 UTC
[GitHub] [royale-asjs] cristallium opened a new issue, #1193: TileHorizontalLayout compute wrong margin-right in case of scroller (ignoring scrollbar width)
cristallium opened a new issue, #1193:
URL: https://github.com/apache/royale-asjs/issues/1193
Hi,
I found a bug in a special case with `TileHorizontalLayout`
Take this exemple :
```
<j:List localId="lst" className="ImageListItemRenderer" height="90%" width="400" change="ev_change(event)" includeIn="loaded">
<j:beads><j:TileHorizontalLayout requestedColumnCount="2" itemsExpand="false" horizontalGap="0" columnWidth="186" /></j:beads>
</j:List>
```
ItemRenderer :
```
<j:ListItemRenderer ... width="186" height="91">
...
<j:Image src="{image_src}" width="170" height="75"/>
...
</j:ListItemRenderer>
```
This is working fine if no scrollbar like this screenshoot
However if the scrollbar appears then it could have 2 items by row. But the compute of `margin-right` wrong because it doesn't take into account the scrollbar width. So margin-right is too high and list has only 1 item per row
In the following screenshoot, brown color matches the `margin-right` and is too large
If I manually change margin-right substracting scrollbar width (with dev tools in browser) , then this is fine :
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@royale.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [royale-asjs] mjesteve commented on issue #1193: TileHorizontalLayout compute wrong margin-right in case of scroller (ignoring scrollbar width)
Posted by GitBox <gi...@apache.org>.
mjesteve commented on issue #1193:
URL: https://github.com/apache/royale-asjs/issues/1193#issuecomment-1113038723
>
> Let's ask it on the list [@dev](https://lists.apache.org/list.html?dev@royale.apache.org) :P
Already done:
https://lists.apache.org/thread/qmm2om6rh1brz60r4ty72zwonsx3btrh
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@royale.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [royale-asjs] mjesteve commented on issue #1193: TileHorizontalLayout compute wrong margin-right in case of scroller (ignoring scrollbar width)
Posted by GitBox <gi...@apache.org>.
mjesteve commented on issue #1193:
URL: https://github.com/apache/royale-asjs/issues/1193#issuecomment-1112947823
Sorry cristalio, I misspoke.... "I ask". I'll come back here with comments.
You can subscribe to the development list and ask your questions or post your comments there. https://royale.apache.org/mailing-lists/
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@royale.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [royale-asjs] mjesteve commented on issue #1193: TileHorizontalLayout compute wrong margin-right in case of scroller (ignoring scrollbar width)
Posted by GitBox <gi...@apache.org>.
mjesteve commented on issue #1193:
URL: https://github.com/apache/royale-asjs/issues/1193#issuecomment-1109123206
On mac the behavior is totally different. (I never work with mac and had not seen it).
I think if there was a way to get, truthfully or acceptably, the width of the scroll I would prefer it. If we can't get it, should we create a new property or a bead?
Let me know your thoughts.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@royale.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [royale-asjs] cristallium commented on issue #1193: TileHorizontalLayout compute wrong margin-right in case of scroller (ignoring scrollbar width)
Posted by GitBox <gi...@apache.org>.
cristallium commented on issue #1193:
URL: https://github.com/apache/royale-asjs/issues/1193#issuecomment-1100650217
I dig a little more.
This is a little more complex than I thought .
I thing about 2 options :
Option 1) Assuming host has `scroll `classname then we could reserve scrollbar width, the fix could be this one :
```
var adjustedHostWidth:Number = Math.floor(host.width - borderMetrics.left - borderMetrics.right);
if (hostComponent.containsClass("scroll") == true){
adjustedHostWidth -= 16; // assuming 16px, I don't know how to get scrollbar width
}
```
Option 2) We need to check if total height is greater than host height. The fix could be (to be paste just before loop throught childs to set styles) :
```
if (hostComponent.containsClass("scroll") == true){
// Compute total needed height to know if we will trigger vertical scrollbar
var totalNeededHeight:Number = _rowCount * ( useHeight + _verticalGap);
trace ("TotalNeededHeight:" + totalNeededHeight);
if (totalNeededHeight > adjustedHostHeight){
trace("Trigger VScrollbar");
adjustedHostWidth -= 16; //take scrollbarsize into account (works only with 16px wide)
if (needWidth)
{
// calculate columnCount based of the widesTile
_columnCount = _requestedColumnCount != -1 ? _requestedColumnCount : Math.floor(adjustedHostWidth / (widestTile + _horizontalGap));
useWidth = _requestedColumnCount == -1 ? widestTile : Math.floor((adjustedHostWidth - _horizontalGap) / _columnCount);
} else {
// calculate columnCount based on columnWidth
_columnCount = _requestedColumnCount != -1 ? _requestedColumnCount : Math.floor(adjustedHostWidth/ (_columnWidth + _horizontalGap));
useWidth = _requestedColumnCount == -1 ? _columnWidth : Math.floor((adjustedHostWidth - _horizontalGap) / _columnCount);
}
}else{
trace("No VScrollbar");
}
}
```
The issue with Option 2, is that we need to call again updateLayout() in case of browser height resize. (I tried it and updateLayout wasn't called)
Here are the files for 2 options.
Option 1
[TileHorizontalLayout - Option1.txt](https://github.com/apache/royale-asjs/files/8499860/TileHorizontalLayout.-.Option1.txt)
Option 2
[TileHorizontalLayout - Option2.txt](https://github.com/apache/royale-asjs/files/8499861/TileHorizontalLayout.-.Option2.txt)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@royale.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [royale-asjs] mjesteve commented on issue #1193: TileHorizontalLayout compute wrong margin-right in case of scroller (ignoring scrollbar width)
Posted by GitBox <gi...@apache.org>.
mjesteve commented on issue #1193:
URL: https://github.com/apache/royale-asjs/issues/1193#issuecomment-1113009846
> Sorry, I don't know what is the goal of list dev ? Can I do a PR like #1191 if you tell me the big picture ? Or do I need to make a topic on list dev to be able to do a PR ? Please tell me the rules. By the way, could you give me a feedback of #1191 ? Is something wrong ? If yes could you tell me what to correct that ?
For clarity, avoid mixing several issues in the same PR. It is best to make a separate PR for each issue.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@royale.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [royale-asjs] cristallium commented on issue #1193: TileHorizontalLayout compute wrong margin-right in case of scroller (ignoring scrollbar width)
Posted by GitBox <gi...@apache.org>.
cristallium commented on issue #1193:
URL: https://github.com/apache/royale-asjs/issues/1193#issuecomment-1113124826
Thanks Maria, I think I had already subscribed because I received by mail your post
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@royale.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [royale-asjs] mjesteve commented on issue #1193: TileHorizontalLayout compute wrong margin-right in case of scroller (ignoring scrollbar width)
Posted by GitBox <gi...@apache.org>.
mjesteve commented on issue #1193:
URL: https://github.com/apache/royale-asjs/issues/1193#issuecomment-1101524164
[TestRoyale7.zip](https://github.com/apache/royale-asjs/files/8506704/TestRoyale7.zip)
This is a way to get the width of the scroll bar but as it is implemented in a client script it is not a valid solution for the SDK.
In the html template I have replaced ${body} with this script:
<script type="text/javascript">
function getScrollbarWidth() {
var outer = document.createElement("div");
outer.style.visibility = "hidden";
outer.style.width = "100px";
outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps
document.body.appendChild(outer);
var widthNoScroll = outer.offsetWidth;
// force scrollbars
outer.style.overflow = "scroll";
// add innerdiv
var inner = document.createElement("div");
inner.style.width = "100%";
outer.appendChild(inner);
var widthWithScroll = inner.offsetWidth;
// remove divs
outer.parentNode.removeChild(outer);
var w = widthNoScroll - widthWithScroll;
return w;
}
var myApp = new App();
myApp.widthscroll = getScrollbarWidth();
myApp.start();
</script>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@royale.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [royale-asjs] cristallium commented on issue #1193: TileHorizontalLayout compute wrong margin-right in case of scroller (ignoring scrollbar width)
Posted by GitBox <gi...@apache.org>.
cristallium commented on issue #1193:
URL: https://github.com/apache/royale-asjs/issues/1193#issuecomment-1112538265
Hi Maria,
I share the same thought from you : if there was a way to get, truthfully or acceptably, the width of the scroll it would be better. When you said "mac" are you talking of "safari" web browser ? If yes I search a little on Internet, but found nothing interessing to get safari scrollbar width.
Do you think other Apache Royale team would have an advice on it ?
Actually I didn't see any solution except adding a new property ( or bead but my level isn't hight enought to know what's better).
Can we for now add property (or bead) and when all browsers will propose to have a real way to get scroll width we could remove this property ?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@royale.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [royale-asjs] cristallium commented on issue #1193: TileHorizontalLayout compute wrong margin-right in case of scroller (ignoring scrollbar width)
Posted by GitBox <gi...@apache.org>.
cristallium commented on issue #1193:
URL: https://github.com/apache/royale-asjs/issues/1193#issuecomment-1102221939
Hi Hiedra,
Thanks for your feed back, and sharing your code.
I believe that `TileHorizontalLayout` can be use in 2 contexts :
- `scroll `context like `j:List` or `j:ScrollableSectionContent`
- no scroll context like `j:SectionContent` or like in the exemple of TDJ (in this case the container height grow with number of children).
Here is a screenshoot of TDJ : (hostComponent.containsClass("scroll") would be false)
So I think that to have the same behavior in a no scroll context the check of `scroll `class is needed.
Here are my last thoughts :
Actually `TileHorizontalLayout `is usable in a no scroll context but is useless in a scroll context because of wrong `margin-right` compute.
Getting scrollbar width is not obvious. I read some posts like [https://stackoverflow.com/questions/13382516/getting-scroll-bar-width-using-javascript](https://stackoverflow.com/questions/13382516/getting-scroll-bar-width-using-javascript) but this seem very tricky and a sort of hack method. So Option 2 is certainly a bad way except if there is an easy and obvious way to get scrollbar width. (But in this case, it need also to fix the refresh of layout in case of resize)
When we do an Apache Royale app, we know (or can set by css) the scrollbar width.
So I think that Option1 is a good way but with another upgrade : we could add a propertity like `vscrollBarWidthReserve` (or another name). So we could use this way :
```
<j:List localId="lst" className="ImageListItemRenderer" width="400" includeIn="loaded">
<j:beads><j:TileHorizontalLayout vscrollBarWidthReserve="16" columnWidth="186" rowHeight="91" itemsExpand="false" horizontalGap="0" /></j:beads>
</j:List>
```
And on TileHorizontalLayout side :
```
if (hostComponent.containsClass("scroll") == true){
//Reserve some room for VScrollbar
adjustedHostWidth -= _vscrollBarWidthReserve; //take VScrollbarsize into account
}
```
So modification is minor and TileHorizontalLayout can be use in a scroll context.
What do you think about this solution ?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@royale.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [royale-asjs] cristallium commented on issue #1193: TileHorizontalLayout compute wrong margin-right in case of scroller (ignoring scrollbar width)
Posted by GitBox <gi...@apache.org>.
cristallium commented on issue #1193:
URL: https://github.com/apache/royale-asjs/issues/1193#issuecomment-1112918255
Sorry, I don't know what is the goal of list dev ?
Can I do a PR like https://github.com/apache/royale-asjs/pull/1191 if you tell me the big picture ? Or do I need to make a topic on list dev to be able to do a PR ? Please tell me the rules.
By the way, could you give me a feedback of https://github.com/apache/royale-asjs/pull/1191 ? Is something wrong ? If yes could you tell me what to correct that ?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@royale.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [royale-asjs] cristallium commented on issue #1193: TileHorizontalLayout compute wrong margin-right in case of scroller (ignoring scrollbar width)
Posted by GitBox <gi...@apache.org>.
cristallium commented on issue #1193:
URL: https://github.com/apache/royale-asjs/issues/1193#issuecomment-1100836518
Here is a test case project
[TestRoyale7.zip](https://github.com/apache/royale-asjs/files/8501272/TestRoyale7.zip)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@royale.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [royale-asjs] mjesteve closed issue #1193: TileHorizontalLayout compute wrong margin-right in case of scroller (ignoring scrollbar width)
Posted by GitBox <gi...@apache.org>.
mjesteve closed issue #1193: TileHorizontalLayout compute wrong margin-right in case of scroller (ignoring scrollbar width)
URL: https://github.com/apache/royale-asjs/issues/1193
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@royale.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [royale-asjs] mjesteve commented on issue #1193: TileHorizontalLayout compute wrong margin-right in case of scroller (ignoring scrollbar width)
Posted by GitBox <gi...@apache.org>.
mjesteve commented on issue #1193:
URL: https://github.com/apache/royale-asjs/issues/1193#issuecomment-1109067334
```
no scroll context like j:SectionContent or like in the exemple of TDJ (in this case the container height grow with number of children).
Here is a screenshoot of TDJ : (hostComponent.containsClass("scroll") would be false)
```
You are right.
I also tested with TDJ and with the blog example "[BE0015_Using_Jewel_TileHorizontalLayout](https://github.com/apache/royale-asjs/tree/develop/examples/blog/BE0015_Using_Jewel_TileHorizontalLayout)".
`Getting scrollbar width is not obvious. I read some posts like https://stackoverflow.com/questions/13382516/getting-scroll-bar-width-using-javascript but this seem very tricky and a sort of hack method. `
I did tests, with this script (previous message) and the truth is that in Windows: with Chrome, FireFox, Edge and IE the calculated value of the scroll, when displayed, was correct and I also tested with `hostComponent.element.scrollWidth` and it showed me the same correct results.
Today I have access to a Mac I will do the tests and get back with the results.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@royale.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [royale-asjs] mjesteve commented on issue #1193: TileHorizontalLayout compute wrong margin-right in case of scroller (ignoring scrollbar width)
Posted by GitBox <gi...@apache.org>.
mjesteve commented on issue #1193:
URL: https://github.com/apache/royale-asjs/issues/1193#issuecomment-1112709492
Let's ask it on the list [@dev](https://lists.apache.org/list.html?dev@royale.apache.org) :P
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@royale.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [royale-asjs] mjesteve commented on issue #1193: TileHorizontalLayout compute wrong margin-right in case of scroller (ignoring scrollbar width)
Posted by GitBox <gi...@apache.org>.
mjesteve commented on issue #1193:
URL: https://github.com/apache/royale-asjs/issues/1193#issuecomment-1101907175
A much easier possible solution?... (In the List `hostComponent.containsClass("scroll")` always true)
```
override public function layout():Boolean
{
...
trace(" -- calculate useWidth & useHeight ------");
var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
var adjustedHostWidth:Number = Math.floor(host.width - borderMetrics.left - borderMetrics.right);
//scrollWidth --> width without scrollBar
adjustedHostWidth = Math.min(adjustedHostWidth, hostComponent.element.scrollWidth);
...
}
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@royale.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [royale-asjs] mjesteve commented on issue #1193: TileHorizontalLayout compute wrong margin-right in case of scroller (ignoring scrollbar width)
Posted by GitBox <gi...@apache.org>.
mjesteve commented on issue #1193:
URL: https://github.com/apache/royale-asjs/issues/1193#issuecomment-1101361398
Hello cristalio, I have also encountered this problem and like you I have applied different patches. My level is medium-low for and my patches are not good, for this reason I have never shared them.
I think the first thing to find out is the "width of the scroll bar" as it can be different depending on the browser and even the CSS (I, for example, have customized the CSS style of the scroll bars and my width is 10px).
I was looking for solutions to find out the width and I found one that I liked but it didn't work for me, probably because I didn't implement it correctly.
I will take a look at your example project.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@royale.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [royale-asjs] cristallium commented on issue #1193: TileHorizontalLayout compute wrong margin-right in case of scroller (ignoring scrollbar width)
Posted by GitBox <gi...@apache.org>.
cristallium commented on issue #1193:
URL: https://github.com/apache/royale-asjs/issues/1193#issuecomment-1100153172
The issue is certainly here :
line 495 of TileHorizontalLayout.as
`// add dummy margin: avoid a tile from the next row stay in the previous row due to flexbox algorithm`
`child.positioner.style.marginRight = Math.floor(adjustedHostWidth - (1 + child.width + (child.width + _horizontalGap) * (_columnCount - 1))) + "px";`
something like if (scrollbar) minus scrollbar width
Perhaps same issue with marginLeft in others cases
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@royale.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org