topic Re: Widget layout/styling question - first widget! in Experience Builder Custom Widgets

Widget layout/styling question - first widget!

DHighness — Fri, 30 Aug 2024 21:47:02 GMT

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

Re: Widget layout/styling question - first widget!

JeffreyThompson2 — Tue, 03 Sep 2024 13:06:29 GMT

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.

Re: Widget layout/styling question - first widget!

DHighness — Tue, 03 Sep 2024 16:25:58 GMT

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; } } } } ` }

Re: Widget layout/styling question - first widget!

DHighness — Tue, 03 Sep 2024 17:02:53 GMT

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

Re: Widget layout/styling question - first widget!

JeffreyThompson2 — Tue, 03 Sep 2024 17:39:14 GMT

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/

Re: Widget layout/styling question - first widget!

DHighness — Tue, 03 Sep 2024 22:48:23 GMT

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.

Re: Widget layout/styling question - first widget!

JaredPilbeam2 — Mon, 09 Sep 2024 18:26:50 GMT

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

Re: Widget layout/styling question - first widget!

DHighness — Mon, 09 Sep 2024 19:38:19 GMT

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.

Re: Widget layout/styling question - first widget!

Nicole_Ueberschär — Sun, 23 Feb 2025 08:37:50 GMT

Thank you for the widget! A preview/demo would be nice.