Question 268502 in CSS Question posted in
Some basic documentation can be found here.

Css – How to change the height of an R Shiny actionButton?

Hei,

I have a flexdashboard with shiny components.

The shiny components are placed on the dashboard with fillRow in a customised manner.

Unfortunately the height of the actionButton is not appropriate.

How can I change the height of the actionButton?

My example Code:

---
title: "Action Button Example"
author:
    output:
    flexdashboard::flex_dashboard:
    orientation: rows
vertical_layout: scroll
runtime: shiny
---

Some Shiny elements
=======================================================================

```{r setup, include=FALSE}
# --------------------------------------------------------------------------------------------
# necessary packages
# --------------------------------------------------------------------------------------------
library(shiny)
library(tidyverse)
```

```{r section1, echo=FALSE}
# --------------------------------------------------------------------------------------------
# 'fillRow' (and 'fillCol') allows place shiny-elements in a custom style
# --------------------------------------------------------------------------------------------
fillRow(uiOutput("UItext"),
        uiOutput("UIselect"),
        uiOutput("UIbutton"),
        flex = c(1,3,1), 
        width = "100%", height = "100%")
```

```{r section2, include=FALSE}
# --------------------------------------------------------------------------------------------
# Text
# --------------------------------------------------------------------------------------------
output$UItext <- renderText({
    paste0("Textelement","<br>","in 2 lines")
})

# --------------------------------------------------------------------------------------------
# Selection
# --------------------------------------------------------------------------------------------
output$UIselect <- renderUI({
    selectInput(inputId = "UIselect",
                label = "Something to choose",
                choices = c("",paste("Selection",1:3),paste0("And here a ",paste(rep("very",25),collapse = ", ")," long Text")),
                selected = "",
                width = "100%"
    )
})

# --------------------------------------------------------------------------------------------
# (Delete) Button
# --------------------------------------------------------------------------------------------
# Color of Buttons:
# https://stackoverflow.com/questions/33620133/change-the-color-of-action-button-in-shiny
# https://getbootstrap.com/docs/4.0/components/buttons/
# Delete Button only, if selection is choosen    
output$UIbutton <- renderUI({
    actionButton(inputId = "UIbutton",
                 label = "Delete?",
                 width = "100%",
                 class = "btn-danger btn-lg",
                 style = "height: 60px
    )
})


# --------------------------------------------------------------------------------------------
# Click on Delete Button: Delete Button should disapear!
# --------------------------------------------------------------------------------------------
observeEvent(input$UIbutton,{
    # Empty shiny Elements
    updateSelectInput(session,"UIselect", selected= "")
})
```

By the way: why do I get a "true" between the headers?

Thank you for any help!

V

Tags:

2

Answers


  1. 0

    Use something like this:

    actionButton("go","Press me!", style = "height: 400px")
    Login or Signup to reply.
  2. 0

    Here is a way:

    tags$div(
  uiOutput("UItext", style = "flex-grow: 1;"),
  uiOutput("UIselect", style = "flex-grow: 3;"),
  uiOutput("UIbutton", style = "flex-grow: 1;"),
  style = "display: flex; width: 100%; align-items: stretch;"
)

    and:

        actionButton(inputId = "UIbutton",
                 label = "Delete?",
                 width = "100%",
                 class = "btn-danger btn-lg",
                 style = "height: 100%"
    )

    But there’s a bottom margin of 15px below the select input. To get rid of it, add this CSS chunk:

    ```{css}
#UIselect .form-group {
  margin-bottom: 0;
}
```
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search