Ryan Ryan - 2 months ago 14
Android Question

Absolutely positioned element not correctly aligned inside relative div

In my Cordova based app I've got a div that's supposed to show a graphical representation of a UK Licence Plate.

This is how it's supposed to look:

intended appearance

(how it displays on iOS - Cordova ver 3.8)

However, on Android, Cordova ver 4.1.1, it appears like this instead:

actual appearance

The snippet is as follows, demonstrating the issue. Any help would be much appreciated.



.registration-plate-container {
text-align: center;
}

.registration-plate-ui {
background: linear-gradient(to bottom, #f8d038 0%, #f5ca2e 100%);
padding: .25em 1em .25em 1.75em;
font-weight: bold;
font-size: 2em;
border-radius: 5px;
border: 1px solid #000;
box-shadow: 1px 1px 1px #ddd;
position: relative;
font-family: helvetica, ariel, sans-serif;
}

.registration-plate-ui:before {
content: 'GB';
display: block;
width: 30px;
height: 100%;
background: #063298;
position: absolute;
top: 0;
border-radius: 5px 0 0 5px;
color: #f8d038;
font-size: .5em;
line-height: 85px;
padding-left: 5px;
}

.registration-plate-ui:after {
content: '';
display: block;
position: absolute;
top: 7px;
left: 5px;
width: 20px;
height: 20px;
border-radius: 30px;
border: 1px dashed #f8d038;
}

<div class='registration-plate-container'><span class='registration-plate-ui'>AB12 CDE</span></div>




Answer

.registration-plate-container {
    /* text-align: center; */ /* throws off position property centering */
    position: relative;       /* this is the actual container element,
                                 so set the boundaries here for abspos children */
     height: 75px;            /* for demo only */
     border: 1px dashed red;  /* for demo only */
}

.registration-plate-ui {
    background: linear-gradient(to bottom, #f8d038 0%, #f5ca2e 100%);
    padding: .25em 1em .25em 1.75em;
    font-weight: bold;
    font-size: 2em;
    border-radius: 5px;
    border: 1px solid #000;
    box-shadow: 1px 1px 1px #ddd;
    position: absolute;          /* changed from 'relative` */
    left: 50%;                   /* center horizontally */
    transform: translateX(-50%); /* center fine-tuning */
    font-family: helvetica, ariel, sans-serif;
}

.registration-plate-ui:before {
    content: 'GB';
    display: block;
    width: 30px;
    height: 100%;
    background: #063298;
    position: absolute;
    top: 0;
    left: 0;               /* tell it where to go */
    border-radius: 5px 0 0 5px;
    color: #f8d038;
    font-size: .5em;
    line-height: 85px;
    padding-left: 5px;
}

.registration-plate-ui:after {
    content: '';
    display: block;
    position: absolute;
    top: 7px;
    left: 5px;
    width: 20px;
    height: 20px;
    border-radius: 30px;
    border: 1px dashed #f8d038;
}
<div class='registration-plate-container'><span class='registration-plate-ui'>AB12 CDE</span></div>