CODEWITHSUNDEEP
htmlioscssiphonehybrid-mobile-app
user2058234
user2058234

Reputation: 126

CSS - Mobile button appears in different areas, different devices

I have a button in my hybrid mobile app which when viewed on an iphone 5 is in the area i want it (middle centre).

When i view it on a iphone 6 plus it moves around, now i know this is because of my css which is very specific but i was wondering if i could get some guidance how i can position a button which remains the same between devices (same location).

This is my css, all help appreciated :)

#divheader {

    position: relative;
}

#btn {
     position:absolute;
    left: 10px;
    top: 198px;
    text-align: center;
    color: #171e28;
  background-color: #f4af03;
  border-color: #ee9f05
}

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <link href="kendo/styles/StyleSheet.css" rel="stylesheet" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css" />

    <script src="http://cdn.kendostatic.com/2014.3.1411/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
<body>
<body>
   <div data-role="view" style="background-color: #212a33" id = "divheader" data-title="Blocks">
       <div data-role="navbar" id="test">
           <span data-role="view-title">My View Title</span>
        </div>
       <div style="background-color: #212a33">
           <div id=test3>
       <span class="description" id="test4">Currently in stock:</span>
                    <input id="numeric" type="number" value="17" min="0" max="100" step="1" />
           </div>
       <a id="btn" data-role="button" data-click="onClick" align="center" style="margin: 0 auto; width: 300px;" >Click me!</a>
       </div>
       <div id="test2">
       </div>
       </div>
   </div>

   <script>
        // the content of the document.body is used by default
       var app = new kendo.mobile.Application();
   </script>
   <script type="text/javascript">
    var div = document.getElementById('test2');

    div.style.height = document.body.clientHeight + 'px';
</script>



</body>
</body>
</html>

Upvotes: 1

Views: 4935

Answers (1)

Chris Jarling
Chris Jarling

Reputation: 375

You are right, your CSS is very specific with the absolute positioning. It always has a left spacing of 10px, which with it's width of 300px works well for the iPhone 5 which is 320px wide.

If you want to center the button no matter the width of the device I would go for margin: 0 auto; which you already wrote in the inline css of the button.
For an element to work with margin: 0 auto it has to fulfil some requirements which you can see here .

Your CSS would then look something like this

#btn {
  display: block;
  margin: 0 auto; 
  width: 300px;
  color: #171e28;
  background-color: #f4af03;
  border-color: #ee9f05;
  border: 1px solid; /*For the border color to work you need a border*/
}

The widthand margin are just moved there from the Buttons style-tag in the markdown.

Of course, this moves the button back in the header so if you don't want it in there you should declare it outside of the header in your markdown.

Edit:
For the button to be centred horizontally and vertically ind a div with the full height of the viewport the above code does not work.

First thing you could do to get rid of the javascript is to give the div a heightof 100vh (like explained here), but that's personal preference I guess.

For the CSS of the Button, this should work:

#btn {
  position: absolute;
  width: 300px;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  transform: translateY -50%;
  color: #171e28;
  background-color: #f4af03;

}

For the horizontal part we're giving the element a left spacing of 50%. Since it is then placed with it's left border at 50% of the page's width, we're correcting this with margin-left: -150px (moving the element back to the left by half of it's width).

For the vertical part we're doing basically the same, but we do not know the exact height here, so the position is corrected by transform: translateY -50%;.
(Source)

Upvotes: 2

Related Questions