es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Alinee las entradas con las etiquetas y el ActionButton verticalmente en fluidRow.

31 Jul, 2023 Programación

En mi aplicación shinydashboardPlus, uso fluidRow/column para especificar mi diseño. A veces, tengo uno o varios textInput/selectInput y un actionButton en una fila. Debido a que los elementos de entrada tienen una etiqueta, son verticalmente más grandes que el botón, lo cual no se ve muy bien. Por ejemplo:

desalineado verticalmente

¿Hay alguna manera fácil de mover el actionButton un poco hacia abajo para que esté alineado con, por ejemplo, el elemento “local”?

Aquí hay un ejemplo mínimo:

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

ui <- shinydashboardPlus::dashboardPage(
    header=shinydashboardPlus::dashboardHeader(title = "Ejemplo de alineación"),
    sidebar=shinydashboardPlus::dashboardSidebar(
        shinydashboard::sidebarMenu(id = "tabs",
            shinydashboard::menuItem(
                "Bienvenido", tabName = "bienvenida"
            )
        )
    ),
    body=shinydashboard::dashboardBody(
        shinydashboard::tabItems(
            shinydashboard::tabItem(tabName="bienvenida", 
                shiny::fluidRow(
                    shinydashboardPlus::box(
                        status="black", solidHeader = TRUE, width=12, closable = FALSE,
                        title="¡Bienvenido!",
                        shiny::column(4, 
                            shiny::textInput("username", label="Nombre de usuario:")
                        ),
                        shiny::column(4, 
                            shiny::passwordInput("passwd", label="Contraseña:")
                        ),
                        shiny::column(2, 
                            shiny::selectInput(inputId="dbmode", "Modo:",
                                choices = c("producción", "prueba", "local"),
                                selected = "local"
                            )
                        ),
                        shiny::column(2, 
                            shiny::actionButton("dbconnect", "¡Conectar!")
                        )
                    )
                )
            )
        )   
    )
)

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

shiny::shinyApp(ui, server)
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, hay una forma fácil de mover el actionButton un poco más abajo para que esté alineado con los demás elementos de entrada. Una forma de lograr esto es utilizando el relleno CSS. Aquí tienes un ejemplo:

    “`{css}
    /* Define un relleno para el actionButton para moverlo hacia abajo */
    #dbconnect {
    padding-top: 30px;
    }


    Puedes agregar este código CSS a tu aplicación creando una carpeta `www` en el directorio de tu aplicación y guardando un archivo llamado `styles.css` en ella. Luego, incluye la siguiente línea en tu función `ui`:

```{r}
shinydashboardPlus::useShinydashboardPlus(theme = "black", reset = TRUE, bslib = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css", css = "styles.css")

    Este código establece el tema en negro, reinicia todo el CSS, utiliza Bootstrap 5 e incluye tu archivo CSS personalizado.

    Cuando ejecutas tu aplicación con este código CSS, el actionButton se moverá hacia abajo 30 píxeles y estará alineado con los demás elementos de entrada. Puedes ajustar el valor del relleno según tus preferencias.

    Aquí está la función ui actualizada que incluye este código CSS:

    “`{r}
    ui <- shinydashboardPlus::dashboardPage(
    header=shinydashboardPlus::dashboardHeader(title = “Ejemplo de Alineación”),
    sidebar=shinydashboardPlus::dashboardSidebar(
    shinydashboard::sidebarMenu(id = “tabs”,
    shinydashboard::menuItem(
    “Bienvenido”, tabName = “welcome”
    )
    )
    ),
    body=shinydashboard::dashboardBody(
    shinydashboard::tabItems(
    shinydashboard::tabItem(tabName=”welcome”,
    shiny::fluidRow(
    shinydashboardPlus::box(
    status=”black”, solidHeader = TRUE, width=12, closable = FALSE,
    title=”¡Bienvenido!”,
    shiny::column(4,
    shiny::textInput(“username”, label=”Nombre de usuario:”)
    ),
    shiny::column(4,
    shiny::passwordInput(“passwd”, label=”Contraseña:”)
    ),
    shiny::column(2,
    shiny::selectInput(inputId=”dbmode”, “Modo:”,
    choices = c(“producción”, “prueba”, “local”),
    selected = “local”
    )
    ),
    shiny::column(2,
    shiny::actionButton(“dbconnect”, “¡Conectar!”)
    )
    )
    )
    )
    )
    )
    )

    shinydashboardPlus::useShinydashboardPlus(theme = “black”, reset = TRUE, bslib = “https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css”, css = “styles.css”)

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

    shiny::shinyApp(ui, server)
    “`

Comments are closed.