# Responsive LiveView

**URL:** <https://forum.elixirforum.com/t/responsive-liveview/36725>\
**Category:** Questions\
**Tags:** phoenix, liveview\
**Created:** [January 9, 2021, 6:32am UTC](https://forum.elixirforum.com/t/responsive-liveview/36725 "2021-01-09T06:32:17Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![ouven](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/ouven/32/20703_2.png) [@ouven](https://forum.elixirforum.com/u/ouven)\
**Post date:** [January 9, 2021, 6:32am UTC](https://forum.elixirforum.com/t/responsive-liveview/36725/1 "2021-01-09T06:32:17Z")

</div>

Hi all, I took over a project which makes heavy use of LiveView and JavaScript custom components.  
That works well, when custom components do small things, like transforming an ISO timestamp to a local time.

To give you the context, it’s a catalog page for shopping plants with several landing pages for different campaigns.  
Now I have to kinds of product lists:

- One has filters and no pagination. The filters are very flexible and complex and are realized in the backend with LiveView.
- The other one has a pagination and is realized as a JavaScript custom component. The special thing is, it reacts on display size and shows 9 elements per page for wide displays and six elements for small ones.

Now the customer wants a new kind - you may guessed it:  
Paginagion and filters. The new list kind needs this responsiveness too (page size 9 for wide and page size 6 for small displays).

Mixing both existing technologies is painful and using the JavaScript solution does not scale, when it comes to long lists, because the whole list needs to be loaded by the client before it can be paginated.

So my question is: did anybody ever think about such a case and give me advice how I can react on display size in the backend with LiveView?

---

<div class="post-metadata">

**Author:** ![sb8244](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/sb8244/32/18642_2.png) [@sb8244](https://forum.elixirforum.com/u/sb8244)\
**Post date:** [January 9, 2021, 6:42am UTC](https://forum.elixirforum.com/t/responsive-liveview/36725/2 "2021-01-09T06:42:06Z")

</div>

This may not be an ideal solution, but the immediate thing that comes to mind is to pushEvent from client → server when the viewport causes a pagination size change. That would involve a small amount of JS but not much. The server could then take that into account for its pagination (possibly re-rendering the items because small → large would need more data).

I’ve never had to deal with this, so curious if anyone has creative ideas here. I initially thought of creative CSS to limit the size of the items, but that would mess up pagination since the server needs to know that 6 are being displayed so it can show items 7-12 after 1-6.

---

<div class="post-metadata">

**Author:** ![cblavier](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/cblavier/32/29763_2.png) [@cblavier](https://forum.elixirforum.com/u/cblavier)\
**Post date:** [January 9, 2021, 10:30am UTC](https://forum.elixirforum.com/t/responsive-liveview/36725/3 "2021-01-09T10:30:39Z")

</div>

On my project I came up with a solution where, on client side, a tiny piece of script sends browser width via push a push event whenever the browser is resized.

Then, server-side, I have a custom render function which will render different versions of the template regarding the current width (for instance it will render `index.desktop.html.leex` or `index.mobile.html.leex`)

Let me know if you’re interested, I can post some gist

---

<div class="post-metadata">

**Author:** ![ouven](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/ouven/32/20703_2.png) [@ouven](https://forum.elixirforum.com/u/ouven)\
**Post date:** [January 9, 2021, 10:40am UTC](https://forum.elixirforum.com/t/responsive-liveview/36725/4 "2021-01-09T10:40:01Z")

</div>

Hello, thanks a lot, to both of you! I would be very happy to see this push script, because it seems as the only, solution for this problem.

---

<div class="post-metadata">

**Author:** ![cblavier](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/cblavier/32/29763_2.png) [@cblavier](https://forum.elixirforum.com/u/cblavier)\
**Post date:** [January 9, 2021, 10:56am UTC](https://forum.elixirforum.com/t/responsive-liveview/36725/5 "2021-01-09T10:56:02Z")

</div>

Here it is : [Responsive Phoenix LiveView · GitHub](https://gist.github.com/cblavier/0e227de6fd1dfa00814b88642cdcb2a9)

---

<div class="post-metadata">

**Author:** ![ouven](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/ouven/32/20703_2.png) [@ouven](https://forum.elixirforum.com/u/ouven)\
**Post date:** [January 9, 2021, 10:59am UTC](https://forum.elixirforum.com/t/responsive-liveview/36725/6 "2021-01-09T10:59:44Z")

</div>

Looks very promising. I totally bring it into the next sprint and provide you feedback. Thanks a lot!

---

<div class="post-metadata">

**Author:** ![cblavier](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/cblavier/32/29763_2.png) [@cblavier](https://forum.elixirforum.com/u/cblavier)\
**Post date:** [January 9, 2021, 11:16am UTC](https://forum.elixirforum.com/t/responsive-liveview/36725/7 "2021-01-09T11:16:38Z")

</div>

Let me know how it works for you 🙂

---

<div class="post-metadata">

**Author:** ![Exadra37](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/exadra37/32/9183_2.png) [@Exadra37](https://forum.elixirforum.com/u/Exadra37)\
**Post date:** [January 9, 2021, 11:38am UTC](https://forum.elixirforum.com/t/responsive-liveview/36725/8 "2021-01-09T11:38:54Z")

</div>

> [@ouven](#):
>
> Mixing both existing technologies is painful and using the JavaScript solution does not scale, when it comes to long lists, because the whole list needs to be loaded by the client before it can be paginated.

You may want to watch the video number 10 in this series:

> **[The Pragmatic Studio](https://pragmaticstudio.com/phoenix-liveview)**
>
> Premium video courses for software developers. Real apps. Real code. Really good stuff!

 ![Screenshot from 2021-01-09 11-33-34](https://forum.elixirforum.com/uploads/default/original/3X/3/8/38593266a30edf58e1c82d53f14268e2afd0068f.png)

> I strongly recommend anyone getting into live view to watch the entire series by @mikeclark and you also participate in dedicate [forum post](https://forum.elixirforum.com/t/free-in-depth-course-on-phoenix-liveview/31291) for it.

You can see the live demo for it [here](https://agile-equatorial-stoat.gigalixirapp.com/paginate).

---

<div class="post-metadata">

**Author:** ![ouven](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/ouven/32/20703_2.png) [@ouven](https://forum.elixirforum.com/u/ouven)\
**Post date:** [January 9, 2021, 6:34pm UTC](https://forum.elixirforum.com/t/responsive-liveview/36725/9 "2021-01-09T18:34:17Z")

</div>

Works like a charm! I put the “breakpoints” into the frontend view\_helpers:

```elixir
  defp view_helpers() do
    quote do
      @sd_max_width 768
      @md_max_width 1080

      @display_size_small :display_size_small
      @display_size_medium :display_size_medium
      @display_size_large :display_size_large

      def display_size(width) when width <= @sd_max_width, do: @display_size_small
      def display_size(width) when width <= @md_max_width, do: @display_size_medium
      def display_size(width), do: @display_size_large

      use Phoenix.HTML
      ...
    end
  end

```

And dispatched the page\_size on in:

```elixir
 @impl Phoenix.LiveView
  def handle_event("viewport_resize", %{"width" => width}, socket) do
    socket
    |> assign(
      :page_size,
      case display_size(width) do
        @display_size_small -> 6
        _ -> 9
      end
    )
    |> noreply()
  end

```

Thanks to @cblavier and @sb8244 - solved by now 🙂