Erledigt - Placeholdertext wird vorn abgeschnitten

[Fugel]

Hallo Leute,

ich habe einen Placeholdertext der mir am Anfang abgeschnitten wird, hat einer ne Idee wie ich das weg bekomme? Das passiert im übrigen nur wenn ich den Type des Inputs auf "number" stelle, bei Type "text" ist alles ok.

Hab schon Das hier versucht aber ohne Erfolg:

.form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: $gradient_first !important;
  padding-left: 30px !important;
}
.form-control::-moz-placeholder { /* Firefox 19+ */
  color: $gradient_first !important;
  padding-left: 30px !important;
}
.form-control:-ms-input-placeholder { /* IE 10+ */
  color: $gradient_first !important;
  padding-left: 30px !important;
}
.form-control:-moz-placeholder { /* Firefox 18- */
  color: $gradient_first !important;
  padding-left: 30px !important;
}

 

[Myhar]

Stelle bitte genug Code bereit, damit wir das Problem auch nachvollziehen können.
Was man hier so sagen aknn: .form-control::-moz-placeholder ist doppelt deklarirert.

Du verwendest das Placeholder Attribut auch nicht als label-Ersatz, oder?
Versuche vielleicht so etwas zu verwenden? http://bradfrost.com/blog/post/float-label-pattern/

 

[Fugel]

Danke für deine Antwort, mehr Code gibts nicht, nur noch das was von Bootstrap kommt. Nein ich verwende es nicht als Label Ersatz.

 

[Myhar]

, mehr Code gibts nicht, nur noch das was von Bootstrap kommt.

Das stimmt leider nicht. Gehe ich auf https://getbootstrap.com/docs/4.0/components/forms/ und füge dort beim CSS deinen Code hinzu (inklusive korrekter Farbe) dann sehe ich dein Problem leider nicht. Also muss es da noch eine Abweichung zu bootstrap geben.
So können wir dein Problem leider nicht nachvollziehen.

 

[Fugel]

Fehler gefunden, es lag an der LineHeight der Schrift.

Aber gleich mal ne andere Sache:

Ich hab nen JS zum orten der Position, dieses lief bisher ohne Probleme, jetzt auf einmal kommt die Fehlermeldung:
Eine Geolocation-Anfrage kann nur in einem sicheren Kontext erfüllt werden. getLocation.js:35:8
error getLocation.js:29:9
Hier das Script Dazu:

$('#findLocation').click(function () {
  if (navigator.geolocation) {
  //alert("GeoLocation API ist verfügbar!");
  } else {
  //alert("GeoLocation API ist NICHT verfügbar!");
  }

  function success(position) {
  lat = position.coords.latitude;
  long = position.coords.longitude;
  //document.write('latitude: ' + lat + '<br>longitude: ' + long);
 
  }

  function error(msg) {
  console.log(typeof msg == 'string' ? msg : "error");
  }

  if (navigator.geolocation) {
  // getCurrentPosition ruft die Funktion success auf und übermittelt die Position Werte
  // error wird ausgeführt wenn es einen Fehler beim ermitteln der Position gibt
  navigator.geolocation.getCurrentPosition(success, error);
  } else {
  alert("GeoLocation API ist NICHT verfügbar!");
  }
});

Ne Idee wieso der Fehler kommt?

 

[Myhar]

Dein JS von dir gepostetes hat nichts mit der Darstellung der Website zu tun. Das hat keinen Einfluss auf die :laceholder Pseudoklassen.
Du musst natürlich für einen sicheren Kontext sorgen, sonst funktioniert geolocation nicht, das ist klar. Hat aber, wie gesagt, nichts mit deinem ursprünglichen Problem zu tun.