Widget layout/styling question - first widget!

[DHighness]

Hi, I built my very first EXB 1.15 React/Typescript widget and it works! The only issue I have now is figuring out how to do CSS so that it fits within a grid layout and doesn't flow off the page and adds a scroll bar. I have made this work by hacking the CSS and giving the Div a height but I'd like to be able to add it to any layout box and have that work. It could be I just haven't found the right layout widget to place it into?

The widget is a Layer Control type of widget that takes all the layers, Feature, Image and Map Image, in a Web Map and put then into a radio button list so you can toggle the layers and only display one layer at a time. The problem I face is the layer list gets long and goes off the page outside of the layout. I'd rather have it stay within the window and add a scroll bar. I have made it behave correctly by giving a height to the Div but I'd rather have this work automatically when I add the widget to a layout box. Any ideas?

Thanks

[JeffreyThompson2 · Accepted solution]

I usually deal with this problem by using in-line style in the highest level div in my widget.tsx. Using in-line style overrides the CSS priority of the standard widget classes applied by Experience Builder.

<div style={{ "height": "inherit", "overflow": "auto" }}>

[DHighness]

That works as long as it's okay if the entire widget scrolls. I was hoping to have the widget header remain visible at the top and the lower box with radio buttons scroll. When I try that I can't figure out how to account for the height of the header. It's fine though, I need to get better at CSS.

import { IMThemeVariables, css, SerializedStyles } from 'jimu-core'

export function getStyle (theme: IMThemeVariables): SerializedStyles {
  const bg = theme.surfaces[1].bg

  return css`
    .widget-body {
        align-items: center;
        justify-content: right;
        font-size: 14px;
        background-color: ${bg};
        height: inherit;
        overflow: auto;

        .header-container {
          padding-top: 10px;
          padding-bottom: 10px;
          padding-left: 0.25rem;
          padding-right: 0.25rem;
          display: flex;
          justify-content: space-between;

          .header-title {
            font-weight:bold;
          }

          .header-legend {
            padding-left: 5px;
          }
        }

        .body-radio-group {
          padding-left: 10px;
          /*height: inherit;*/
          /*overflow: auto;*/
          /*height: calc(100vh - 131px);*/

          .radio-box {
            display: flex;

            .radio-label {
              padding-left: 10px;
            }
          }
        }
    }
  `
}

[JeffreyThompson2]

To get your header to stay in place you can use the position: sticky property.

https://www.w3schools.com/css/css_positioning.asp

As Experience Builder supports Bootstrap, you should be able to access it by adding the class "position-sticky" to the div with your header.

 https://getbootstrap.com/docs/5.3/utilities/position/

[DHighness]

I added "position:sticky" to the header along with a background and "top:0" and that keeps the header at the top of the scroll list. Thanks for the help.

[DHighness]

Here is the code for my widget if anyone would like to use it. I put the code in a folder named "radio-layers" in the "/your-extentions/widgets/" folder.

GitHub Repo 

[JaredPilbeam2]

Hi Dave,

The widget name in manifest.json is not the same with the folder name

Github download: Experience-Builder-Radio-Layers-Widget-main

manifest.json: radio-layers

Thanks for posting. In the process of checking the widget out I was getting a message in the client folder prompt telling me the folder name didn't match the widget name. Your Github download has a different name than the widget name in the manifest.json. Once I changed the download folder name it was fine.

 C:\arcgis-experience-builder-1.15\client\your-extensions\widgets\radion-layers

[DHighness]

I modified the readme.md to hopefully make that a little more clear.

Create a folder /your-extensions/widgets/radio-layers in Experience Builder Developer Edition 1.15 and copy the contents of the repository into it.