1

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>

2 Answers 2

1

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; } 
Sign up to request clarification or add additional context in comments.

Comments

0

Try padding 0 and margin 0 in the container element submitBtnWrap

But the issue is the absolute positioning...

2 Comments

what are you trying to say?
Try this first.submitBtnWrap { position: relative;padding:0px; margin:auto;margin-top:0px;}

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.