How can I place a component so it is always at the bottom of the page?

[Xavier U]

I have made a image-slideshow out of the carousel component and I would like it to be placed at the bottom of the page. I was able to set this using margins, but when I test the app and turn it sideways, the margin puts the carousel off the screen.

How can I place the carousel so it is always at the bottom of the page regardless of phone orientation?

Here is a link to my app:
http://appery.io/app/mobile-frame?src...

[Maryna Brodina]

Hello!

Could you please post some screenshots of the issue?

[Xavier U]

I posted the public link to the app...

If you look at it you can see that the carousel is at the bottom of the screen when the phone is oriented vertically, but when you switch the orientation to horizontal, the carousel goes off the screen.

I should make it more clear that I want the carousel at the bottom of the screen, not the page (if the page goes off the screen).

I would like the carousel to appear at the bottom of the screen regardless of the orientation of the phone/tablet.

Here the phone is oriented vertically. The space between the "Meal Times" button and the carousel was created by using margin spacing. The carousel is at the bottom of the screen.

Here the phone is oriented horizontally. The space created by the margin places the carousel off the screen. I would like the carousel to be below the "Meal Times" button during this orientation.

[Yurii Orishchuk]

Hi Xavier,

You have two solutions:

1 Use position absolute for main container of the carousel and link this carousel to the bottom of the page. Details: http://www.w3schools.com/cssref/pr_cl...

2 Use "orientation change" event to change that margin manually.

Here is a code example of how to handle it:

pre

var orientationChange = function(e) {
var orientation="portrait";
if(window.orientation == -90 || window.orientation == 90) orientation = "landscape";
alert("orientation = " + orientation);
}

window.addEventListener("orientationchange", orientationChange, true);

/pre

In this code you should define current orientation and then set appropriate margin.

Regards.

[Xavier U]

Yurii,

Thank you for the suggestion, but it is not working for me.
I am using the CSS code for position:absolute, but it is not working.
According to W3C, the code is correct, so I am wondering if the selector is incorrect for the carousel?

The Code:

The Result:

[Yurii Orishchuk]

Hi Xavier,

Here is correct CSS code for this goal:

pre

.ui-carousel[name="mobilecarousel_286"]{
position: absolute;
left: 15px;
right: 15px;
bottom: 60px;
z-index: 10;
/* just for test purposes to see edge of the element */
border: 1px solid #f00;
}

/pre

Regards.

[Xavier U]

After some editing of the app, I decided I would like to accomplish the same thing, but with the components inside of a grid:

The carousel and the "menu" button are within the grid. I am using this CSS code, but am unsure if I am using it correctly because it has no effect:

.ui-grid [name="mobilegrid_26"] {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}

[Yurii Orishchuk]

Hi Xavier,

Please use following code instead of yours:

pre

/* note you should use your grid name instead of "mobilegrid_26" */
table[name="mobilegrid_26"]{
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}

/pre

Regards.