Hello,
I need to display some tables for an ionic app, but some do not fit the mobile screen.
This solution would work beautifully
.table-container
{
width: 100%;
overflow-y: auto;
_overflow: auto;
margin: 0 0 1em;
}
and it functions from my phone using this link:
http://maxdesign.com.au/jobs/example-...
However, if I use the CSS above inside my app the horizontal scroll will only work from my desktop browser and not from my phone.
Suggestions?
Thanks,
Frank
Hello Frank,
Please set a CSS property overflow-y: scroll; there, or check a solution here: http://stackoverflow.com/questions/38...
Hi Serhil,
Thanks for your reply.
Unfortunately it's not working. I have spent my hours on this and my test suggest that it has to do with ionic in some ways...because the same CSS code shown above works on my iphone on a regular webpage outside the app.
Do you know what could cause this in the ionic/appery framework and some ways that I could circumvent it?
Thanks so much,
Frank
Please share (https://docs.appery.io/docs/teams-sha...) your app with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a and provide us with the following information:
1) App name
2) Test credentials if login functionality is implemented in your app
3) Detailed steps to reproduce the issue
Found this solution:
wrap the table element around this element
ion-scroll scrollX='true' direction='x'
Hello Serhil,
I just run into a new problem. While the code above works when I manually enter it in an HTML element, it won't work if the html is loaded dynamically. I suspect I that I need to attach a ng-bind-compile.
i have created this javascript below to compile the html, but it returns this error: ReferenceError: $compile is not defined
How to I properly create an angular-js resource? The original code is here https://github.com/incuna/angular-bin... and i have been trying to adapt to the pre-exiting templates e.g. backButton.
Your help is appreciated.
===
define( [ 'require' ], function( ){
return [{
type: 'directive',
name: 'bindHtmlCompile',
deps: [directive_bindHtmlCompile]
}];
function directive_bindHtmlCompile(){
return {
restrict: 'A',
link: function(scope, element, attrs){
scope.$watch(function () {
return scope.$eval(attrs.bindHtmlCompile);
},
function (value) {
// In case value is a TrustedValueHolderType, sometimes it
// needs to be explicitly called into a string in order to
// get the HTML string.
element.html(value && value.toString());
// If scope is provided use it, otherwise use parent scope
var compileScope = scope;
if (attrs.bindHtmlScope) {
compileScope = scope.$eval(attrs.bindHtmlScope);
}
$compile(element.contents())(compileScope);
});
}
};
}
});
Please see this tutorial how to add custom modules to the AngularJS project: https://docs.appery.io/docs/appbuilde...