zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Eigene Dropdown - auf 100% des längsten Eintrags sowie Verlinkung über ganzen Länge

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.12.2018, 18:56
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard 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>
Jetzt würde ich gerne als letzten das Dropdown so breit machen wie der längste Eintrag und des Weiteren soll die Verlinkung auch über die komplette Breite funktionieren?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.12.2018, 20:19
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 142
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.12.2018, 10:21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard

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>
Angehängte Grafiken
Dateityp: png pic01.png (5,9 KB, 38x aufgerufen)

Geändert von halloICKEbins2 (14.12.2018 um 14:03 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 14.12.2018, 10:40
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard

Auf Position 2 soll übrigens ein Listenfeld entstehen, welches sich scrollen lässt.
Wie sollte ich dort den Ansatz wählen (ich möchte weiterhin ohne "onclick" arbeiten).
Mit Zitat antworten
  #5 (permalink)  
Alt 14.12.2018, 14:08
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard

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>
Angehängte Grafiken
Dateityp: png pic02.png (3,5 KB, 36x aufgerufen)
Mit Zitat antworten
  #6 (permalink)  
Alt 14.12.2018, 17:33
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 142
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von halloICKEbins2 Beitrag anzeigen
Habe mir jetzt das Listfeld gebastelt und möchte, dass es sich auch wenn leer auf 100% Höhe ausdehnt!
100% Prozent von was. meinst du vom Bildschirm ? Vpm überliegenden Container ? Der in diesen Beispiel wäre das der body was so eigentlich nicht besonders passen würde ?
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
Mit Zitat antworten
  #7 (permalink)  
Alt 14.12.2018, 19:56
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 14.12.2018, 23:27
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 142
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

zeig doch mal link zur seite oder deinen ganzen Code ? So komme ich nicht weiter weil ich nur die hälte verstehe.
Wenn das eine Menü 100% ausfüllen soll , wo soll den das andere menü hin und deine liste ?
Verstehe das gerade nicht deswegen poste mal link oder komplett code. Oder benutze meine Beispiele und setze den Container den du meinst auf 100% und kuck mal was passiert. Besser wäre auch auf flexbox umzusteigen . Aber das kann ich erst beurteilen wenn man den rest kennt
Mit Zitat antworten
  #9 (permalink)  
Alt 17.12.2018, 13:10
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2018
Beiträge: 35
halloICKEbins2 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 18.12.2018, 04:16
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 142
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:32 Uhr.