Small changes would improve UX

I am adding a Discussion Forum in a widget and have "Render in iFrame" checked. This is what I see:

Screen Shot 2023-10-11 at 5.47.03 PM.png

So my question is: Why do we need that right arrow in a circle and the nav bar on the bottom? There is nothing over to the right to navigate to. It would be far better from a UX point of view if this iframe were responsive and fit exactly into the space available.*

This situation might be okay if I just had the one Topic, but there are multiple Topics down the page and those grey bars are (a) unnecessary and (b) disruptive. We're only talking like 10 px, but it makes a real difference to the look and feel of the page.

Here's what it could look like:

final.png

I'm trying to make things appear and flow as smoothly and elegantly as possible and with as few clicks as I can, but honestly, it can be a real struggle.

* we sometimes see a similar behaviour when adding items from an LTI. The space provided is just a few px too small and the edge of the object is cropped off.

Answers

  • Stefanie.B.518
    Stefanie.B.518 Posts: 607 admin

    Hi @Mike.B.559
    I think you're using the "Large Right Panel" Layout and then putting your custom widget in the 2/3rds on the right- if so- are you setting a width of your iframe to 100% and still seeing this scroll bar?

    Stef uses paint like some bizarre tech luddite to circle the custom widget in the 2/3rd homepage layout from her sandbox

    I'm targeting a slightly different area of discussions I think, but when I pull in the iframe with a width of 100% and a height of 900 px I don't get that spill over.

    Your observation is still a good one- and I'm still going to share the feedback with the Discussion Team but wasn't sure if there's something I'm doing with my iframe width that might be helpful to you

    ex. for custom widget code with discussion iframe


    <!DOCTYPE html>

    <html><head></head><body style="color: rgb(32, 33, 34); font-family: undefined;"><p><iframe style="width: 100%; height: 900px;" src="https://community.desire2learn.com/d2l/le/20908/discussions/topics/13566/View" <="" body=""></html></iframe></p></body></html>
  • Mike.B.559
    Mike.B.559 Posts: 152
    edited October 2023

    Thanks for looking at it Stefanie. I'll give it a try.

    Also, yes, I am setting my width to 100%.

    In the meantime, take a look at the classlist. It also illustrates this same needless scrolling behaviour.
    * I have blanked-out names and Org Defined IDs for each.

    classlist-arrow.png
  • Mike.B.559
    Mike.B.559 Posts: 152
    edited October 2023

    Going to a single column layout fixes the problem…but putting a wider column on the right of a two column layout does not. Also, it appears that a change has been made. The grey bars below the topic boxes now vanish a few seconds after clicking the right/left arrows.