CODEWITHSUNDEEP
rshiny
ixodid
ixodid

Reputation: 2400

Move shinyhelper icon closer to label

How do I move the shinyhelper icon, "?", so that it is just to the right of the word, "Province"?

R Script

library(shiny)
library(magrittr)
library(shinyhelper)
library("bslib")

select_input_width <- "270px"
provinces <- c("British Columbia", "Alberta", "Saskatchewan", "Manitoba", "Ontario", "Quebec", 
               "New Brunswick", "Nova Scotia", "PEI", "Newfoundland and Labrador")

ui <- bootstrapPage(
  theme = bs_theme(version = 5, 
                   "font-scale" = 1.0), 
  div(class = "container-fluid",
  
      div(class = "row",
          div(class="col-4", 
      hr(),
      selectInput(inputId = "province", 
                  label = HTML("Province "),
                  choices = provinces, 
                  selected = "Ontario", 
                  selectize = FALSE,
                  width = select_input_width) %>% 
        helper(
          colour = "grey",
          type = "markdown",
          content = "province")
          )
      )
  ))


server <- function(input, output, session) {

  observe_helpers(help_dir = "info_files")

}

shinyApp(ui, server)

Upvotes: 0

Views: 220

Answers (1)

msr_003
msr_003

Reputation: 1233

Below workaround works for you.

ui <- bootstrapPage(
  theme = bs_theme(version = 5, 
                   "font-scale" = 1.0), 
  div(class = "container-fluid",
      
div(class = "row",
          div(class="col-4", 
              hr(),
              selectInput(inputId = "province", 
                          label = helper(shiny_tag = "Province    r", colour = "grey", type = "markdown", content = ''),
                          choices = provinces, 
                          selected = "Ontario", 
                          selectize = FALSE,
                          width = select_input_width) 
          )
      )
    ))

Note :- I have provided Province r as a parameter value in helper function. This is just to provide space between the text and the icon. If I include only Province as a value then the icon is overlapping at the end of the text.

Upvotes: 1

Related Questions