With HTML5/JavaScript applications, item positioning on a screen falls into two categories: relative positioning or absolute positioning. Absolute positioning for mobile applications should be avoided (with few exceptions) since mobile devices vary greatly. Relative positioning can be tricky to get just right, however. Below are a few quick and easy tricks to position items better in your app!
Header Setup
A typical header region contains two things: a centered logo and a back button in the top left corner. (You should limit the area to include 1-2 other items since you don’t want to overcrowd the space.) If you use Sencha Touch’s spacing to set this up, you may notice that your logo will be off-centered because the items on each side of the logo are different sizes. We can do some simple CSS to avoid this eyesore.
If you want an item to appear in the top left:
.TopLeftButton {
position: absolute;
left: .2em;
}
If you want an item to appear in the top right:
.TopRightButton {
position: absolute;
right: .2em;
}
And for the centered logo:
.CenteredLogo {
height: auto;
margin: auto;
}
You’ll end up with something like this:
The code is setting a discrete constant distance between the left and the right buttons from the edge of the screen and marking the logo margins as equal to the left and to the right. (Note: Since the left and right buttons are position absolute, they do not factor into the margin calculation.)
Displaying a Button Image Over Button Text
In WebClient Mobile, the button image and button text will appear on the same line by default because they both use the Span HTML tag, which displays items on the same line. Getting around this issue is simple.
For the button CSS:
.Mybutton {
display: table-cell !important;
}
For the button image:
.Mybutton .x-button-icon {
vertical-align: top;
margin-left: auto;
margin-right: auto;
}
And for the button text:
.Mybutton .x-button-label {
display: table-row;
vertical-align: bottom;
}
This will produce a layout like this:
These methods will ensure that your carefully designed objects will display optimally on whatever device your customers choose!
By Abram Darnutzer / Sr. Application Consultant
