rshiny

Prevent R shiny from mistaking "configuration calls" for UI elements inside navbarPage

I have the following UI:


ui <- navbarPage(
  title="Foo",
  fluid=T,
  
  # For positioning of the progress bar notification
  tags$head(
    tags$style(HTML(
      ".shiny-notification {
        height: 100px;
        width: 800px;
        position:fixed;
        top: calc(50% - 50px);
        left: calc(50% - 100px);
      }"
    )),
    # tags$style for font size of column headers
    tags$style(HTML(
      ".dataTables_wrapper th {
        font-size: 10px;
      }"
    )),
    # tags$link and tags$script are included so that we can use KaTeX to render LaTeX in DataTables
    tags$link(
      rel = "stylesheet",
      href = "https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css",
      integrity = "sha384-MlJdn/WNKDGXveldHDdyRP1R4CTHr3FeuDNfhsLPYrq2t0UBkUdK2jyTnXPEK1NQ",
      crossorigin = "anonymous"
    ),
    tags$script(
      defer = "",
      src = "https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.js",
      integrity = "sha384-VQ8d8WVFw0yHhCk5E8I86oOhv48xLpnDZx5T9GogA/Y84DcCKWXDmSDfn13bzFZY",
      crossorigin = "anonymous"
    )
  ),
  useShinyjs(),  # must be called once for progress bar and similar elements to work

  someOtherUiElement()
)

The navbarPage is misinterpreting the sections using tags$head and useShinyjs for UI elements, so it ends up creating these kind of invisible, square-shaped, non-functional UI elements to the left of the actual UI button. How can I prevent this from happening? The attached screenshot shows the part of the navigation pane that this refers to. I have circled the area where the two invisible elements are located and have selected the one to the right.

enter image description here

Solution

  • Referring to YBS and Limey, their approaches were helpful. What I did not understand is that while Shiny UI elements may feel like they behave similarly, their signatures do allow very different things. So even though HTML tags and useShinyjs() do not actually take up any space and are invisible elements, they are allowed in fluidRow, yet forbidden in navbarPage. For now, placing these in a submodule works fine. I have not tried whether this will break things once I add another module on the same hierarchy, but I am guessing wrapping the navbarPage in a fluidPage might fix that then.

    TL;DR: place any calls to functions necessary for the application to function inside a fluidRow in any container other than a navbarPage (and probably tabsetPanel?).