Hoe voeg je een verticale scrollbalk toe aan de codeblokken?

Wanneer je lange codes binnen de codeblokken hebt, neemt het codeblok meer ruimte in beslag en vergroot het de artikellengte. Het is goed om een verticale scrollbalk te hebben voor de codeblokken wanneer hun grootte groter wordt dan een specifieke pixel. Bekijk de oplossing hieronder om dit te implementeren op je kennisbanksite.

Oplossing

Het toepassen van verticale scrollbalk in specifieke artikelen binnen KB Site 1.0-projecten

1. Voeg de onderstaande tag toe in je artikel waarvoor je een scrollbalk in codeblokken wilt.

   <div class="scroll">

2. Navigeer naar Instellingen () > Kennisbanksite > Site aanpassen > Aangepaste CSS en JavaScript in de Kennisbankportal.

   

3. Klik vanuit het linker navigatiepaneel op het CSS-tabblad en plak het volgende CSS-fragment:

   .scroll div.code-toolbar {
   height: 280px;
   overflow-x: hidden !important;
   overflow-y: auto !important;
   }

4. Voer de gewenste pixelgrootte in.

5. Klik rechtsboven op Opslaan .

   

Uitkomst

Om verticale scrollbalk toe te passen in alle artikelen

1. Navigeer naar Instellingen () > Kennisbanksite > Site aanpassen > Aangepaste CSS en JavaScript in de Kennisbankportal.

2. Klik vanuit het linker navigatiepaneel op het CSS-tabblad en plak het volgende CSS-fragment:

.code-toolbar pre {
max-height: 300px;
}

article .code-toolbar {
    height: 280px;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

3. Voer de gewenste pixelgrootte in.

4. Klik op Opslaan.

   OPMERKING

   Wanneer je het bovenstaande fragment gebruikt, wordt het bovenste pictogram van de verticale scrollbalk in het codeblok verborgen.

Uitkomst