Experience Builder Text Box Slider Issue

DerekPhyn

Hi folks, I'm encountering an annoying little quirk in Experience Builder that I can't seem to find a work-around for. In the text box with a lot of content in it by default a slider on the right does not appear. However, once a user hovers over the text box the slider appears on the right side of the text box. That is all good. However, any text or content that is close to the right side of the text box gets "nudged" to the left to allow room for the slider. So, the text and content keeps moving around (see video). It's not the end of the world but annoying and distracting for users when they are trying to read the content in the text box. I've tried all sorts of config options for the text box and column but to no avail. Is there a work-around for this?

NicoleJohnson

I see you're using the Sidebar widget. Do you have that set to a specific px width, or is it set to a %? If it's set to a px width (and if you disable the "resizeable" setting*), you could configure your content like so:

• First, start with a "main" Column widget. This column is just going to house another column. I'm going to list all the settings so you can see what works and tweak from there:
  • vertical align: start
  • gap: 10
  • padding: 10
  • width: stretch
  • height: stretch
• Into that "main" column widget, bring your "content" Column widget (I assume you already have everything in a column--if not, you probably should). For me, these are the settings:
  • vertical align: start
  • gap: 10
  • padding: 0
  • width: 280 px (you're basically making room for the scroll bar here)
  • height: auto
    • align: start

Note that you'll need to customize the different device views, but I doubt you're using that Sidebar configuration for tablet etc. anyway. Also, this isn't the only way to deal with this. The basic idea is that you have to get a little creative with your layout. I don't think it should be like this (or that any of this is obvious), to be clear.

*Leaving this setting on means users can drag the sidebar panel to be wider/narrower, so having that defined px width on the second column would look weird.

Here's the result:

(You might need to click to see the gif move)