Adapt Learning Community: ABS blocks wrapping beneath each other

ABS version 3.1.1
FW version 5.17.1
(same issue encountered on previous versions also)

Clients have come back to me to say the 2nd block of an ABS isn't displaying. The 2nd block is wrapping under the first (thus disappearing completely), rather than being displayed to the right. The effect can be replicated by changing .abs .block {float: none;} (as opposed to 'left').

Issue occurs in varying browsers and devices. Today I've had it reported on a system that's running the exact same (most recent) version of Chrome that I am - it doesn't break for me, but it does for her.

Can anyone suggest a more robust way of ensuring the blocks don't wrap? As I say, it all works fine for me so I'm working blind and currently asking the client to do the testing, which isn't ideal!

Many thanks in advance.

Have posted the issue on github too.

PS. If it helps, I have a 5.15.2 FW course running ABS 3.1.1 that has been tested widely with no reported issues.

Hello Chris

I've noticed this happening when a uniform block height is specified in the article and blocks and the screen resolution is low on the users machine. The way around it I found was to make the block slider dynamic in height (not have a uniform height selected) and have no minimum heights specified in either the article or block.

The trade off is that the block height adapts, but I see this as a positive feature.

Not sure if this will solve the exact issue, but maybe worth a try.

Thanks

Show parent | Reply

Wow. Thanks Caleb. Interesting.

I am using min-height on the articles to centre the content on-screen when using Trickle like this:

.article {min-height: calc(100vh - 40px);} - 40px being the navigation bar height.

I'm not the world's greatest CSS knowledge. Might even a 'dynamic' min-height be a problem?

Have changed my ABS "_hasUniformHeight": true, to false (don't have a problem with that) so will see if that alone will fix things as I don't really want to lose the min-height bit - I'd rather ditch the ABS.

Client says it's all fine on an MS Surface Pro, but broken on a (quite new) MS Surface Laptop both in Chrome and Edge. I seem to remember other times it's been the Surface Laptop where I've had issues.

Update on the potential FW 5.15.2 lead I mentioned - nope - that is also broken on client machine. Rats!

Show parent | Reply

Apologies Chris

We are using the AT rather than just the framework:

FW: v5.18.7

ABS: 3.1.1

We had intended to make the block slider fixed height but since seeing an issue, which I believe was related to the users screen resolution we reverted to dynamic height for the article/block with the theme managing full width on the article/block.

I actually prefer the dynamic height now.

Cheers

Show parent | Reply

Thanks Caleb.

It was my custom CSS that was the issue!

While trying to get the ABS full screen width I added .abs__slide-container {max-width: none;} which was breaking it on some setups for some reason! Oh well!

Show parent | Reply