Für meine Web-Projekte benutze ich gerne Bootstrap. Man muss ja nicht alles selbst erfinden und dien Nutzung ist wirklich komfortabel. Außerdem kann man über CSS dann auch noch die Farben anpassen.
Und dann habe ich das Accordion benutzt. Dachte das wäre ein Musikinstrument.
Aber wie ändert man die Farben?
Auf der Suche nach einer Möglichkeit ein Icon oder Buchstaben vor einen Text zu setzen bin ich über folgenden Code gestolpert.
CSS:
initial {
align-items: center ;
display: flex ;
font-size: 12px ;
margin: 10px 0px 10px 0px ;
}
.initial::before {
content: attr( data-initials ) ;
align-items: center ;
display: flex ;
justify-content: center ;
background-color: #111111 ;
border-radius: 100% 100% 100% 100% ;
color: #ffffff ;
font-size: 12px ;
font-weight: 600 ;
height: 36px ;
letter-spacing: 1px ;
line-height: 12px ;
margin-right: 10px ;
text-transform: uppercase ;
width: 36px ;
}
HTML:
<div data-initials="A" class="initial">
This is a smaller text.
</div>
<div data-initials="A" class="initial">
This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text.
</div>Soweit so gut. Allerdings bemerkte ich schnell dass immer, wenn der Text zu lang war und es einen Umbruch gab, die runden Kreise mit den Buchstaben nicht mehr 36px groß waren, sondern zu Eiern schrumpften, obwohl im CSS so angegeben :-)
Der Grund ist, dass es einem Element standardmäßig erlaubt ist sich im Flexbox-Context zu verkleinern. Ein kleiner Eintrag im CSS behebt dies.
.initial::before {
...
flex-shrink: 0;
...
}Das Ergebnis sieht dann so aus:
Nach dem Update auf das Release Sequoia (15) funktioniert die Suche nicht mehr einwandfrei.
Nach längerer Suche fand ich einen Hinweis darauf, dass die Indexierung der Dateien nicht in Ordnung sein könnte.
Lösung
Folgende Befehle im Terminal eingeben:
Indexierung abschalten
sudo mdutil -Eai off
Indexierung erneut anschalten
sudo mdutil -Eai on
Indexierung prüfen
mdutil -as
Danach sieht man, dass der Index neu aufgebaut wird, allerdings erst wenn man im Spotlight einen Suchbegriff eingeibt.
Seite 3 von 8