PayPalPlus Paymentwall Loading-Icon

[noRiddle (revilonetz)]

Hallo Community.
Zur Info und als Tipp:
Wenn die Paymentwall für PayPalPlus auf der /checkout_payment.php lädt erscheint kurz ein animiertes Loading-Icon. Dieses ist etwas seltsam positioniert.
Im von PayPal geladenen Javascript wurde ich fündig was das Icon betrifft, es ist absolute positioniert.
Da das Standard-Shop-Template (und andere Templates bestimmt auch) jedoch keinen übergeordneten Container hat der positioniert ist, wird das oberste Element als Referenz für die absolute Positionierung genommen, nämlich html.

Wer das animierte Icon exakt in der Paymentwall sehen möchte und nicht mittig auf den Viewport bezogen  macht einfach folgendes im template-eigenen Stylesheet:

Code: CSS  [Auswählen]

#ppp_result {
    position: relative;
}

Bingo!

Gruß,
noRiddle

Linkback: https://www.modified-shop.org/forum/index.php?topic=36491.0

[awids]

Danke für die Antwort auf meine ungestellte Frage, noRiddle. Habe gestern für jemanden geprüft, ob PayPal Plus richtig angezeigt und geladen wird und da fiel mir das auch auf. Fand ich persönlich jetzt nicht soooo schlimm, dass ich sofort gehandelt hätte, aber gut zu wissen.

[noRiddle (revilonetz)]

Jau, ich fand es auch nicht sooo schlimm, aber da alles schön aussehen soll hat es mich doch genervt und mir keine Ruhe gelassen.

Wen interessiert wie die Styles des Icons die von PayPal geladen werden lauten, hier sind sie:

Code: CSS  [Auswählen]

.paypalplus_loader_spinner{
    box-sizing:content-box;
    height:150px;
    width:100%;
    position:absolute;z-index:10
}
.paypalplus_loader_spinner .paypalplus_loader_spinwrap{
    box-sizing:content-box;
    width:200px;
    position:absolute;
    top:35%;
    left:50%;
    margin-left:-100px
}
.paypalplus_loader_spinner .paypalplus_loader_anim{
    box-sizing:content-box;
    height:30px;
    width:30px;
    position:absolute;
    top:0;
    left:50%;
    margin:0 0 0 -23px;
    opacity:1;
    filter:alpha(opacity=100);
    -webkit-animation:rotation .7s infinite linear;
    -moz-animation:rotation .7s infinite linear;
    -o-animation:rotation .7s infinite linear;
    animation:rotation .7s infinite linear;
    border-left:8px solid #cccbcb;
    border-right:8px solid #cccbcb;
    border-bottom:8px solid #cccbcb;
    border-top:8px solid #6c7378;
    border-radius:100%}
    @-webkit-keyframes rotation{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}}
    @-moz-keyframes rotation{from{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(359deg)}}
    @-o-keyframes rotation{from{-o-transform:rotate(0deg)}to{-o-transform:rotate(359deg)}}
    @keyframes rotation{from{transform:rotate(0deg)}to{transform:rotate(359deg)}
}

Gruß,
noRiddle

[voodoopupp]

Teste PayPal Plus gerade erst aus, daher hatte mich das vorher nicht interessiert!

Somit besser spät als nie:
danke - hat mich auch genervt und wollte ich auch noch bereinigen das Problem

Grüße
Dominik