PDA

View Full Version : How to Center a HTML element in the CENTER of a Card Panel?



christopher108+sencha
3 Jul 2011, 4:23 PM
How do I center a HTML element in the center of PANEL using the CARD layout?

Here's the sample code:

var card1 = {
//dock: 'top',
style: "background-color: #ffffff; color:amber;",
title: "Title Panel",
// There has to be cleaner and better way then the following
html: '<style type="text/css">#myinnercontainer {position:absolute; top:40%; left:40%;}</style><div id="myinnercontainer">Title Panel</div>'
};


rootPanel = new Ext.Panel({
fullscreen: true,
cardSwitchAnimation: {type: 'fade', duration: 500},
layout: {
type: 'card'
},
items: [card1],
dockedItems: [toolbar]
});

Thanks in advance.

borden0108
4 Jul 2011, 1:40 AM
So you just want to create a panel that has html text in the center of it?

christopher108+sencha
4 Jul 2011, 4:22 AM
Yes.

christopher108+sencha
4 Jul 2011, 7:00 AM
CORRECTION: I would like to put an image in the center of the Panel (panel is using the card layout).

borden0108
5 Jul 2011, 5:10 AM
just try css, its the quickest way to do this. find a tutorial on css it won't take you long to learn what you need to to learn.

sencha touch is based on

html5
css3
javascript

so you need to know all these things.

Appaddict
5 Jul 2011, 5:17 AM
Put this code in your div class or div id:


margin-left: auto; margin-right: auto;