Antworten auf deine Fragen:
Neues Thema erstellen

Woher kommt die Dimension des input-Elements?

owieortho

Aktives Mitglied

Hallo,

irgendetwas übersehe ich gerade. Ich probiere gerade, dieses Beispiel aus:
HTML:
<!DOCTYPE html>
<html lang="de" xml:lang="de">
<head>
<meta charset="UTF-8">
<title>jQuery AJAX Autocomplete - Country Example</title>

<style>
body {
width:610px;
}
.frmSearch {
border: 1px solid #a8d4b1;
background-color: #c6f7d0;
margin: 2px 0px;
padding: 50px;
border-radius: 5px;
}
#country-list {
float: left;
list-style: none;
margin-top: -3px;
padding: 0;
width: 190px;
position: absolute;
}
#country-list li {
padding: 10px;
background: #f0f0f0;
border-bottom: #bbb9b9 1px solid;
}
#country-list li:hover {
background:#ece3d2;
cursor: pointer;
}
#search-box {
padding: 10px;
border: #a8d4b1 1px solid;
border-radius: 4px;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(){
    $("#search-box").keyup(function(){
        $.ajax({
        type: "POST",
        url: "readCountry.php",
        data:'keyword='+$(this).val(),
        beforeSend: function(){
            $("#search-box").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px");
        },
        success: function(data){
            $("#suggesstion-box").show();
            $("#suggesstion-box").html(data);
            $("#search-box").css("background","#FFF");
        }
        });
    });
});

function selectCountry(val) {
$("#search-box").val(val);
$("#suggesstion-box").hide();
}
</script>
</head>
<body>
<div class="frmSearch">
<input type="text" id="search-box" placeholder="Select country" />
<div id="suggesstion-box"></div>
</div>
</body>
</html>
Beim Versuch, den placeholder mit einem längeren Text zu versehen, wächst die Breite des Input nicht mit und verschluckt somit den zu langen Teil des Textes. Ich kann das zwar korrigieren, indem ich dem Input ein width-Attribut mitgebe, mich interessiert aber, woher die Breite der input#search-box herrührt. Der Inspektor zeigt mir eine Dimension von 159x38 an, die nirgends deklariert ist.

Danke schon mal vorab,
O.
 

Myhar

Hat es drauf

Jedes Element hat gewisse Standardgrößen die jeder Browser auch anders definieren kann. Nicht nur für input Felder sondern auch für Headlines, Text, Listen, etc.
Möchtest du andere Größen, bzw. ein anderes Verhalten dann musst du dies auch separat definieren.
Ein anderes Verhalten wäre zB ein "mitwachsen" des inputfeldes, das müsstest du selber erst mit JS umsetzen.
 

Curanai

Aktives Mitglied

Hi owieortho,

kennst Du "normalize"? Damit führt man sinnwahrend einen "reset" via CSS aus (dient einer möglichst gleichen Optik in verschiedenen Browsern). Das ist einfach nur CSS, was voran gestellt wird. Anschließend baut man auf diesem "reset" dann sein eigenes CSS auf. Das nur am Rande erwähnt, falls nach "Abholzen des Waldes" Unstimmigkeiten zwischen Chrome, FF, Edge usw. auftreten.

Ein Padding-Verhalten aufgrund placeholder ließe sich nur aufwendig via JavaScript lösen - und das erinnert mich dann wieder zu offenkundig an die Zeiten vor placeholder-Attributen. :) (Textbeschreibung aus value bei onfocus leeren usw.) ... ööörks, ich vermisse es nicht. :D

Beste Grüße und viel Erfolg.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.634
Beiträge
1.538.448
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben