Streaming live at 10am (PST)

Div Borders working differently in edit/ preview mode


#1

Read only link: https://preview.webflow.com/preview/andthepoint?preview=676c9ec1a7a41c9f65543d977b9566f4

This is for my "Home Copy" page.

In the editor, everything looks just as I want it. Namely, the div's yellow borders increase in size to the extent there is more or less text in any given div.

But when I toggle to preview mode ( click on any text to see the borders), all extend to more or less the same length, irrespective of the text within the boxes.

Advice would be so appreciated! Thanks!

Posted example below. First is edit mode, second is preview.


#2

Hi @Dontwanttoshowname, Try setting the Button Text class to overflow hidden. That should allow the div to show and hide smoothly.

I hope this helps!


#3

Thanks so much Dave.

Unfortunately, this doesn't quite fix things in the way I'd like. I would like the borders to expand to the size of the text, as happens in the editor (first screenshot), but not in preview mode.

I'll keep playing, thanks again,


#4

Okay - I've at least isolated the problem, but now there is a separate one. I've fixed it (meaning the borders expand just to the length of "Button Text" within) by changing up the "Show and Hide" interaction I had set up. I used to have it open to 150px and changed it to expand to "Auto."

But, now I have trouble with the interactions not working smoothly. If "Button text" is hidden and I click "button," it shoots open instantly. One caveat is that when I click to "Button" several times quickly in succession (While button text is appearing and disappearing"), then it will open and close smoothly. For some reason, this only happens when it's set to expand to "auto" as opposed to a fixed pixel amount (like 150).


#5

Hi @Dontwanttoshowname, I have been looking at this further, and I believe the issue is that there are a lot of transitions set on all properties on multiple elements, including the Body, and one of those transitions is conflicting with the interaction.

When I removed the transition for All Properties on the "DIV" class, the interaction starts to work for me in a more consistent way:


#6

Thanks! Will look into it.


#7

Thanks @cyberdave - changed the transitions for DIV.

Is there anything I can do to make the interaction work smoothly 100% of the time?


#8

Oh, it wasn't working in preview mode, but just published it and it seems fine for now (!)


#9