How to set Surface top-level container CSS class?

Questions / Help
,
1

Hello! I am playing with Surface, but can’t find a way to add CSS classes to the top-level Surface container, the way you can do in LiveView in your myapp_web.ex.

 def live_view do
  quote do
    use Phoenix.LiveView,
      container: {:div, class: "flex flex-col flex-grow"},
      layout: {Myapp.LayoutView, "live.html"}

    import Myapp.Views.InputHelpers

    unquote(view_helpers())
  end
end

FYI I am using Surface in only one part of my LiveView app. Any pointers on how to solve this?

2

Hi @im3000 !

Thanks for using Surface !

You normally should be able to use Surface.LiveView the same way as you use Phoenix.LiveView. I usually have something like this in my my_app_web.ex file.

  def surface_live_view do
    quote do
      use Surface.LiveView,
        container: {:div, class: "flex flex-col flex-grow"},
        layout: {Myapp.LayoutView, "live.html"}
    end
  end

In top of your live view you could now use, use MyAppWeb, :surface_live_view

You could add similar helpers for Surface.Component and Surface.LiveComponent.

Does it solve your issue?

3

Thank you @Malian! So simple. Why didn’t I think of it myself? :man_facepalming: