how to use x-collapse in mobile view only?

[StefanVesper]

Hey there!

First of all, I´d like to thank for AlpineJS, I keep falling in love the longer I get into it! Great work!

Right now I am trying to find a way to use "x-collapse" only on specific viewport sizes, eg. <1024px.

My first idea was to use a function on init of the component that reads the viewportWidth and then adds/removes the "x-collapse" property to/from the $el, but this only works once, on page load.

Alpine.data('flyout', () => ({ init() { if(window.innerWidth < 1024) { this.$el.setAttribute("x-collapse","") } },

So I bind another function "check" to "@resize.window" and the property gets added and removed from the element succesfully, but after it was added once, the removal doesn´t have any effects on the component, it still uses x-collapse.

Alpine.data('flyout', () => ({ init() { if(window.innerWidth < 1024) { this.$el.setAttribute("x-collapse","") } }, check() { if(window.innerWidth > 1024) { if(this.$el.hasAttribute("x-collapse")) { this.$el.removeAttribute("x-collapse") } } else { if(!this.$el.hasAttribute("x-collapse")) this.$el.setAttribute("x-collapse","") } } }))

Is there a way to "rerender" the component after removing the property from it?

[SimoTod]

It's a weird requirement, I must admit, however, you shouldn't need to do complicate stuff.
The issue is that collapse doesn't implement a proper clean up face as it could do.
Basically, it just misses

        cleanup(() => {
            delete el._x_transition
            el.style.removeProperty('overflow')
            el.style.removeProperty('height')
            if (! el._x_isShown) el.style.display = 'none'
        })

As a temporary workaround, you can do something like delete this.$el._x_transition; this.$el.style.removeProperty('overflow'); this.$el.style.removeProperty('height'); if (! this.$el._x_isShown) this.$el.style.display = 'none' after this.$el.removeAttribute("x-collapse")

Also, you should debounce @resize.window otherwise it fires hundreds of times at every resize.

[StefanVesper]

works like charm, thank you!

[StefanVesper]

I guess since the last update some weird things happen here.

When I set the "x-collapse" property on window.resize, the word "hidden" gets added as a property to the element when x-collapse is removed , resulting in the element being invisible. the CSS Console sais [hidden] {display:none}

Could this be some sort of cleanup bug?

[philwolstenholme]

Hi @StefanVesper - the hidden attribute is related to a new feature I added to Alpine in #2353

One way to remove the attribute would be to do this alongside your other cleanup bits:

this.$el.removeAttribute('hidden');

[SimoTod]

You probably don't want to remove it because it fixes an accessibility issue. If its to keep borders and margins, you can use a wrapping div and move the styles you need to show when collapsed to that element

…

On Tue, 30 Nov 2021, 18:00 Phil Wolstenholme, ***@***.***> wrote: Hi @StefanVesper <https://github.com/StefanVesper> - the hidden attribute is related to a new feature I added to Alpine in #2353 <#2353> One way to remove the attribute would be to do this alongside your other cleanup bits: this.$el.removeAttribute('hidden'); — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2282 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACAJRWI2HZJSNRCOXR2JXXLUOUGLNANCNFSM5G7NDLFA> .

[StefanVesper]

I am also removing the hidden attribute now after removing x-collapse. When I remove x-collapse because window.innerWidth is over 1024px, the hidden attribute is no longer needed, right? So it should be fine to remove it in this case without breaking accessibility, correct?

[SimoTod]

Yeah, the cleanup function must remove any attribute added by x-collapse

[timogwl]

Got the exact same problem. And I don't think it's a weird requirement.

I have a main navigation with dropdowns for each main nav item. On desktop I want to show the dropdown on @mouseenter / @mouseleave with a x-transition and on mobile I want to show the dropdown with @click on a button and the x-collapse effect.

So I figured out, that it's possible to conditionally bind the transition like this:

<div
  x-show="open"
  x-data="{
    transition: {
      'x-transition:enter': 'transition ease-out duration-200 transform',
      'x-transition:enter-start': 'opacity-0 -translate-y-2',
      'x-transition:enter-end': 'opacity-100 translate-y-0',
      'x-transition:leave': 'transition ease-out duration-200',
      'x-transition:leave-start': 'opacity-100',
      'x-transition:leave-end': 'opacity-0'
    }
  }"
  x-bind="$store.nav.isDesktop ? transition : ''"
  x-cloak
>

But I didn't find a way to conditionally bind x-collapse only for mobile. Is there any way to achieve this without hacky removing attributes and properties?

[ekwoka]

well, you can bind x-collapse in the same way you're binding the transitions.

alternatively, you can just use different transitions. a collapse animation is actually quite easy with modern things.

You could even nest them to be extra wacky.

<div collapse> // md:!contents
  <div transitions> // max-md:!contents

Beautiful.

[timogwl]

Thanks, I'll give it a try later!

Do you have an example for me how to bind x-collapse the same way I'm binding the transitions? Couldn't find any examples.

[ekwoka]

Sure

x-bind="$store.nav.isDesktop ? transition : { 'x-collapse': '' }"

seems like it should do it :)

[timogwl]

Thanks, it's working! The only downside is, that it's not reactive. $store.nav.isDesktop is updated on window resize, but x-bind checks the condition only once. But I think I can live with that.

[ekwoka]

:(

The stacked divs would work.