Bug #86790
closed
Linkbrowser layout issues in Firefox 63.0 (64-Bit)
100%
Description
In Firefox 63.0 (64-Bit) the linkbrowser is a little broken in terms of layout. First of all the expand and collapse arrows are displayed one row lower than where they actually should appear (see screenshots and the one of the page tree to compare) and the horizontal scroll bar of the page tree within the link browser is not showing up.
See attached screenshots.
Tested on two different Windows (8 and 10) computers.
In Chrome 70 on the same computers everything is fine.
Files
Updated by Tobias Stahn about 6 years ago
Applies to latest TYPO3 8.7.20 with Firefox 64/macOS as well (Safari 12.0 and Chrome 70 are fine).
Updated by Riccardo De Contardi about 6 years ago
- File Schermata 2018-11-03 alle 22.24.18.png Schermata 2018-11-03 alle 22.24.18.png added
- Status changed from New to Needs Feedback
I am currently not able to reproduce this issue on 8.7.20, using FIrefox 63.0.1 (64 bit) on MAC (see attached screenshot) - also the horizontal scroll is present.
Did I miss something or a different test should be performed? Thank you.
Updated by Christian Ducrot about 6 years ago
Can confirm the issue too. It probably only occurs with a large number of pages. Saw it on a project with more than 1,000 pages.
Updated by Tobias Stahn about 6 years ago
This might indeed be an issue that occures with a large number of pages and multiple page levels only.
I tried a fresh TYPO3 8.7.20 install with the introduction package extension added, however I could not reproduce the issue - although the extension comes with a fair amount of pages already. Only after I imported the pages table from a current project (~1200 pages) I ran into it again (almost instantly).
If it helps I could provide a database file (table pages only) with some minimal test case to reproduce this.
Updated by Riccardo De Contardi about 6 years ago
@Tobias Stahn yep, everything that could help reproducing the bug is welcome :) thank you.
Updated by Tobias Stahn about 6 years ago
- File 20181107-pages.sql.gz 20181107-pages.sql.gz added
- File linkbrowser-testcase-01.png linkbrowser-testcase-01.png added
- File linkbrowser-testcase-02.png linkbrowser-testcase-02.png added
- File linkbrowser-test-case-03.png linkbrowser-test-case-03.png added
There you go, have a look at 20181108-pages.sql.gz
You might want to try the following steps to reproduce the problem:
- import the SQL dump (contains ~870 pages nothing else)
- choose whichever page you like to add a content element to
- add a content element to said page which allows you use the linkbrowser (e.g. text)
- add some text into the CKEditor and try to create a link to a nested page
- expand 'Some random page - 1'
- expand 'Some random page - 373'
- expand 'Some random page - 227'
You should notice the misaligned expand arrows now. In linkbrowser-testcase-01.png I pointed out the location where the icons should be (see the pagetree on the right for reference) but they either aren't visible at all or moved to the page below.
If you try to expand 'Some random page - 240' now (given you are still in the linkbrowser) it gets even worse, see linkbrowser-testcase-02.png. Instead of expanding the selected page 'Some random page - 239' gets expanded and the arrow is displayed where it clearly shouldn't be.
I took a little time to dig a bit deeper into this issue and assume it's somehow CSS related. After I messed around with the paddings and/or widths in FF Dev Tools for example, everything looked fine – see linkbrowser-test-case-03.png (however this is not a valid solution of course).
Tested on:
- macOS
- Firefox 64
- TYPO3 8.7.20
- PHP 7.1
Hope that works for you @Riccardo De Contardi.
Updated by Matthias Krappitz about 6 years ago
The pagetree I did my first screenshots contains around 20.000 pages up to 8 levels deep. So I also think it is about a large and deeply nested number of pages here.
Updated by Riccardo De Contardi about 6 years ago
- Status changed from Needs Feedback to New
Updated by Riccardo De Contardi about 6 years ago
I was eventually able to reproduce your issue on 9.5.2-dev (latest master); I think that it depends on the level depth; the behavior of the pagetree starts to become inconsistent from the 9th level - see attached screenshot " Schermata 2018-11-10 alle 17.15.14.png "
some additional notes.¶
1) On the previous screenshot, I wrote "that can't be selected" because the arrow overlaps with the next row:
2) the issue also depends on the window size, for example if you make the window narrower:
3) when the window is so small that the left side drops down, everything becomes normal
4) The horizontal scroll bar was always present AFAICS.
Updated by Riccardo De Contardi about 6 years ago
Updated by Riccardo De Contardi about 6 years ago
The whole problem originates because the arrows are in float:left and at some point (or when resizing) the space is not enough and everything breaks.
I would suggest to replace the float with something like:
.list-tree-group{
display:flex;
}
.list-tree-control{
order:1;
margin-left:0;
flex: 0 0 auto;
}
.list-tree-show{
order:2;
flex: 0 0 auto;
}
.list-tree-group > span{
order:3;
}
Updated by Riccardo De Contardi about 6 years ago
- Category set to Backend User Interface
Updated by Gerrit Code Review about 6 years ago
- Status changed from New to Under Review
Patch set 1 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/59136
Updated by Gerrit Code Review about 6 years ago
Patch set 1 for branch TYPO3_8-7 of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/59143
Updated by Andreas Fernandez about 6 years ago
- Status changed from Under Review to Resolved
- % Done changed from 0 to 100
Applied in changeset 81b542543a2c30de6a716d59e89b15fc5442f539.
Updated by Gerrit Code Review about 6 years ago
- Status changed from Resolved to Under Review
Patch set 2 for branch TYPO3_8-7 of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/59143
Updated by Gerrit Code Review about 6 years ago
Patch set 3 for branch TYPO3_8-7 of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/59143
Updated by Gerrit Code Review about 6 years ago
Patch set 4 for branch TYPO3_8-7 of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/59143
Updated by Andreas Fernandez about 6 years ago
- Status changed from Under Review to Resolved
Applied in changeset 754452b1cd3a1f47cf34dbf341a3713c2ea7beca.
Updated by Thomas Winkler about 6 years ago
- Has duplicate Bug #87214: List Tree Controls in Page Tree inside Link Browser not showing in correct lines with long page names or on small screen added
Updated by Andreas Kienast about 6 years ago
- Related to Bug #87280: Trees have different markup added
Updated by Riccardo De Contardi almost 6 years ago
- Related to Bug #87045: different pagetree in Backend and Link-wizard added
Updated by 
