xpluni
xpluni

Reputation: 35

How to show a jquery mobile popup at the bottom of the page?

I'm not quite familiar with neither css nor jquery mobile.

Not sure whether I'm in a right direction but that closest I've got so far is to manage to stick the popup at the top of the page by assigning bottom: 0px; to .ui-popup-container

But this outer wrapper has inline style that overwrite the top position therefore I couldn't stick it to bottom.

{
    max-width: 432px;
    top: 272px;
    left: 125px;
}

Anyone can shed some lights for me?

Thanks.

Upvotes: 2

Views: 5066

Answers (1)

ezanker
ezanker

Reputation: 24738

You can do this with CSS. Set the top to auto and the bottom to 0:

.ui-popup-container {
    max-width: 100% !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100%;
}

DEMO

Upvotes: 5

Related Questions