Why not tell us you are developing on Kodular ?
You example project is of no use on AI2 because it contains Kodular specific components. (e.g. BottomSheet)
Ask on Kodular community.
1 Like
Because problem is not related with neither bottom sheet nor kodular. I thought, it may be related with extension and this is the main topic about this extention.
This is MIT appinventor version of the project. I removed bottom sheet and tested with MIT appinventor. Problem still exists.
By the way, I realized that the scrollTo problem is not related with older devices. I have just tried with Samsung S22 Ultra Android 13 and scrollTo acts same (scrolling not working).
However, showtable block acts different between older devices and newer devices. On newer devices, showtable block scrolls to row 1 automatically, but on Samsung GT-I9082 showtable block doesn't scroll to row 1, stays at same position.
Thanks in advance.
scroll_problem_mit(1).aia (50.6 KB)
OK, will take a look. Helps to remove all the other variables that could be causing an issue!
Yes, an issue with this, @Kevinkun will need to take a look
Even happens if you do not set has head to true, and fix tr:first-child to the top.
How can I change the header text color?
Something like:
th {color:red}
this should also work:
Is there any update from that problem?
I have checked this issue, and still can not find a solution.
the ScrollTo method seems not working when header is fixed.
Now one workaround is to use another copy of this extension to make a one-row table on top of the data table. and you may also need more css to adjust the width of each column.
Firstly, thanks for your time.
Q1) Is there another way to fix the first row that doesn't effect the ScrollTo block? (runJs, etc)
Q2)How about show table block?
You can most probably try a javascript function to scroll you to the top.....
Something like this?
const elmnt = document.querySelector("table tr:first-child");
elmnt.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
1 Like
this maybe because different phone use different webview, which support different javascript.
As @TIMAI2 said, you can try some js to scroll up after showtable.
you can test by yourself using native Webviewer +html+css+js.
Thank you very much. I think, this is the best workaround of that scrollTo problem.
How to do rounded corner with shadows like below image
Note: In below image shadows around table is not displayed, but I want shadows also to display the table as card
If it can be done, use CSS for this.
Tried with css, but rounding is not working
Screenshot of html table (browser)
Screenshot of table viewer extension (mobile)
CSS used are mentioned below -
table{
border: 10px solid DarkOrange;
border-radius: 13px;
border-spacing: 0;
}
th , td{
border-bottom: 1px solid DarkOrange;
padding: 10px;
}
Try this:
table { border-collapse: separate; border-spacing: 0; border: 1px solid grey; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } table tr:first-of-type { border-top-left-radius: 10px; } table tr:first-of-type td:last-of-type { border-top-right-radius: 10px; } table tr:last-of-type td:first-of-type { border-bottom-left-radius: 10px; } table tr:last-of-type td:last-of-type { border-bottom-right-radius: 10px; }
Note: this is without setting head = true
There are several other examples above and below the linked ref below:
1 Like
Another suggestion, put a blank row in the "row1" position? You may need to give it some "height" to match other rows.
