Dynamic binding 'class' not working first load

[radikris]

Hi everyone, hi @TimG maybe it is related to our previous tasks, that’s why I tag you.

Page: Adatvezérelt Fizetések Bárhol a Világon - Barion

So in my symbol, where I use dynamic data binding:

The css classes:

.gridmultiline{
  display: flex !important;
}

.gridsimpleline{
  display: none !important;
}

@media (max-width: 999px) {
  .gridmultiline{
    display: none !important;
  }

  .gridsimpleline{
    display: flex !important;
  }
}

To see the component:
Add page preview link: https://barion-builderio.vercel.app/__builder-customgrid__

This is working:

Builder.io: Drag and drop Visual CMS

const ctype=state.hero.value.data.gridList[state.locale][$index].image ? 'grids gridnoneline' : 'grids gridmultiline'
return ctype 

This is not working:

Builder.io: Drag and drop Visual CMS

const ctype=state.hero.value.data.gridList[state.locale][$index].image ? '' : 'gridsimpleline'
return (state.hero.value.data.gridList[state.locale][$index].image && (state.hero.value.data.gridList[state.locale][$index].button.buttonType==null)) ? `textcenter ${ctype}`: `${ctype}`

And on the page first load missing the gridsimpleline:

If I navigate to another page and come back:

It would be important, because the first load on desktop without the ‘gridsimpleline’ the div will render, although it should be display: none

So in fact the binding is working, but only after the second time, why does it happen, and on the first load why not putting on it? Is it somehow related to the symbol SSR? (inside Builder.io it looks good as well)

[radikris]

@TimG could you check this out?

[TimG]

Hey @radikris We are still looking into some SSR things that I thought might be related, but looking at it again now I am not sure if that is the case. First, to confirm, so you want the big blue text (1M+, 13,00+, etc) to be display none on first load?

Originally I noticed it was loading multiple times, and it is not longer doing that for me. The only issue I changed was that I noticed you had ID set to something that was an invalid value, I updated it:

And it seems since then the Blue text only displays a single time, instead of multiple times. So was that the only issue? Or are you expecting that text to be completely hidden (ie, have the gridsimpleline )

Let me know if I am missing anything, thanks!

[radikris]

Hi @TimG!

Almost you are correct, maybe I am missing something.
Let me explain again:

In the builder io symbol view:

This is the expected behaviour, this looks good. On the site:
It is still double text, and as you said, I want to display it single time.

So the idea is, on desktop view gridmultiline should be visible, under desktop (tablet and mobile) gridsimpleline should be visible and the other hidden

Gridmultiline:

Gridsimpleline this should be not visible on the first load, but the class is missing on the element, that’s why it is there:

Second load as you can see works fine:

It is still not working for me: Adatvezérelt Fizetések Bárhol a Világon - Barion
Can you check out?

[TimG]

Hi @radikris I believe the issue was that the return statement here:

const ctype=state.hero.value.data.gridList[state.locale][$index].image ? '' : 'gridsimpleline'
return (state.hero.value.data.gridList[state.locale][$index].image && (state.hero.value.data.gridList[state.locale][$index].button.buttonType==null)) ? `textcenter ${ctype}`: `${ctype}`

is being returned before the entire expression is evaluated.

I believe I was able to get it working consistently by changing return to export default

I also believe if you changed the logic to something like the below, it should work as well… let me know if either of those work for you!

const ctype = state.hero.value.data.gridList[state.locale][$index].image ? '' : 'gridsimpleline'
const textCenter = !state.hero.value.data.gridList[state.locale][$index].button.buttonType ? 'textcetner' : '';
return `${textCenter} ${ctype}`;