Positioning the text within Action Button in R shiny

Question

I want to fit Resource Activity text within the given button such that Activity comes below the Resource in the button. Currently the complete word gets hidden because of less space of the button and I do not want to increase the space. Please help.

## app.R ##
library(shiny)
library(shinydashboard)

ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(

actionButton("buttonresinvthree", "Resource Activity",style="color: 
#000000; width:8%; ")
)
)
server <- function(input, output) { }
shinyApp(ui, server)

Hi LyzandeR, Thank you so much for replying, please see my edited post, it has the snap of the button. — Ashmin Kaul, Sep 10 '17 at 14:17
This is not a working example. This is a picture showing the problem. Add an example showing the code that creates the problem. You should provide us with a minimum example showing the problem you face. In your case that should include the ui code and a blank server function. — LyzandeR, Sep 10 '17 at 14:22
For example [this](https://stackoverflow.com/questions/45288069/tablehtml-in-shiny-show-an-image-in-a-cell/45289228#45289228) is a complete shiny question. The code should be minimal, i.e. use only code that is relevant to your problem. — LyzandeR, Sep 10 '17 at 14:26
In this one the button expands to cover the whole text (at least that is how it shows up on my browser). You could try `"Resource\nActivity"`. — LyzandeR, Sep 10 '17 at 14:30
I have set the width to 8% only, need to get the text in double lines, there is some css attribute which can do the job. Please help. — Ashmin Kaul, Sep 10 '17 at 14:33

score 3 · Answer 1 · answered Sep 10 '17 at 15:00

The following works for me:

## app.R ##
library(shiny)
library(shinydashboard)
library(tableHTML)

ui <- dashboardPage(

 dashboardHeader(),
 dashboardSidebar(),
 dashboardBody(
  tags$head(tags$style(make_css(list('.btn', 'white-space', 'pre-wrap')))),
  actionButton("buttonresinvthree", HTML("Resource\nActivity"),
               style="color: #000000; width:8%; ")
 )
)

server <- function(input, output) { }

shinyApp(ui, server)

I added tags$head... to add CSS to the button (class btn) and used \n for the break line between Resource\nActivity.

The result looks like this:

score 2 · Answer 2 · answered Sep 10 '17 at 15:05

Set white-space to normal:

## app.R ##
library(shiny)
library(shinydashboard)

ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(

actionButton("buttonresinvthree", "Resource Activity",style="color: 
#000000; width:8%;white-space:normal;font-size:.8vw;")
)
)
server <- function(input, output) { }
shinyApp(ui, server)

Positioning the text within Action Button in R shiny

2 Answers2