Search code examples
cssrshinyshinyapps

How can I align the tag with the displayed text?


I'm using the code below to build a shiny app but I don't get why text displays below the tag, it's supposed to be in the same line, anybody knows how to fix it?

Fixed the first answer in this question to make it display the text I was aiming for, but the tag is misaligned! I don't know if there is something else needed to write in this question!

############################ GLOBAL #########################################

#1. App
if("shiny" %in% rownames(installed.packages()) == FALSE){ install.packages("shiny") }
library(shiny)

#2. Easier data handling
if("dplyr" %in% rownames(installed.packages()) == FALSE){ install.packages("dplyr") }
library(dplyr)

#3. Interactive graphs
if("plotly" %in% rownames(installed.packages()) == FALSE){ install.packages("plotly") }
library(plotly)


############################ UI #########################################
ui <- fluidPage( 
  # Set bullet size
  tags$style(type='text/css', "#select {font-size: 16px !important} "), 
  # 32px - h1() size || 24px - h2() size || 18.72px - h3() size || 16px - h4() size || 13.28px - h5() size
  navbarPage("Analysis", 
             tabPanel("Home",
                      sidebarPanel(
                        
                        h5(tags$li(textOutput("patent_scape_tag1")))
             ),
             mainPanel(
               plotlyOutput("treemap")
               )
             )
  ))


############################ SERVER #########################################

server <- function(input, output, session) { 
  dtd1 <- NULL
  output$treemap <- renderPlotly({ 
    dtd1 <<- structure(list(V1 = structure(c(9L, 8L, 4L, 7L, 2L, 6L, 1L, 3L, 
                                            5L, 10L, 13L, 11L, 12L), .Label = c("Apple", "Avocado", "Banana", 
                                                                                "Carrot", "Mango", "Mushroom", "Onion", "Orange", "Pineapple", 
                                                                                "Strawberry", "Sweet-lemon", "Watermelon", "Wildberry"), class = "factor"), 
                           V2 = structure(c(4L, 3L, 9L, 11L, 12L, 2L, 1L, 6L, 10L, 5L, 
                                            7L, 8L, 1L), .Label = c("23", "24", "36", "42", "43", "46", 
                                                                    "48", "52", "56", "61", "82", "94"), class = "factor")), class = "data.frame", row.names = c(NA, 
                                                                                                                                                                 -13L))
    p <- plot_ly(
      dtd1,
      labels = ~ V1,
      parents = NA,
      values = ~ V2,
      type = 'treemap',
      hovertemplate = "Ingredient: %{label}<br>Count: %{value}<extra></extra>"
    )
    
    p
  })
  
  output$patent_scape_tag1 <- renderText({ 
    paste0("Topic ",
           as.character(dtd1$V1[which.max(dtd1$V2)]), 
           " reached the highest number!")
  })
} 

shinyApp(ui, server)

Solution

  • Is it what you want ?

    ui <- fluidPage( 
    
      tags$head(
        tags$style(HTML("#patent_scape_tag1 {display: list-item;}"))
      ),
    
      navbarPage("Analysis", 
                 tabPanel("Home",
                          sidebarPanel(
                            textOutput("patent_scape_tag1")
                          ),
                          mainPanel(
                            plotlyOutput("treemap")
                          )
                 )
      )
    )