how to scroll horizontally in angular?
could you please tell me how to scroll horizontally In ionic+ angular .Actually I want to display data in grid view and four item in each slide .
I want to use in slide as shown in this url
http://ionicframework.com/docs/api/directive/ionSlideBox/
if there is more item in array example I take six 6 object .I need to ass slide and insert two item in another slide
In other words I need to display 4 or four item in each slide if there is more item in array I need to add slide which scroll horizontally here is my code
http://play.ionic.io/app/4a3adb5bb8f1
angular.module('app', ['ionic']).controller('firstContrl', function($scope) {
$scope.data = [{
name: " This is a basic jjj text."
}, {
name: " This is a basic Card1 text."
}, {
name: " This is a basic Card2 text."
}, {
name: " This is a basic Card3 text."
},
{
name: " This is a basic Card4 text."
},
{
name: " This is a basic Card5 text."
}]
})
angularjs angularjs-directive angularjs-scope ionic-framework ionic
asked Oct 20 '15 at 10:23
user944513user944513
3,2421360120
add a comment |
could you please tell me how to scroll horizontally In ionic+ angular .Actually I want to display data in grid view and four item in each slide .
I want to use in slide as shown in this url
http://ionicframework.com/docs/api/directive/ionSlideBox/
if there is more item in array example I take six 6 object .I need to ass slide and insert two item in another slide
In other words I need to display 4 or four item in each slide if there is more item in array I need to add slide which scroll horizontally here is my code
http://play.ionic.io/app/4a3adb5bb8f1
angular.module('app', ['ionic']).controller('firstContrl', function($scope) {
$scope.data = [{
name: " This is a basic jjj text."
}, {
name: " This is a basic Card1 text."
}, {
name: " This is a basic Card2 text."
}, {
name: " This is a basic Card3 text."
},
{
name: " This is a basic Card4 text."
},
{
name: " This is a basic Card5 text."
}]
})
angularjs angularjs-directive angularjs-scope ionic-framework ionic
asked Oct 20 '15 at 10:23
user944513user944513
3,2421360120
add a comment |
could you please tell me how to scroll horizontally In ionic+ angular .Actually I want to display data in grid view and four item in each slide .
I want to use in slide as shown in this url
http://ionicframework.com/docs/api/directive/ionSlideBox/
if there is more item in array example I take six 6 object .I need to ass slide and insert two item in another slide
In other words I need to display 4 or four item in each slide if there is more item in array I need to add slide which scroll horizontally here is my code
http://play.ionic.io/app/4a3adb5bb8f1
angular.module('app', ['ionic']).controller('firstContrl', function($scope) {
$scope.data = [{
name: " This is a basic jjj text."
}, {
name: " This is a basic Card1 text."
}, {
name: " This is a basic Card2 text."
}, {
name: " This is a basic Card3 text."
},
{
name: " This is a basic Card4 text."
},
{
name: " This is a basic Card5 text."
}]
})
angularjs angularjs-directive angularjs-scope ionic-framework ionic
asked Oct 20 '15 at 10:23
user944513user944513
3,2421360120
could you please tell me how to scroll horizontally In ionic+ angular .Actually I want to display data in grid view and four item in each slide .
I want to use in slide as shown in this url
http://ionicframework.com/docs/api/directive/ionSlideBox/
if there is more item in array example I take six 6 object .I need to ass slide and insert two item in another slide
In other words I need to display 4 or four item in each slide if there is more item in array I need to add slide which scroll horizontally here is my code
http://play.ionic.io/app/4a3adb5bb8f1
angular.module('app', ['ionic']).controller('firstContrl', function($scope) {
$scope.data = [{
name: " This is a basic jjj text."
}, {
name: " This is a basic Card1 text."
}, {
name: " This is a basic Card2 text."
}, {
name: " This is a basic Card3 text."
},
{
name: " This is a basic Card4 text."
},
{
name: " This is a basic Card5 text."
}]
})
angularjs angularjs-directive angularjs-scope ionic-framework ionic
angularjs angularjs-directive angularjs-scope ionic-framework ionic
asked Oct 20 '15 at 10:23
user944513user944513
3,2421360120
asked Oct 20 '15 at 10:23
user944513user944513
3,2421360120
asked Oct 20 '15 at 10:23
user944513user944513
3,2421360120
asked Oct 20 '15 at 10:23
user944513user944513
3,2421360120
asked Oct 20 '15 at 10:23
user944513user944513
3,2421360120
3,2421360120
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Try:
<ion-scroll direction="x" class="wide-as-needed">
Your content
</ion-scroll>
answered Oct 20 '15 at 10:27
ukszuksz
8,1551553105
actually it is dynamic .. mean may be there is 2 element and may be 2000 elemet
– user944513
Oct 20 '15 at 10:43
how to give width ?
– user944513
Oct 20 '15 at 10:44
could you you share plunker
– user944513
Oct 20 '15 at 11:06
add a comment |
Angular have a sidebar component.
npm install --save ng-sidebar
then Add SidebarModule to your app module:
import { SidebarModule } from 'ng-sidebar';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, SidebarModule.forRoot()],
bootstrap: [AppComponent],
})
class AppModule {}
and then
Your page content should be in some container with a ng-sidebar-content attribute.
<ng-sidebar-container>
<!-- container-->
</ng-sidebar-container>
answered Nov 20 '18 at 10:34
Reza JenabiReza Jenabi
1315
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f33234107%2fhow-to-scroll-horizontally-in-angular%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try:
<ion-scroll direction="x" class="wide-as-needed">
Your content
</ion-scroll>
answered Oct 20 '15 at 10:27
ukszuksz
8,1551553105
actually it is dynamic .. mean may be there is 2 element and may be 2000 elemet
– user944513
Oct 20 '15 at 10:43
how to give width ?
– user944513
Oct 20 '15 at 10:44
could you you share plunker
– user944513
Oct 20 '15 at 11:06
add a comment |
Try:
<ion-scroll direction="x" class="wide-as-needed">
Your content
</ion-scroll>
answered Oct 20 '15 at 10:27
ukszuksz
8,1551553105
actually it is dynamic .. mean may be there is 2 element and may be 2000 elemet
– user944513
Oct 20 '15 at 10:43
how to give width ?
– user944513
Oct 20 '15 at 10:44
could you you share plunker
– user944513
Oct 20 '15 at 11:06
add a comment |
Try:
<ion-scroll direction="x" class="wide-as-needed">
Your content
</ion-scroll>
answered Oct 20 '15 at 10:27
ukszuksz
8,1551553105
Try:
<ion-scroll direction="x" class="wide-as-needed">
Your content
</ion-scroll>
answered Oct 20 '15 at 10:27
ukszuksz
8,1551553105
answered Oct 20 '15 at 10:27
ukszuksz
8,1551553105
answered Oct 20 '15 at 10:27
ukszuksz
8,1551553105
answered Oct 20 '15 at 10:27
ukszuksz
8,1551553105
8,1551553105
actually it is dynamic .. mean may be there is 2 element and may be 2000 elemet
– user944513
Oct 20 '15 at 10:43
how to give width ?
– user944513
Oct 20 '15 at 10:44
could you you share plunker
– user944513
Oct 20 '15 at 11:06
add a comment |
actually it is dynamic .. mean may be there is 2 element and may be 2000 elemet
– user944513
Oct 20 '15 at 10:43
how to give width ?
– user944513
Oct 20 '15 at 10:44
could you you share plunker
– user944513
Oct 20 '15 at 11:06
actually it is dynamic .. mean may be there is 2 element and may be 2000 elemet
– user944513
Oct 20 '15 at 10:43
actually it is dynamic .. mean may be there is 2 element and may be 2000 elemet
– user944513
Oct 20 '15 at 10:43
how to give width ?
– user944513
Oct 20 '15 at 10:44
how to give width ?
– user944513
Oct 20 '15 at 10:44
could you you share plunker
– user944513
Oct 20 '15 at 11:06
could you you share plunker
– user944513
Oct 20 '15 at 11:06
add a comment |
Angular have a sidebar component.
npm install --save ng-sidebar
then Add SidebarModule to your app module:
import { SidebarModule } from 'ng-sidebar';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, SidebarModule.forRoot()],
bootstrap: [AppComponent],
})
class AppModule {}
and then
Your page content should be in some container with a ng-sidebar-content attribute.
<ng-sidebar-container>
<!-- container-->
</ng-sidebar-container>
answered Nov 20 '18 at 10:34
Reza JenabiReza Jenabi
1315
add a comment |
Angular have a sidebar component.
npm install --save ng-sidebar
then Add SidebarModule to your app module:
import { SidebarModule } from 'ng-sidebar';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, SidebarModule.forRoot()],
bootstrap: [AppComponent],
})
class AppModule {}
and then
Your page content should be in some container with a ng-sidebar-content attribute.
<ng-sidebar-container>
<!-- container-->
</ng-sidebar-container>
answered Nov 20 '18 at 10:34
Reza JenabiReza Jenabi
1315
add a comment |
Angular have a sidebar component.
npm install --save ng-sidebar
then Add SidebarModule to your app module:
import { SidebarModule } from 'ng-sidebar';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, SidebarModule.forRoot()],
bootstrap: [AppComponent],
})
class AppModule {}
and then
Your page content should be in some container with a ng-sidebar-content attribute.
<ng-sidebar-container>
<!-- container-->
</ng-sidebar-container>
answered Nov 20 '18 at 10:34
Reza JenabiReza Jenabi
1315
Angular have a sidebar component.
npm install --save ng-sidebar
then Add SidebarModule to your app module:
import { SidebarModule } from 'ng-sidebar';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, SidebarModule.forRoot()],
bootstrap: [AppComponent],
})
class AppModule {}
and then
Your page content should be in some container with a ng-sidebar-content attribute.
<ng-sidebar-container>
<!-- container-->
</ng-sidebar-container>
answered Nov 20 '18 at 10:34
Reza JenabiReza Jenabi
1315
answered Nov 20 '18 at 10:34
Reza JenabiReza Jenabi
1315
answered Nov 20 '18 at 10:34
Reza JenabiReza Jenabi
1315
answered Nov 20 '18 at 10:34
Reza JenabiReza Jenabi
1315
1315
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f33234107%2fhow-to-scroll-horizontally-in-angular%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
