List widget: two columns

323
1
06-08-2020 11:35 PM
GeoinformationGießen
New Contributor II

Hi,

I made a list which is linked to data. This list shows pictures of places, one picture for each place. The pictures which are displayed change depending on the selected area in the map.

Is it possible to build a list with two colums instead of just one? I would like to have the pictures to be shown in two columns.

Thanks!

Tags (1)
1 Reply
ChristianBischof
Esri Contributor

I'd suggest as the LayerList widget is in fact a <ul> Element to change the CSS of the affected classes.

<div class="row">
  <div class="column">
    <img src="first.jpg" style="width:100%">
  </div>
  <div class="second.jpg" style="width:100%">
  </div>
</div>
<div class="row">
  <div class="column">
    <img src="third.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="fourth.jpg" style="width:100%">
  </div>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍
.row {
  display: flex;
}

.column {
  flex: 50%;
  padding: 5px;
}‍‍‍‍‍‍‍‍

you can use "Flexbox CSS" (above) or "Floating CSS" (below). I'd go with Flexbox

/* define width of column container */
.column {
  float: left;
  width: 50%;
  padding: 5px;
}

/* Clear floats after image containers with after pseudoclass */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Finally substitute the classes row and column with the classes used by esri, look for them by inspecting the element in the browser dev tools => layerlistul.png

classes to use, I

0 Kudos