I noticed the difference in between how app is getting displayed on mobile device differently than in the desktop editor. In this instance the timestamp column is missing from the mobile app.
Is there another way of bug reporting?
Soone seems to care to take a look at this for a week now and making excuses during design reviews is getting old.
Hi @Scottsky,
Thanks for reporting this, are you seeing this with any other apps? In case you have another app which has a collectionview?
Looking at this right now.
Appreciate your help Sid!
Just this screen alone has 2 more collection views and this is the only one that's broken.
-
Steps I took - minimised the amount of content in other columns to make sure it fit's. And yes it fit's just adds lines.
-
Shortened the time-stamp didn't work.
-
Tried pasting this collection to some other screen - no luck.
Do you mind sharing the app over email? I'm sid@retool
and can you also share the screensize you're trying this on? is this iOS or Android?
Sent.
4096 × 2304 and 2880 × 1800 same resault
I dodged the question on this design review, but I would really love to know if I should redesign the entire screen for the nex one or there is some solution to this?
I am still experiencing the issue I am not able to troubleshoot myself. This is the framework issue I would like someone to finally resolve. Every single design review I'm asked when is this getting fixed. And when I mention that I created a ticket but got no response I'm asked to look in to alternative frameworks.
Please can I het some update here? Thank you.
Just curious - what are the elements you are using in the collectionview? Is the timestamp just a text element?
A simple {{ item.formatted_timestamp}} pulled from the table with query with this code: TO_CHAR(ad.timestamp, 'MM-DD HH24:MI') as formatted_timestamp
I used a simple collectionview with 4 text elements inside and it seems to render just fine on android. Are you using a different set of elements inside your collection? I just used a static object to test with.
My case is 3 containers with plain text elements populated from the table.
My problem is that the preview shows it to me correctly and I don't know how to troubleshoot something that shows working fine when I check it in the desktop preview.
but ends up loosing first row of the table on ios
and does this mess on an android:
Please advise, how should I approach this than? Design reviews are done on a projector using desktop preview, so at this point everyone expects this functionality implemented. What should I say to execs asking me why the mobile app works and looks not the way they were shown a second ago in the big screen?
"It's an interface glitch support is looking in to it"...
got old after a month. Should I tell the team that current framework is unable to display desired element and they will need to rethink it in context of what the platform is capable of? Or should I keep waiting for someone from Retool to actually fix something that's not working as expected?
I cant answer those questions for you, but i can see if there is a workaround!
So you have a container around each text element?
so:
Collectionview
->Container
->->Text
->Container
->->Text
->Container
->->Text
why dont you just place the text directly in the collection view, rather each inisde there own containers? Whats the purpose of that? Unless i am misunderstanding
Containers in this instance are meant to provide additional styling options text element lacks such as formatting or changing the background color of a row if it needs to be highlighted.
Here i the same element with nested containers removed:
Not exactly that slim 3 row table anymore. It's suppose to be compact summary that I was hoping to fit in the header of a collapsible list with details...
So at this point should I be massaging my data to shrink it till fits? Or there is something else left to try?
Point taken! I wonder if you could use the new html element effectively?
here is some simple html that renders nicely for me on android:
<table style="width: 100%; border-collapse: collapse; border-bottom: 1px solid rgba(0, 0, 0, 0.5);margin:10px">
<tr>
<td style="width: 15%; border-bottom: 1px solid rgba(0, 0, 0, 0.5);">R1c1</td>
<td style="width: 55%; border-bottom: 1px solid rgba(0, 0, 0, 0.5);">R1c2</td>
<td style="width: 15%; border-bottom: 1px solid rgba(0, 0, 0, 0.5);">R1c3</td>
<td style="width: 15%; border-bottom: 1px solid rgba(0, 0, 0, 0.5);">R1c4</td>
</tr>
<tr>
<td style="width: 25%; border-bottom: 1px solid rgba(0, 0, 0, 0.5);">R2c1</td>
<td style="width: 25%; border-bottom: 1px solid rgba(0, 0, 0, 0.5);">R2c2</td>
<td style="width: 25%; border-bottom: 1px solid rgba(0, 0, 0, 0.5);">R2c3</td>
<td style="width: 25%; border-bottom: 1px solid rgba(0, 0, 0, 0.5);">R2c4</td>
</tr>
<tr>
<td style="width: 25%; border-bottom: 1px solid rgba(0, 0, 0, 0.5);">R3c1</td>
<td style="width: 25%; border-bottom: 1px solid rgba(0, 0, 0, 0.5);">R31c2</td>
<td style="width: 25%; border-bottom: 1px solid rgba(0, 0, 0, 0.5);">R3c3</td>
<td style="width: 25%; border-bottom: 1px solid rgba(0, 0, 0, 0.5);">R3c4</td>
</tr>
</table>
Now, if your data is sometimes more than 3 rows etc, you could have this dynamically generated via a javascript function and have that be the source of the html element, etc. But you should be able to style it fairly nice.
Indeed it does display better.
At least much more manageable as an element this way.
Downside I presume is inability to generate dynamic size table with {{item.}}
Inconsistency in between preview and actual app deployment is still there.
Makes me keep the phone handy reopening the app to refresh. Slows me down badly.
Any chance this can be looked in to?
Are you cloud or self hosted?