CODEWITHSUNDEEP
htmlioscss
Jamie Anderson
Jamie Anderson

Reputation: 1493

Css padding / margin issue on ios device

When I view below result in my iphone (iphone 6, ios 8), the loader is slightly position upper of the button, but I can't see that when I inspect with chrome mobile emulator. I have no idea how to fix that, what do you think could be the cause of the problem? 

img.loader {
    text-align: center;
    width: 20px;
    margin: auto;
    display: block;
    position: absolute;
    right: 15px;
    top: 10px;
}
button {
    width: 100%;
    padding: 12px;
    background: #4aa3df;
    color: #fff;
    border: none;
    font-size: 14px;
    margin-bottom: 10px;
    cursor: pointer;
    box-sizing: border-box;
}
.submitBtnWrap {
    position: relative;
}
<br>
<br>
<div class="submitBtnWrap">
    <button id="login_submit" class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    <img src="http://i.imgur.com/ScvlxYo.gif" class="loader">
</div>

Upvotes: 1

Views: 14403

Answers (2)

Kinburn101
Kinburn101

Reputation: 1162

What if you used float right instead like in this Example:

img.loader {
  text-align: center;
  width: 20px;
  float:right;
  margin:0;
}
button {
  width: 100%;
  padding: 8px;
  line-height:20px;
  background: #4aa3df;
  color: #fff;
  border: none;
  font-size: 14px;
  vertical-align:middle;
  cursor: pointer;
  box-sizing: border-box;
}
.submitBtnWrap {
  position: relative;
}

Upvotes: 1

MostHost LA
MostHost LA

Reputation: 26

Try padding 0 and margin 0 in the container element submitBtnWrap

But the issue is the absolute positioning...

Upvotes: 0

Related Questions