Render issues in browser - SOLVED

[StephB]

Dear all,
I have some render issues in my IW app and I don't know how to avoid them.

My app will be used for annual interviews, manager and employee have to reply to a set of questions before the appointment (in a form uQuiz). Then, during the appointment, they review their replies in grid and they have to reply to the same set of questions togheter (in a form uReview).
The list of questions is made of frames inserted in a IWRegion. Questions are built programmatically because I have different types to use (radio groups, memo, edit).

In uQuiz, everything is OK, the list a questions is created as expected (for this demo, I've added the sequence numbers of my questions to validate the list order).

(the green rectangle is the initial visible area of the scrollable region, I merged some screenshots to present the full region)

In uReview, the review table is OK, but the list of questions is not drawn in the expected order, every question after #4 is added just below #4.


The 2 forms uQuiz and uReview contain only a region to receive the questions. I use the same query to get the list of questions, with the same ORDER BY, and the frames are build using a shared procedure, so each form is suppose to do the same thing.
In both case, questions are processed in the correct order.
In uReview, if I refresh the page, the list is rebuild in the correct order.

Unfortunately, I tried to create a test case for you but I can't reproduce the same issue.
But my test case has another strange issue, maybe the origin is the same.
My test case randomly creates a list of questions (type radio group or memo, variable number of elements).
The main form contains 2 elements, a grid and a region to receive the questions frames.
In my HTML template, I want to display the grid then the region. When the app is launched, everything is ok.
But when I press Next or Previous to draw another group of questions, the region is displayed before the grid. Once again, if I refresh my page, the grid and the region are rebuild in the correct order, until I move to another group of questions.

Last problem, if I have to scroll down in my region containing the questions, when I move to another group, the scrollTop is not resetted to 0 and I don't see the new list of questions from the beginning.
This point also exists in my attached test case.

Hope you can understand my problem with my explanation only (not easy to descibe without the code), many thanks in advance for your help.

Regards,
Stéphane

[StephB]

Hi,
I found this old topic in another forum.
https://codeverge.com/forum/embarcadero....ct_2028964
The problem seems to be similar, and the solution at this moment was a fix in IW.

Do you think that trying to control the tab order of my frames can help me here ?

[StephB]

Fun facts with my problem.
I'm using HTML template to draw my pages.
To draw this page as expected, I'm using this html code :

Code:

<div class="mb-4">
    {%IWLabelGroupTitle class="h4 mb-4"%}
    {%IWGridAnswers%}
</div>
<div>
    {%IWRegionQuestions class="d-flex flex-column mb-4"%}
</div>

This code returns this page, same than in my 1st post :


If I swap my grid and my region in the HMTL code :

Code:

<div class="mb-4">
    {%IWLabelGroupTitle class="h4 mb-4"%}
    {%IWRegionQuestions class="d-flex flex-column mb-4"%}
</div>
<div>
    {%IWGridAnswers%}
</div>

I get this page, every new frame is added after 2nd frame instead of 4th frame :


And finally, if I remove my grid from the HTML code :

Code:

<div class="mb-4">
    {%IWLabelGroupTitle class="h4 mb-4"%}
</div>
<div>
   {%IWRegionQuestions class="d-flex flex-column mb-4"%}
</div>

I get this page :

This result is OK, frames are in the correct order.
But, even if the grid is not added to my HTML template, the grid is drawn at the end of the page.


I don't understand why my region is impacted by the presence and the position of the grid on the page.
Any idea ?

[StephB]

Last update (for today), I finally reproduced my problem in a test case.
The test case is made of 6 "pages" with a various number of frames to build.
Pages with more than 6 frames (pages 2, 4, 5) return unordered frames, but the result depends on whether I move forward or backward in the list.
Page 2 and 4, the frames are unordered when I move forward to the page, but the render is OK when I move backward.
Page 5, the result is always wrong, but the frames are not displayed in the same order between forward and backward moving.

I'm totaly lost 

[StephB]

Hi,
I made some tests today (removing my template, managing the region size by myself...), nothing works for the moment.

As a (ugly) workaround, I decide to manage the display of the frames using the CSS property "order".
I've created a set of 30 CSS classes, should be enough for the moment with this project.

Code:

.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
...

And when I create my frames, I assign the class .order-x to each frame (x is the sequence number).

In the structure of the html code, the frames are always unordered, but the display is OK.


This solution is acceptable for the end-users cause only the final display is important for them.
But for me, it can be a temporary solution only, I really want to understand how to fix the root cause of this issue, I'm thinking to my next project and I will probably meet the same problem with a longer list of frames to manage.

[Alexandre Machado]

Hi StephB,

I'll need some time to run and try to understand your test case and the nature of your issue.

I'll add this to my backlog and will get back to you on this ASAP, ok?

Kind regards,

[StephB]

Hi StephB,

I'll need some time to run and try to understand your test case and the nature of your issue.

I'll add this to my backlog and will get back to you on this ASAP, ok?

Kind regards,

Hi Alexandre,
Thank you for your time, I will keep on eye on this topic, hope you will find a way to help me with this issue.

Best regards,
Stéphane

[Alexandre Machado]

Hi Stéphane,

I tried the latest test case and I have some clues about the issue. I'm currently working on it and I expect to have some more information soon.

Cheers,

[Alexandre Machado]

Good news. I found the issue and it has already been fixed in our code base.

A new update fixing it will be available soon.

Cheers

[StephB]

Hi Alexandre,
Many thanks for your support.

Stéphane