JS positionierung
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angabe
ansatz
ausgangslage
blocken
boxen
code
container
element
gleichen dimensionen
helfer
idee
mai
position
positionieren
problem
text
textfeld
unteren rand
unterkante
url
-
Hi,
ich habe ein kleines spezifisches Problem:
ich x Textfelder und möchte diesen nun eine Dropdownbox anhängen.
Das Problem ist allerdings, wie ich die Dropdown positionieren muss. ich habe ja nur das textfeld-element. Wenn ich die box daginter hänge stört sie den Fluss. Also muss ich sie absolut setzen aber jetzt muss sie noch irgendwie an der Unterkante des Textfeldes kleben.
Am besten wäre es, wenn es eine einfache Möglichkeit gäbe.
Falls nicht habe ich mir überlegt, könnte ich ja ein element um das Textfeld setzen, das relativ positionieren und dann das Dropdown-Div absolut innerhalb der Box positionieren, aber das Problem dabei ist auch, dass es den Elementfluss falsch beeinflussen kann.
Vieleicht hatte jemand schonmal soein problem und es gibt eine einfache Lösung :)
Auf jeden Fall vielen Dank für eure Hilfe.
MFG -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo programmtools!
Ne Grafik oder ein Link zu deinem problem ist sehr hilfreich, nur leider nicht vorhanden! Bitte schick Uns doch sowas.
Hast du schon probiert deine Textboxen einfach linksbündig mittels
undinput[type="text"] { float: left; }
zu machen und anschließend einfach<input type="text" placeholder="Fütter mich" />
anfügst? Schmiegt sich super an de Textboxen ran, aber wie gesagt, dein Problem ist mir nicht ganz klar und ist für mich aus dem Text auch nicht ersichtlich.<select> <option value="blah">Blah</option> <option value="nope">Nope</option> </select>
LG -
Hi, ich versuches nochmal genauer zu erklären:
Also es geht darum (Beispiel zB Jquery Callendar-Picker) eine Box unter Textfeldern zu generieren.
Als Ausgangslage habe ich das Textfeld als Object (in JS als this).
Code habe ich nicht wirklich, nur welchen um die Felder zu finden, der gibt mir dann das Textfeldobject (this) also soweit nichts besonderes.
Jetzt muss ich nur irgendwie die box so positionieren, dass sie den Elementfluss der Seite nicht stört (also einfach überlagern, nicht verdrängen) und zudem so breit ist wie das Textfeld und ausserdem auch an der unteren Kante des Textfeldes liegt.
var parent = this.parentNode; var wrapper = document.createElement('div'); wraper.style.position = 'relative'; /* wie muss ich hier positionieren? */ parent.replaceChild(wrapper, this); wrapper.appendChild(this); //Dropdownbox var box = document.createElement('div'); box.style.position = 'absolute'; /* wie muss ich hier positionieren? */
Soweit mal die Idee, allerdings fehlen mir zB die Breiten.
Ich hoffe das hilft weiter! Vielen Dank,
MFG
-
hi,
der ansatz sieht doch schonmal gut aus...
deinen nachträglich zwischengeschobenen wrapper hast du mit position:relative schon ausreichend positioniert da du ihn ja nur als bezug zum drop-down-div benutzen, und nicht selbst verschieben willst.
damit das static-layout nicht vermurkst wird solltest du dafür sorgen das dein wrapper lieber als inline-block formatiert ist, da ein block-element ja immer die ganze verfügbare breite des elternelements einnimmt (und damit vielleicht breiter als das textfeld ist):
<script type="text/javascript"> wrapper.style.display = 'inlineBlock'; </script>
der wrapper sollte nun die gleichen dimensionen wie das textfeld haben, und somit kannst du dem dropdown-div einfach eine breite von 100% (des elternelements) zuweisen:
<script type="text/javascript"> box.style.width = '100%'; </script>
und um das dropdown-div am unteren rand des wrappers zu positionieren, wobei es sich nach unten hin vergrößern soll, kannst du die höhe des wrappers als top-angabe beutzen:
<script type="text/javascript"> box.style.overlow = 'show'; box.style.left = '0px'; box.style.top = '100%'; </script>
-
Hi, danke für deine Vorschläge, das sieht denke ich gut aus, aber es klappt nicht so ganz.
Ich stoße nämlich wieder an das problem, dass das relativ gesetzte Elterndiv selbst schon 100% hat.
Dazu kommt, dass das textfeld auch einen float haben kann, was das ganze wieder verkompliziert.
Hast du dazu eine Idee?
MFG -
hmm wie wäre es dann ohne wrapper und die box direkt absolut in den body ?
da du jquery erwähntest ginge das dann etwa so:
<script type="text/javascript"> var textfeld = this; $('<div>', { css: { 'position': 'absolute', 'top': textfeld.offset.top+textfeld.height(), 'left': textfeld.offset.left, 'width': textfeld.width() }, html: '<p>Inhalt der Box</p>' }).appendTo('body') </script> -
hcms schrieb:
hmm wie wäre es dann ohne wrapper und die box direkt absolut in den body ?
da du jquery erwähntest ginge das dann etwa so:
Hi, das hatte ich so ähnlich bereits versucht. er haut mir die Box dann irgendwo auf die seite :/
Die Breite passt zwar, aber es ist ganz links im unteren Drittel auf der Seite. das problem könnte auch sein, dass das Textfeld auf einem position: fiexed Container ist.
Ich bin jetzt etwas ratlos..
trotzdem vielen Dank und liebe Grüße
EDIT
warum kompliziert wenn mans geschenkt bekommt? Ich hab nochmal etwas rumgeschaut und Jquery bietet dazu passende Funktionalitäten :) Und schon klappts!
Vielen Dank nochmal an alle helfer :)
und einen angenehmen 1. Mai
Grüße
Beitrag zuletzt geändert: 1.5.2013 14:03:09 von programtools -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
