CODEWITHSUNDEEP
sencha-touch
David Watkins
David Watkins

Reputation: 95

How to center carousel images in sencha touch?

I have a carousel with images but the images appear to the left of the screen, other than that it works perfectly. I have tried putting the images inside a div with the style:

margin:0 auto, width: 300px;

but that doesn't work. I've tried various other things, such as playing around with different classes:

   .x-body x-carousel-item{
margin:0 auto; width: 264px;

}

But it never works quite right.

new Ext.Carousel({
items: [
],
height:200,
dockedItems: [myapp.toolbars.vehicleInfoToolbar],
indicator: false,

})

Items are added to the carousel dynamically, an example item is

new Ext.Panel({ html: imagearray })

Where imagearray is a standard tag.

Many thanks for any help on this, I've seen this problem on another forum without answer, hopefully someone here can shed some light on this one.

Upvotes: 2

Views: 2766

Answers (2)

Sean Glover
Sean Glover

Reputation: 520

What I did is specify a CSS class called "carouselImage", which sets "background-position: center;", and then I just specify via 'cls' attribute in the view config, or via setCls() method for the components to use that CSS class.

Upvotes: 0

ilija139
ilija139

Reputation: 2974

To set the padding inside the carousel's body use the bodyPadding property or wrap the image tag with div and set the text-align:center for that div.

Upvotes: 2

Related Questions