List widget: two columns

GeoinformationGießen — Tue, 09 Jun 2020 06:35:46 GMT

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!

Re: List widget: two columns

ChristianBischof — Sat, 11 Dec 2021 17:09:26 GMT

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

topic List widget: two columns in ArcGIS Experience Builder Questions

List widget: two columns

Re: List widget: two columns