dropdown mit download

bdt600 hat gesagt.:
@PeterPlus
Das hat mit oberschlau absolut nichts zu tun, man muss einfach nur mal nachdenken, dann kommt man von ganz alleine drauf. Aber wozu nachdenken, wenn andere das für einen machen, genau wie HTML/CSS/JavaScript schreiben.
Zum Vergrößern anklicken....
Sorry, wollte Dir nicht zu nahe treten, schließlich hast auch Du mir geholfen, wenn auch nicht so intensiv. Da ich hier im suchenden Zustand nach Lösungen bin und teils versucht habe KI einzuschalten - wenn auch mit nur geringem Erfolg - dachte ich an die geistige Verbindung "forensischer Untersuchungen" und habe das mit Allem verbunden, aber nicht mit dem Begriff "Forum".

Übrigens ist es eine Lebenseinstellung von mir, Talente und Wissen meinerseits weiterzugeben, wo gebraucht und nicht damit zu geizen, so wie es mir bei Dir erscheint.
Möglicherweise eine unbegründete Annahme, die ich ohnedies nicht belegen kann, also bitte nicht so ernst nehmen.

LG
Peter
 
Wie schon geschrieben liegt das an diesem CSS:
Code: 
@media (min-width: 600px)
.select2-option .option-text {
    grid-column: 2 / 3;
}
Code: 
@media (min-width: 600px)
.select2-option .dl-icon {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
}
Damit wird das Download-Symbol in die 3. Spalte verschoben und der Text in die 2., die dann frei ist. Lass alle grid-row- und grid-column-Anweisungen weg und alles ist gut.
 
Sempervivum hat gesagt.:
Wie schon geschrieben liegt das an diesem CSS:
Code: 
@media (min-width: 600px)
.select2-option .option-text {
    grid-column: 2 / 3;
}
Code: 
@media (min-width: 600px)
.select2-option .dl-icon {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
}
Damit wird das Download-Symbol in die 3. Spalte verschoben und der Text in die 2., die dann frei ist. Lass alle grid-row- und grid-column-Anweisungen weg und alles ist gut.
Zum Vergrößern anklicken....
 
Jetzt klappts endlich!

Der 2. Teil war ja schon drin, aber der Erste auch, und den habe ich jetzt gelöscht und daran lag es.

DANKE!
 
Sehr schön, dass Du die Lösung selbst gefunden hast.
Nur die Abstände sind ein wenig groß. Das liegt am Padding des Button:
Code: 
button {
    border: 2px solid blue;
    border-radius: 15px;
    background-color: #FFF8DC;
    color: blue;
    /* padding: 25px 24px; */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 30px;
    margin: 4px 2px;
    cursor: pointer;
}
Deaktivieren oder einfach ein span verwenden wie beim Download-Button.
 
PS: Einfacher wäre es jedoch gewesen, auf alle grid-row und grid-column zu verzichten, dann funktioniert das Layout genau so gut. Man braucht diese nur, wenn man z. B. Zellen überspannen will oder gezwungen ist, die Anordnung abweichend von der Reihenfolge im HTML fest zu legen, was beides in diesem Fall nicht der Fall ist. Du siehst ja, welche Verwirrung dadurch zu Stande gekommen ist.
 
Sempervivum hat gesagt.:
PS: Einfacher wäre es jedoch gewesen, auf alle grid-row und grid-column zu verzichten, dann funktioniert das Layout genau so gut. Man braucht diese nur, wenn man z. B. Zellen überspannen will oder gezwungen ist, die Anordnung abweichend von der Reihenfolge im HTML fest zu legen, was beides in diesem Fall nicht der Fall ist. Du siehst ja, welche Verwirrung dadurch zu Stande gekommen ist.
Zum Vergrößern anklicken....
Hallo,

versuche weiterhin Probleme selbst zu lösen und nach 2 Tagen ist es mir gelungen, das Symbol neben den Unterteilungen so klein zu machen, wie ich wollte- im Gegensatz zum großen Info-Symbol. Nur gelingt es mir jetzt nicht mehr, daß das Infofenster auf Klick darauf erscheint. Solange es nur einen "button" gab und alle gleich waren, ging das...: MF23-DOWNLOAD
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück