PricingDocsAcademy
...
Fri, Mar 14, 5:08 AM
Log inSign up
Log inSign up
All topics

Conditional rendering based on the viewport size

  • jaxwedel-1262849554022400020

    Jax Wedel

    8 months ago

    How do I set an element to not render when the viewport is below 600px? I have been looking everywhere for this solution.
  • lucasg-1262850060035821641

    Lucas G

    8 months ago

    Use breakpoint and display: none
  • 128651941143117824-@Lucas G
    Use breakpoint and display: none
    jaxwedel-1262850116642013204

    Jax Wedel

    8 months ago

    That makes it still render
  • lucasg-1262850250486452276

    Lucas G

    8 months ago

    Unless you need more options then custom action I think 🤔
  • 128651941143117824-@Lucas G
    Unless you need more options then custom action I think 🤔
    jaxwedel-1262850403582869605

    Jax Wedel

    8 months ago

    You lost me 😅
  • I dont want to use display:none because you still render the component or element in the background. I want it to just not render at all
  • lucasg-1262850732499927121

    Lucas G

    8 months ago

    I’ll need to double check the actions tree. I think I needed something like this when I was starting but I just used a custom action to return true/false if below a certain viewport and I used that for the variable
  • jaxwedel-1262850800200187974

    Jax Wedel

    8 months ago

    how did you do that?
  • lucasg-1262850809612468264

    Lucas G

    8 months ago

    I never tried to do it with a “native” way
  • 1143108406740267028-@Jax Wedel
    how did you do that?
    lucasg-1262850929359716465

    Lucas G

    8 months ago

    JavaScript
  • 128651941143117824-@Lucas G
    JavaScript
    jaxwedel-1262851179331715082

    Jax Wedel

    8 months ago

    Oh I am just now seeing that Actions are a thing
  • lucasg-1262851276937625600

    Lucas G

    8 months ago

    I could look for the function if it would be helpful but now I’m trying to think if there’s toddle actions for it 🤔 don’t recall
  • jaxwedel-1262851318876471368

    Jax Wedel

    8 months ago

    but hmm, I guess I should think differently than making two components
  • lucasg-1262851411742560277

    Lucas G

    8 months ago

    Two components?
  • jaxwedel-1262851435486511204

    Jax Wedel

    8 months ago

    maybe for now I will just use display:none
  • lucasg-1262851492772053022

    Lucas G

    8 months ago

    Like render one/hide one type of thing?
  • jaxwedel-1262851611349356594

    Jax Wedel

    8 months ago

    well, I am hiding the desktop menu and showing the mobile hamburger menu below 600px. And for that I have to make to components
  • lucasg-1262851628453855244

    Lucas G

    8 months ago

    I can pass you the function in a bit when I’m on comp if it would help
  • jaxwedel-1262851629091131473

    Jax Wedel

    8 months ago

    yup
  • lucasg-1262851678315479133

    Lucas G

    8 months ago

    Ah gotcha
  • Yeah I think that’s what I needed it for as well
  • Back then I went the custom action route
  • jaxwedel-1262851900949270619

    Jax Wedel

    8 months ago

    a menu doesnt hurt to do two components rendered, but - later if there is a heavy components with API calls etc - it can double usage
  • 128651941143117824-@Lucas G
    Back then I went the custom action route
    jaxwedel-1262852078255214753

    Jax Wedel

    8 months ago

    I see. And how did you connect the Action?
  • hmm, I might have gotten it now
  • I just set the formula for show to false, and it went away. I forgot to test it in T mode
  • jaxwedel-1262852768562020502

    Jax Wedel

    8 months ago

    but - how do I connect the "viewport variable" to be used in the formula..?
  • lucasg-1262853511876579339

    Lucas G

    8 months ago

    One sec, I'll pull it up
  • jaxwedel-1262853604310781954

    Jax Wedel

    8 months ago

    (window.innerWidth < 600)
  • Tod-1262853608630653000

    Tod

    8 months ago

    Great energy @Jax Wedel! Your continuous contribution to the toddle Community just made you advance to Community Level 4!
  • jaxwedel-1262854064438378668

    Jax Wedel

    8 months ago

    its not working 😛
  • if I use an if/else statement in the formula, I need to set the condition. But how to format it?
  • 1262854317518618707-image.png
  • jaxwedel-1262855618973405254

    Jax Wedel

    8 months ago

    @Andreas Møller Does it allow for raw javascript? Or is it only predefined functions?
  • lucasg-1262856170511667321

    Lucas G

    8 months ago

    Found it
  • I used this:
    1262856182809366638-image.png
  • 1262856285443985418-image.png
  • function viewportWidth () {
     return window.innerWidth
    }
  • Something to note, this just returns true/false onLoad
  • It doesn't update dynamically
  • I have to check where the one I rewrote is lol
  • 128651941143117824-@Lucas G
    It doesn't update dynamically
    jaxwedel-1262856545415463113

    Jax Wedel

    8 months ago

    I think there is few people going bananas on the screen like we do 😛
  • the viewportWidth, is that in formulas or in actions?
  • andreasmoller-1262856853541490720

    Andreas Møller

    8 months ago

    You can create a custom action for it it instead, that fires an event when the viewport changes
    🔥1
    💡1
  • jaxwedel-1262860451784429609

    Jax Wedel

    8 months ago

    this should be the most cleaning shortest way, but its just giving null..
    1262860451537223690-Screenshot_2024-07-16_215449.png
    1262860451193294879-Screenshot_2024-07-16_215504.png
  • jaxwedel-1262864792734011536

    Jax Wedel

    8 months ago

    Ok I am going crazy. Because the formula editor keeps deleting the first formula..
  • 1143108406740267028-@Jax Wedel
    Ok I am going crazy. Because the formula editor keeps deleting the first formula..
    lucasg-1262864929560596562

    Lucas G

    8 months ago

    Sorry, got caught up in something
  • This is what I ultimately used
  • 1262864964436103208-image.png
    🔥1
  • Custom action
  • function viewportWidth (args, ctx) {
     window.addEventListener('resize', function(){
     const isBelowThreshold = window.innerWidth < args.width;
     ctx.triggerActionEvent('isBelow', isBelowThreshold)
     });
    }
  • Set it onload
  • 1262865153951666347-image.png
  • isBelow returns true/false if it is below the number you enter
  • jaxwedel-1262865272885219338

    Jax Wedel

    8 months ago

    aaah
  • lucasg-1262865276295315527

    Lucas G

    8 months ago

    then that variable can be used wherever
  • https://start-shared_components.toddle.site/width-custom-action
  • 128651941143117824-@Lucas G
    jaxwedel-1262865601983152148

    Jax Wedel

    8 months ago

    Where is that?
  • lucasg-1262865676822122527

    Lucas G

    8 months ago

    On the page
  • Or component
  • The onload action
  • jaxwedel-1262865767259439144

    Jax Wedel

    8 months ago

    I couldnt find in the component
  • ah forget it, I found it. thanks
  • but I guess its best to use it on the page, so it can be reused
  • 128651941143117824-@Lucas G
    jaxwedel-1262866945393561670

    Jax Wedel

    8 months ago

    how did you get that width? this is mine
    1262866945129189376-image.png
  • 128651941143117824-@Lucas G
    lucasg-1262867191603396624

    Lucas G

    8 months ago

    Set the arguments and output event up
  • You can see how on the screenshot
  • jaxwedel-1262867380867174410

    Jax Wedel

    8 months ago

    ah I see it now. I missed it
  • lucasg-1262868093118578759

    Lucas G

    8 months ago

    Sounds like you got it
  • For now, this is probably the way to do it unless 'display: none' is acceptable or if toddle team releases more native actions around viewport
  • jaxwedel-1262871236506026084

    Jax Wedel

    8 months ago

    I tried opening the website template that comes with toddle to see how they did the menu there - but that was even more confusing 😅
  • laetitiamassa-1315301382051594341

    Laetitia | Pinshasa

    3 months ago

    Hey @Lucas G ! How to check if the custom action actually works?
    Because I created that action and event (on load and on attribute change), and it doesn't seem to detect the viewport
    cc @Andreas Møller
  • Tod-1315301383280263248

    Tod

    3 months ago

    Great energy @Laetitia | Pinshasa! Your continuous contribution to the toddle Community just made you advance to Community Level 4!
  • 807515431299448863-@Laetitia | Pinshasa
    Hey @Lucas G ! How to check if the custom action actually works?
    Because I created that action and event (on load and on attribute change), and it doesn't seem to detect the viewport
    cc @Andreas Møller
    lucasg-1315349799905656913

    Lucas G

    3 months ago

    The function works. You can log the event to console
  • There is an action for it which you can fire on the event flow
  • saillmone-1337060493369671720

    saillmone

    1 month ago

    Hey guys, I hope you're fine!
    I followed the code provided by Lucas, but still have issues to make it working.

    how can I get the event "isBelow" data back ?

    Thanks a lot
    1337060492455313418-image.png
    1337060492732006430-image.png
    1337060493055230033-image.png
  • andreasmoller-1337078827133960265

    Andreas Møller

    1 month ago

    In this case true or false is going to be the event in the toddle workflow
  • saillmone-1337352665809686611

    saillmone

    1 month ago

    Thanks, it's working fine. But the false value is "undefined" and the true is a boolean as excepted.
    I made a string return in order to make it working fine.
Leave a comment

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code — but accessible to your entire team!

Try toddle — it's free!
The two toddle Co-Founders Andreas and Kasper

Chat with @team-toddle

CEO and Co-Founder of toddle Andreas Møller

Video call our CEO

Hello, toddle!

Get in touch!

Product

PricingPackagesT&CsPrivacy Policy

Company

Press kitContact
Become partnerRefer and earn

Resources

DocumentationAcademyIntegrationsBlogFounder storiesHire experts

Community

DiscordLinkedInXYouTube

© Copyright 2024 toddle. All rights reserved.

toddle logo

Built in toddle