Experience Builder - Layout Organization Help

Question

I'm trying to create an Experience Builder for a GIS Training Library. I've tried a mix of row, flow row, column, card etc. widgets as well as custom px/% vs. auto settings for sizing. I'm having trouble with organizing my layout so that text isn't cut off and widgets aren't overlapping one another.

Hoping one of you Experience Builder layout gurus have some insight or can assist.

Please see my attached photo below. My struggle here is getting the "play" button to align with one another across the rows.

Here is the set-up:

* "Fixed Panel" on the outside
* 01 - 04 are within a "Row" widget and 05 - 08 within their own "Row" widget
* Each of these are cards, with a column widget nested within the card holding both elements (text and image)

The only way I can get the play button aligned is if I use the custom height for the text widget but when resizing windows, the text gets cut off. If I use "auto" height for text widget, the resizing works, but I can't control where the play button goes. If I move the play button outside of the column widget, then the text can overlap with the play button if window is resized very small.

Any assistance appreciated!

ExB_LayoutExample.png

2.png

AndreaB__3-1743703570347.png

NicoleJohnson · Answer

@Tiff, blocks appear automatically as you drag widgets onto the canvas, or there are some block templates you can use (these are accessible via an icon at the bottom of your page). They're not the one key to a solution here, I was just describing the setup for a similar-looking kind of layout that works. From your screenshot, now I can see that you're housing everything in a section, which totally makes a difference, and I'm not sure how to make that aspect of it work.

Tiff · Answer

Thank you for your help, @NicoleJohnson! I will try this. How did you get the rest of the elements nested in a "Block" section? There isn't a widget for "Block", but I did notice that in my layout, because I have a Section and Views Navigation widget, the "Block" outer nest is created automatically. I'm just not sure how to use "Block" to replace my "Fixed Panel" - screenshot attached below.

TrainingLibrary_Layout.png

Python Addins on ArcGIS Desktop.docx

NicoleJohnson · Answer

I haven't really experimented with the Fixed Layout widget, so I'm not sure how that's contributing to the situation, but I do have a similar type of layout (orange are images, yellow are text--excuse my quick Windows Snipping Tool work):

Here's the general idea for one row of the "squares"--each is housed in a block, then a row:

I would try:

* If the button isn't a specific size, give it a specific size, and set your text to "stretch."
* Change the vertical alignment of the column widgets (that are nested inside the card widgets) to space between. This will make it so your text is at the top, the play button is at the bottom, and there's empty space between them, so it won't matter if some of the text has more lines. To keep the play button from actually being on the bottom, you could add some padding to just that bottom side of the column.

Edit: Also, I'm not sure there's a way to do this without also configuring the other device views. If you resize a window very small, even on a desktop, the tablet or mobile device views will appear.

E.g., tablet view with maximum 2 squares next to each other:

and mobile: