Responsive multi-column list: verschil tussen versies

Uit MediaWikiGids
Ga naar: navigatie, zoeken
(Nieuwe pagina aangemaakt met 'Een veel gebruikte manier om een lijst netjes weer te geven, is door de lijst verdelen over een aantal kolommen. Om de weergave op schermen van verschillende groott...')
 
 
(5 tussenliggende versies door dezelfde gebruiker niet weergegeven)
Regel 1: Regel 1:
 
Een veel gebruikte manier om een lijst netjes weer te geven, is door de lijst verdelen over een aantal kolommen. Om de weergave op schermen van verschillende grootte te optimaliseren, moet het aantal kolommen afnemen bij kleinere schermen.
 
Een veel gebruikte manier om een lijst netjes weer te geven, is door de lijst verdelen over een aantal kolommen. Om de weergave op schermen van verschillende grootte te optimaliseren, moet het aantal kolommen afnemen bij kleinere schermen.
 +
 +
== Standaard oplossing - beperkt "responsive" ==
 +
 +
De standaard oplossing om een multi-column lijst te maken is met behulp van CSS/Style elementen <code>column-count</code>. Op deze manier is het aantal kolommen constant en zal alleen de breedte van de kolommen zich aanpassen aan de grootte van het scherm. Op kleine schermen leidt dit snel tot problemen.
 +
 +
Voorbeeld:
 +
 +
<pre>
 +
<div style="column-count:4;-moz-column-count:4;-webkit-column-count:4">
 +
*item1
 +
*item2
 +
...
 +
*item16
 +
</div>
 +
</pre>
 +
 +
Resultaat:
 +
 +
<div style="column-count:4;-moz-column-count:4;-webkit-column-count:4">
 +
*item1
 +
*item2
 +
*item3
 +
*item4
 +
*item5
 +
*item6
 +
*item7
 +
*item8
 +
*item9
 +
*item10
 +
*item11
 +
*item12
 +
*item13
 +
*item14
 +
*item15
 +
*item16</div>
 +
  
 
== Oplossing met Bootstrap ==
 
== Oplossing met Bootstrap ==
 +
 +
Wanneer [[Bootstrap voor MediaWiki|Bootstrap]] beschikbaar is, kan een lijst met behulp van het "grid" responsive worden weergegeven:
 +
 +
<pre><ul class="list-group row">
 +
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3" style="margin: 0; padding: 0; border: 0;">Cell_1</li>
 +
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_2</li>
 +
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_3</li>
 +
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_4</li>
 +
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_5</li>
 +
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_6</li>
 +
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_7</li>
 +
</ul></pre>
  
 
NB: De sorteer-richting bij deze oplossing is "per rij" oftewel "van links naar rechts".
 
NB: De sorteer-richting bij deze oplossing is "per rij" oftewel "van links naar rechts".
 +
 +
Het resultaat ziet er zo uit:
  
 
<ul class="list-group row">
 
<ul class="list-group row">
Regel 14: Regel 64:
 
     <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_7</li>
 
     <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_7</li>
 
</ul>
 
</ul>
 +
 +
 +
Bron: [https://stackoverflow.com/questions/19836567/bootstrap-3-multi-column-within-a-single-ul-not-floating-properly Voorbeeld]
  
 
== Pure CSS ==
 
== Pure CSS ==
  
−
Zie : [https://codepen.io/ThiefMaster/pen/afGbB voorbeeld]
+
Op basis van alleen CSS3 werkt deze oplossing met toevoeging van een enkele class:
 +
 
 +
<pre>
 +
/* Responsive multi column list -  https://codepen.io/ThiefMaster/pen/afGbB */
 +
/*CSS3 multiple columns.*/
 +
/* Get em size for colums: 184/16 */ 
 +
.columns
 +
{ 
 +
    -moz-column-width: 11.5em; /* Firefox */
 +
    -webkit-column-width: 11.5em; /* webkit, Safari, Chrome */
 +
    column-width: 11.5em;
 +
}
 +
/*remove standard list and bullet formatting from ul*/
 +
.columns ul
 +
{
 +
    margin: 0;
 +
    padding: 0;
 +
    list-style-type: none;
 +
}
 +
/* correct webkit/chrome uneven margin on the first column*/
 +
.columns ul li:first-child
 +
{
 +
    margin-top:0px;
 +
}
 +
</pre>
 +
 
 +
Het voordeel van deze methode is dat hij goed werkt in combinatie met de standaard wikitekst voor lijsten en standaard de sorteerrichting van de kolom aanhoudt.
 +
 
 +
<pre>
 +
<div class="columns" style="width:100%;">
 +
*item 1
 +
*item 2
 +
*item 3
 +
* [[Hoofdpagina|linked item 4]]
 +
* [[Hoofdpagina|linked item 5]]
 +
* [[Hoofdpagina|linked item 6]]
 +
</div>
 +
</pre>
 +
 
 +
Resultaat:
 +
<div class="columns" style="width:100%;">
 +
*item 1
 +
*item 2
 +
*item 3
 +
* [[Hoofdpagina|linked item 4]]
 +
* [[Hoofdpagina|linked item 5]]
 +
* [[Hoofdpagina|linked item 6]]
 +
</div>
 +
 
 +
 
 +
Natuurlijk kan ook de HTML-versie worden gebruikt:
 +
 
 +
<div class="columns" style="width:100%;">
 +
<ul>
 +
<li>William Brown</li>
 +
<li>Miss Havisham</li>
 +
<li>Rupert Campbell-Black</li>
 +
<li>Julien Sorel</li>
 +
<li>Sherlock Holmes</li>
 +
<li>Nigel Molesworth</li>
 +
<li>Harriet M Welsch</li>
 +
<li>Oskar Schell</li>
 +
<li>Elinor Dashwood</li>
 +
</ul>       
 +
</div>
 +
 
 +
 
 +
Bron : [https://codepen.io/ThiefMaster/pen/afGbB voorbeeld]

Huidige versie van 26 feb 2019 om 10:43

Een veel gebruikte manier om een lijst netjes weer te geven, is door de lijst verdelen over een aantal kolommen. Om de weergave op schermen van verschillende grootte te optimaliseren, moet het aantal kolommen afnemen bij kleinere schermen.

Standaard oplossing - beperkt "responsive"

De standaard oplossing om een multi-column lijst te maken is met behulp van CSS/Style elementen column-count. Op deze manier is het aantal kolommen constant en zal alleen de breedte van de kolommen zich aanpassen aan de grootte van het scherm. Op kleine schermen leidt dit snel tot problemen.

Voorbeeld: 

<div style="column-count:4;-moz-column-count:4;-webkit-column-count:4">
*item1
*item2
...
*item16
</div>

Resultaat:

  • item1
  • item2
  • item3
  • item4
  • item5
  • item6
  • item7
  • item8
  • item9
  • item10
  • item11
  • item12
  • item13
  • item14
  • item15
  • item16


Oplossing met Bootstrap

Wanneer Bootstrap beschikbaar is, kan een lijst met behulp van het "grid" responsive worden weergegeven: 

<ul class="list-group row">
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3" style="margin: 0; padding: 0; border: 0;">Cell_1</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_2</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_3</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_4</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_5</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_6</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3"  style="margin: 0; padding: 0; border: 0;>Cell_7</li>
</ul>

NB: De sorteer-richting bij deze oplossing is "per rij" oftewel "van links naar rechts".

Het resultaat ziet er zo uit:

  • Cell_1
  • Cell_2
  • Cell_3
  • Cell_4
  • Cell_5
  • Cell_6
  • Cell_7


Bron: Voorbeeld

Pure CSS

Op basis van alleen CSS3 werkt deze oplossing met toevoeging van een enkele class: 

/* Responsive multi column list -  https://codepen.io/ThiefMaster/pen/afGbB */
/*CSS3 multiple columns.*/
/* Get em size for colums: 184/16 */   
.columns
{   
    -moz-column-width: 11.5em; /* Firefox */
    -webkit-column-width: 11.5em; /* webkit, Safari, Chrome */
    column-width: 11.5em;
}
/*remove standard list and bullet formatting from ul*/
.columns ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
/* correct webkit/chrome uneven margin on the first column*/
.columns ul li:first-child
{
    margin-top:0px;
}

Het voordeel van deze methode is dat hij goed werkt in combinatie met de standaard wikitekst voor lijsten en standaard de sorteerrichting van de kolom aanhoudt. 

<div class="columns" style="width:100%;">
*item 1
*item 2
*item 3
* [[Hoofdpagina|linked item 4]]
* [[Hoofdpagina|linked item 5]]
* [[Hoofdpagina|linked item 6]]
</div>

Resultaat:


Natuurlijk kan ook de HTML-versie worden gebruikt:

  • William Brown
  • Miss Havisham
  • Rupert Campbell-Black
  • Julien Sorel
  • Sherlock Holmes
  • Nigel Molesworth
  • Harriet M Welsch
  • Oskar Schell
  • Elinor Dashwood


Bron : voorbeeld

Overgenomen van "http://gids.wikiwerkers.nl/w/index.php?title=Responsive_multi-column_list&oldid=666"