Issues with padding and margin on iOS devices

On my iPhone (iPhone 6, iOS 8), I noticed that the loader is positioned slightly above the button. However, when I use the Chrome mobile emulator, I can't see this issue. I'm puzzled about how to resolve it. What do you think could be causing this 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>

htmlioscss

Answer №1

What about trying a different approach using float right, like demonstrated 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;
}

Answer №2

Attempt setting padding and margin to 0 on the submitBtnWrap container element

However, a problem arises with the absolute positioning...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent the selection of Single Origin and House Blend options once the user opts for Espresso

<td> <select class="type"> <option value="Espresso">Espresso</option> <option value="" class="">Cappuccino</option> <opti ...

javascripthtmlweb

The primary section is not extending completely to the bottom, resulting in the footer not being aligned correctly at the bottom of the

Despite the numerous similar questions on Stack Overflow, I am struggling to get my footer positioned correctly on my page. The <footer> stubbornly remains 800px above the bottom behind the <main>. Even with various height options such as 100%, ...

htmlcss

The icon cannot be displayed using the <use> tag in HTML

While examining the source code, I stumbled upon the <use></use> tag. <use xlink:href="#icon-ghost"></use> I couldn't find extensive information about this particular tag. Can someone explain what it is and how it is typicall ...

htmlcss

Execute location.replace when the "control" key is pressed

document.addEventListener('keydown', (event) => { var name = event.key; var code = event.code; if (name === 'Control') { location.replace(classroom.google.com) } if (event.ctrlKey) { alert(`Combinatio ...

javascripthtmlcss

How can we centralize an image above text within a UL element?

Is there a way to achieve the effect shown in my mockup using just one unordered list (ul) instead of having separate ul elements for images and text? Essentially, I want to display an image with associated text below it within a single ul element using CS ...

csshtml-lists

Adding a detached element under certain conditions

When attempting to add a detached span based on a specific condition, I encountered the following situation. const arrow = d3 .create('span') .classed('arrow', true) .text('\u2192'); //d3.select('bod ...

javascripthtmld3.js

Registering your phone with Gigya

Currently, I am utilizing Gigya as the single sign-on system for my iOS application. It has been successfully integrated, allowing users to log in using their Twitter, Facebook accounts, or through manual email registration. However, due to the limitation ...

iosjsongigya

How can one address the issue of undefined data within table cells?

I have encountered an issue while reading and displaying an XML file on a webpage using a JavaScript script. The problem arises when the page loads, and the information inside the cells of the table shows as "UNDEFINED". The intended display should include ...

javascripthtmlxmlhtml-tableundefined

Something seems off with Chrome

I am facing a unique issue that I need help with. Unfortunately, the code is too long to post here but essentially it involves creating a menu for a website. The menu works perfectly and looks great on all browsers except for Chrome. This is unusual as Ch ...

htmlcssgoogle-chromefrontend

Troubleshooting: Scrollspy Bootstrap 4 functionality not functioning properly on Codepen

I’ve been experimenting with the Scrollspy feature in Bootstrap 4 for my Portfolio Page, but I’m facing some issues getting it to work properly on Codepen. After doing some research on StackOverflow, I came across a working example on Codeply, here’ ...

htmlbootstrap-4scrollspycodepen

What is the best way to add a right-hand side navigation bar without blocking the scrollbar from view?

Take a look at this webpage: I am designing a website that includes a header, a footer, and a central container with left and right navigation bars surrounding a content area. However, I want the scrollbar for the content to appear on the right side of th ...

css

Adaptable/Responsive Layout

Thank you for taking the time to look at this post. I am currently working on gaining experience with html, CSS, and JavaScript in hopes of entering the Front End Developer field. Today, I encountered a few issues while working on this adaptive design. He ...

htmlcssresponsive-design

The radio buttons fail to function properly or update when clicked

Seems like I am facing a strange issue....it seems simple (and trivial for some) but it just won't work. I have a basic div with some radio buttons that are not changing state when clicked... <div id="payments_tab" class="tab-pane fade" data- ...

htmltwitter-bootstrap-3radio-button

concise stylus CSS selector

Is there a way to condense these stylus selectors for a cleaner look? #map > div.mapboxgl-control-container > div.mapboxgl-ctrl-top-left > div:nth-child(1) > button #map > div.mapboxgl-control-container > div.mapboxgl-ctrl-top-left > ...

csscss-selectorsstylus

Maximizing the height of a flex container

Two flex containers are utilized: one for the navigation bar and the other for the page content. To make the content occupy the entire height of the page, the container's height was set to 100vh. However, a challenge arose when the navigation bar&apo ...

htmlcssflexbox

The scrolltop animation does not appear to be functioning properly on iOS devices

I have implemented a JavaScript effect to increase the line-height of each list item on my website as you scroll. It works perfectly on my Macbook and Android Smartphone, but for some reason, it's not working on an iPhone. Can anyone provide a solutio ...

javascriptiosscrollscrolltop

pictures showcased in a grid that dance and sway

Hey everyone, I wanted to ask about images on a website that have a unique effect when you hover over them. On the site follow your feet website, there is a grid section of destinations and when you move your mouse over a destination, it suddenly expands a ...

cssgridview

Tips for keeping my wordpress menu at the forefront

This piece of code is responsible for controlling the main menu on my website. Currently, it's set up so that when I scroll down, the menu disappears, and when scrolling up, it reappears. However, I would like the menu to always remain displayed at t ...

jquerycsswordpress

Create a rectangle with a specific color inside a CPTAxisLabel using core-plot

I'm looking to include a small rectangle inside a CPTAxisLabel to show a color. I've attempted drawing the rectangle on a layer and adding it as a sublayer, but it ends up stretching over the label and obscuring the text. I also tried using a CPT ...

iosobjective-ccore-plot

Attempting to personalize the CSS for a tab within a table in Material design is unsuccessful

Within my Angular 5 application, I have implemented the Material API. One of the components in my project is a table with 2 tabs structured like this: <mat-tab-group> <mat-tab> <mat-table> <!-- content --> </mat- ...

cssangularangular-materialangular5