Easy trick table view scroll horizontally?
- D Oliveira
- AppGini Super Hero
- Posts: 347
- Joined: 2018-03-04 09:30
- Location: David
Easy trick table view scroll horizontally?
Hi, is there an easy code snippet to change orientation of scroll in tableview to horizontally? Instead of building record on top of record they would be side by side
Re: Easy trick table view scroll horizontally?
Hi D Oliveira,
mabey this helps:
https://duckduckgo.com/?q=chrome+scroll+page+horizontal
Following some links of my search this has a demo:
https://css-tricks.com/pure-css-horizontal-scrolling/
( inpage direct link: https://css-tricks.com/pure-css-horizon ... ling/#demo )
Olaf
mabey this helps:
https://duckduckgo.com/?q=chrome+scroll+page+horizontal
Following some links of my search this has a demo:
https://css-tricks.com/pure-css-horizontal-scrolling/
( inpage direct link: https://css-tricks.com/pure-css-horizon ... ling/#demo )
Olaf
Some postings I was involved, you might find useful:
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
- D Oliveira
- AppGini Super Hero
- Posts: 347
- Joined: 2018-03-04 09:30
- Location: David
Re: Easy trick table view scroll horizontally?
I tried implementing this css code in the tableview.html template but it didnt quite work, I think the way appgini builds that page is more elaborate than I thought, thank you for your contribution.
Re: Easy trick table view scroll horizontally?
Hi,
strange. As the side scrolling in the link above is made only by CSS, it would seem to me, that - if implemented correct (not meant to seem negative) - should also work in AG applications.
Ad AG makes use of bootstrap, you may need to make some CSS options more important maybe? I myself sometimes have problems finding the correct css path which makes a lot of fiddling around needed to get the effect I want. So, maybe more testing needed?
Olaf
strange. As the side scrolling in the link above is made only by CSS, it would seem to me, that - if implemented correct (not meant to seem negative) - should also work in AG applications.
Ad AG makes use of bootstrap, you may need to make some CSS options more important maybe? I myself sometimes have problems finding the correct css path which makes a lot of fiddling around needed to get the effect I want. So, maybe more testing needed?
Olaf
Some postings I was involved, you might find useful:
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
Re: Easy trick table view scroll horizontally?
Hi David,
you can try this in hooks/tablename-tv.js
Warning. This will remove all Class and attr setting. But you can adjust that to your needs.
you can try this in hooks/tablename-tv.js
Code: Select all
$j('.table-responsive table').each(function() {
var $this = $j(this);
var newrows = [];
$this.find("thead tr, tbody tr").each(function(){
var i = 0;
$j(this).find("td, th").each(function(){
i++;
if(newrows[i] === undefined) { newrows[i] = $j("<tr></tr>"); }
if(i == 1)
newrows[i].append("<th>" + this.innerHTML + "</th>");
else
newrows[i].append("<td>" + this.innerHTML + "</td>");
});
});
$this.find("thead tr, tbody tr").remove();
$j.each(newrows, function(){
$this.append(this);
});
});
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.
Re: Easy trick table view scroll horizontally?
Hi D Oliveira,
I'm not quite sure what exactly you mean. Maybe you mean some kind of "tile"-view?
I've been working on something like this for a while now.
It is pure Javascript using hooks in TABLENAME-tv.js.
The "card"-template can be configured in a very flexible way and I can use placeholdes for all available fieldnames like %first_name% and even %image%:
It already supports paging:
If you are interested in such an extension, you can contact me. If it's not what you meant, forget this article.
I'm not quite sure what exactly you mean. Maybe you mean some kind of "tile"-view?
I've been working on something like this for a while now.
It is pure Javascript using hooks in TABLENAME-tv.js.
The "card"-template can be configured in a very flexible way and I can use placeholdes for all available fieldnames like %first_name% and even %image%:
Code: Select all
// fragment:
// ...
.setTitleTemplate('Patient <b class="pull-right">%PK%</b>')
.setTemplate('<div style="min-height: 160px;"><p class="text-center" style="min-height: 64px"><img src="%image%" clss="img-responsive" /></p><b>%last_name%</b>, %first_name% %middle_names%<p>Age: %age%</p></div>')
// ...
If you are interested in such an extension, you can contact me. If it's not what you meant, forget this article.
Kind regards,
<js />
My AppGini Blog:
https://appgini.bizzworxx.de/blog
You can help us helping you:
Please always put code fragments inside
AppGini 24.10 Revision 1579 + all AppGini Helper tools
<js />
My AppGini Blog:
https://appgini.bizzworxx.de/blog
You can help us helping you:
Please always put code fragments inside
[code]...[/code]
blocks for better readabilityAppGini 24.10 Revision 1579 + all AppGini Helper tools
- D Oliveira
- AppGini Super Hero
- Posts: 347
- Joined: 2018-03-04 09:30
- Location: David
Re: Easy trick table view scroll horizontally?
Thank you all for your time and for bringing insightful solutions, I tried the above js code in the tablename-tv.js and nothing really happened, I did some changes in the templateTV html file and Im guessing this is generating some conflict for this code to work. No console error though. Jan your solution would work perfectly Im just skeptical because my app is stuck in 5.81 with a lot of custom work, I would not be able to update this app to current Appgini version and add your library without popping hundreds of errors when replacing some core files. This app is very stable and bug free and by reading feeback here in the forum I've seen folks run into all kinds of issues when updating to 5.9+, Im gonna play around with some .css and try to make it work manually, thanks guys!
Re: Easy trick table view scroll horizontally?
Hi,
let us know how (not if ) you get it to work for you.
Take care
Olaf
let us know how (not if ) you get it to work for you.
Take care
Olaf
Some postings I was involved, you might find useful:
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view