r - How to align the text on the right side of the value box in R shiny?

Question

I am trying to write text in the value box. I want to align some text on the left side and some text on the right side in the same line. I tried this code:

library(shiny)
library(shinydashboard)
library(flexdashboard)


ui <- dashboardPage(skin = 'purple',
                    dashboardHeader(),
                    dashboardSidebar(),
                    
                    dashboardBody(skin = 'purple',
                                  
                                  fluidRow(
                                    shinydashboard::valueBoxOutput("header", width = 12)
                                  )))


server <- function(input, output) {
  
  output$header <- shinydashboard::renderValueBox({
    shinydashboard::valueBox(tags$p("Hello World!", style ="color : black"), "Hi!")
  })
  
}

shinyApp(ui, server)

Using the above code, I got this:

But I want to display like this:

Hello on the left side and World! on the right side of the value box. If this is possible in the value box, how can I do it?

标签： rshinyshinydashboard

Answer 1

If you want to have different styling on elements the best thing to do is to split them up in different tags.

In this case I would suggest span since it is an inline tag. there are many different ways how o align on object with html and css. I believe the easiest is just to add float:right to the second span tag.

output$header <- shinydashboard::renderValueBox({
    shinydashboard::valueBox(tags$p(tags$span("Hello"),tags$span("World!", style = "float:right"), style ="color : black"), "Hi!")
  })