Hi All!
I am new here and I guess this isn’t really Ionic specific but I was wondering how can I keep all my content on the screen for different size devices. I have a main menu screen. It has a Logo and a couple of buttons. When I open it on iPhone 5 it looks great but when I open it on iPhone 4 it is put into a scroll view because the last button doesn’t fit into the viewport. How can I have the buttons automatically resize so they stay on the screen. I’ve included my example below.
Thanks!
index.html
<!DOCTYPE html>
<html>
<body ng-app="starter">
<ion-pane>
<ion-content has-bouncing="false"
start-y="55"
padding="true"
has-tabs="false"
has-header="false">
<div class="row" id="logoContainer">
<h1>Logo</h1>
<div id="rays"></div>
</div>
<div id="menuList">
<div class="row">
<button class="button button-block button-balanced">Lets Play!</button>
</div>
<div class="row">
<button class="button button-block button-energized">Leaderboard</button>
</div>
<div class="row">
<button class="button button-block button-royal">Settings</button>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
style.css
.scroll-content {
background-color: #0084B4;
}
html, body {
height:100%;
margin:0;
}
h1 {
position: relative;
text-align: center;
color: white;
font-size: 500%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
top: 0;
z-index: 2;
}
#logoContainer {
position: relative;
display: block;
max-width: 100%;
height: auto;
}
#menuList {
position: relative;
display: block;
top: auto;
height: auto;
bottom: 0;
margin: auto 0 0 0;
}
/* keyframes for animation; simple 0 to 360 */
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
#rays {
background: url(../img/rays.png) center center no-repeat;
position: absolute;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
top: -100px;
left: -100px;
bottom: -100px;
right: -100px;
width: 500px;
height: 500px;
-webkit-animation: spin 40000ms infinite linear;
-moz-animation: spin 40000ms infinite linear;
/* microsoft ie */
animation-name: spin;
animation-duration: 40000ms; /* 40 seconds */
animation-iteration-count: infinite;
animation-timing-function: linear;
}