Set initial select2 height aber erlauben es, vertikal zu erweitern

Ich habe eine select2 Box, die ich nach oben, z. height: auto, aber ich möchte auch seine Anfangshöhe, z. height: 34px.Set initial select2 height aber erlauben es, vertikal zu erweitern

Wie kann ich das erreichen? Wenn ich versuche, beide zu setzen, überschreibt der eine den anderen. Ich versuche, die Box nach Bedarf vertikal zu erweitern, ohne eine Bildlaufleiste hinzuzufügen.

Ich habe andere Fragen wie this angeschaut, aber nirgends kann ich finden, wie man die Größe zu erhöhen erlaubt, sondern mit einem Anfangswert beginnt. Ich habe ein min-height eingestellt, aber auto schrumpft nicht, um mittlere Höhe zu passen — Ich bin nicht sicher, wo es den Anfangswert wirklich erhält.

Es scheint, als sei es ein Problem, das nur bei Select2 auftritt. height: auto 's Startgröße sollte min-height sein, richtig?

Quelle

2017-07-13 Sinjai

nur zwei Ideen: 1. könnte versuchen, das Schlüsselwort '! Wichtig' zu' min-height: 34px; 'oder height: auto; 2. Sie könnten versuchen, mit "%" anstelle von "px" zu arbeiten, um sicherzustellen, dass das Format gleich bleibt. – hansTheFranz

Ja, die Stile passen gut. Ich stoße auf ein grundlegendes Problem: Sie können natürlich nicht die gleiche CSS-Eigenschaft zweimal einstellen. Aber ich glaube, dass 'height: auto' anfänglich die Höhe auf' min-height' setzen sollte, und in diesem Fall nicht. Vielleicht muss ich 'height: 34px' einstellen, dann die Box mit JavaScript/jQuery überwachen und nach Bedarf erweitern. – Sinjai

Verwenden min-height: 34px; mit height: auto; sollte funktionieren. Versuchen Sie, das Code-Snippet auszuführen (wodurch sich die Größe des zweiten Divs nach 3 Sekunden verringert).

setTimeout(() => { 
 
$("#shrink").html("smaller text"); 
 
}, 3000);

.select2{ 
 
min-height: 34px; 
 
height: auto; 
 

 
background-color: rgba(0,100,0,1); 
 
margin: 5px; 
 
border: 1px solid lime; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="select2">Lorem ipsum dolor sit amet</div> 
 
<div id="shrink" class="select2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Eine andere Lösung Flexbox mit den grow und shrink Eigenschaften verwendet.
In diesem Fall müssen Sie Ihre .select2 in einen Wrapper div (die Flex-Container) mit mindestens display : flex wickeln und fügen Sie eine shrink: 1; und grow: 1; Eigenschaften die .select2 Klassen (die Flex Artikel). Diese werden als Proportion wirken, wenn Dinge wachsen oder schrumpfen.
See this code pen

.flex-wrapper{ 
    display: flex; 
    flex-flow: row wrap; 
} 
.select2{ 
    flex-shrink: 1; 
    flex-grow: 1; 
    min-height: 34px; 

    background-color: rgba(0,100,0,1); 
    margin: 5px; 
    border: 1px solid lime; 
}

NB:A guide to flexbox und Flexbox Playground gute Ressourcen sind aufstehen mit Flexbox zu beschleunigen.

Quelle

2017-07-13 19:25:08

Set initial select2 height aber erlauben es, vertikal zu erweitern

Antwort

Verwandte Themen