|
|||
Eigene Dropdown - auf 100% des längsten Eintrags sowie Verlinkung über ganzen Länge
Abend,
ich habe den nachfolgenden Quellcode nach Vorbild umgebaut: https://codepen.io/markcaron/pen/wdVmpB HTML-Code:
<style> .dropdown { position: relative; display: inline-block; background: white; } .dropdown > input[type="checkbox"] { position: absolute; left: -100vw; } .dropdown > label, .dropdown > a[role="button"] { display: inline-block; padding: 5px; border: 1px solid black; } .dropdown > label:after, .dropdown > a[role="button"]:after { content: "\f0d7"; font-family: FontAwesome; display: inline-block; } .dropdown > ul { position: absolute; z-index: 999; display: block; left: -100vw; top: calc(1.5em + 14px); border: 1px solid black; background: white; padding: 5px; margin: 0; width: calc(100% - 12px); cursor: pointer; } .dropdown > ul li:hover, .dropdown > ul li:focus { background: #A9BCF5; } .dropdown > input[type="checkbox"]:checked ~ ul, .dropdown > ul:target { left: 0; } </style> <div class="dropdown"> <input type="checkbox" id="my-dropdown" value="" name="my-checkbox"> <label for="my-dropdown" data-toggle="dropdown"> Alle Namen anzeigen </label> <ul> <li> <button type="submit" name="filename" value="file1"> <p style="font-size: 14px; margin: 0px; display: inline;">file1</p> </button> </li> <button type="submit" name="filename" value="file2"> <p style="font-size: 14px; margin: 0px; display: inline;">file1</p> </button> </li> <button type="submit" name="filename" value="file3"> <p style="font-size: 14px; margin: 0px; display: inline;">dieser name ist aber sehr sehr sehr lang</p> </button> </li> </ul> </div> |
Sponsored Links |
|
||||
meinst du so ? Oder soll der oberste auch so breit sein wie der länste eintrag des Untermenüs https://codepen.io/basti1012/pen/bOEgqe?editors=1100
EDIT: oh sorry habe das falsche bearbeitet ein moment nochmal. EDIT so jetzt aber Ich würde den ganzen kram in etwa so machen. https://codepen.io/basti1012/pen/maVRpy?editors=1100 Auch die buttons würde ich links ändern. Aber solange man nicht mehr weiß über dein vorhaben würde ich es mal so versuchen Geändert von basti1012 (13.12.2018 um 20:45 Uhr) |
Sponsored Links |
|
|||
Morgen,
danke schon mal dafür... Habe den Quellcode jetzt nochmal nach meinen Bedürfnissen angepasst und habe jetzt das Problem eines dunkelgrauen Feldes unter dem Dropdownfeld, welches immer genau so hoch wie die Einträge sind. Das soll weg. In der angehängten Grafik sieht man noch mein anderes Problem ...ich habe drei Container untereinander (Dropdown, 2 und 3) und möchte, dass das ausgeklappte Dropdown genauso breit werden wie die anderen Container 2 und 3. HTML-Code:
<style> .dropdown > input[type="checkbox"] { display:none; } .dropdown > label, .dropdown > a[role="button"] { display:block; padding: 5px; border: 1px solid black; background: white; } .dropdown > label:after { content: "\f0d7"; font-family: FontAwesome; display: inline; } .dropdown > ul > li{ list-style:none; } .dropdown > ul { position:relative; left: -100vw; display: inline-block; border: 1px solid black; padding: 5px; background: white; width: calc(100% - 12px); } .dropdown > input[type="checkbox"]:checked ~ ul, .dropdown > ul:target { left: 0; } button{ font-size: 14px; font-family: monospace; padding: 0px; width: 100%; left: 0; border: 0px; background: white; text-align: left; } button:hover{ background: lightblue; } </style> <div class="dropdown"> <input type="checkbox" id="my-dropdown" value="" name="my-checkbox"> <label for="my-dropdown" data-toggle="dropdown"> Alle Files anzeigen </label> <ul> <li> <button type="submit" name="button" value="file1">file1</button> </li> <li> <button type="submit" name="button" value="file2">file2</button> </li> <li> <button type="submit" name="button" value="dieser name ist sehr lang lang">dieser name ist sehr lang lang</button> </li> </ul> </div> Geändert von halloICKEbins2 (14.12.2018 um 14:03 Uhr) |
|
|||
Habe mir jetzt das Listfeld gebastelt und möchte, dass es sich auch wenn leer auf 100% Höhe ausdehnt!
Angehängtes Bild ist jetztiger Sachstand: HTML-Code:
<style> .list > ul { position: relative; left: 0; display: inline-block; border: 1px solid black; padding: 5px; background: white; width: calc(100% - 12px); } .list > ul > li{ list-style:none; } button{ font-size: 14px; font-family: monospace; padding: 0px; width: 100%; left: 0; border: 0px; background: white; text-align: left; } button:hover{ background: lightblue; } </style> <div class="list"> <ul> <li> <button type="submit" name="filename" value="file1-1">file1-1</button> </li> <li> <button type="submit" name="filename" value="file1-2">file1-2</button> </li> <li> <button type="submit" name="filename" value="file1-3">file1-3</button> </li> </ul> </div> |
|
||||
Zitat:
Da brauche ich nee bessere erklärung oder nee zeichnung wie das aussehen soll. Dein anderes Problem kann man so lösen https://codepen.io/basti1012/pen/WLwvom?editors=1100 ist ein Eintrag größer wachsen alle Container mit. Für das andereproblem brauche ichmehr angaben |
|
|||
100% vom übergeordneten Container...
Habe einen Container left-side in welchem sich das Dropdown, Listfeld und Text (Nr. 3) befindet. Und das Listfeld soll also den Container left-side auf 100% füllen. |
|
|||
Sorry aber hat ein wenig länger gedauert...
Hier jetzt mal die ganze Seite. https://codepen.io/halloICKEbins2/pen/qLNKbO Ich würde gerne, dass der längste Eintrag im Dropdownfeld bzw. Listfeld die Breite des Dropdown bzw. Listfeld bestimmt. left2 (Liste) soll die linke Spalte in der Höhe auf 100% auffüllen, so dass noch left1-3 auf eine Seite passt, also in den wrapper. Ist es möglich, das aufgeklappte Dropdown ohne Abstand an das Dropdown zu heften? Ist es möglich den Pfeil im Dropdown an den rechten Rand zu schieben (float: left)? LG |
Sponsored Links |
|
||||
Möglich ist fast alles wenn man es kapiert. Ich habe es nicht kapiert wie du es haben willst. Wenn du mir eine Zeichnung machen kannst wie es aus sehen soll dann ist das kein Problem. Nur ,so weiß ich nicht genau was du möchtest außer das das die Boxen so breit sein soll wie Schrift die in der Box ist .
Falls einer von den anderen das verstanden hat werden die das bestimmt vorher posten. Falls keiner schreiben tut dann brauche ich halt nee Zeichnung oder so was von dir , MFG Sebastian |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Nach Benutzung des Dropdown Feldes, Aktion starten | Marlon | (X)HTML | 0 | 09.03.2016 15:40 |
Zeilenüberlappung bei margin-top mit negativem Wert | c.weber.os | CSS | 15 | 15.10.2005 16:11 |