Can anyone help with setting the top/bottom margin for the tabs in a tabsetPanel in shiny using CSS?
Here's an example code
library(shiny)
shinyApp(
ui=shinyUI(
fixedPage(
tabsetPanel(
tabPanel("Data Input",
fixedRow(
column(12,
h6("test"))
)
)
)
)
)
,
server=shinyServer(function(input, output) {
})
)
Maybe something like this. For more info see: Background color of tabs in shiny tabPanel
library(shiny)
shinyApp(
ui=shinyUI(
fixedPage(
tabsetPanel(
tabPanel("Data Input",
tags$style(HTML("
.tabbable > .nav > li > a {margin-top:50px;}")),
fixedRow(
column(12,
h6("test"))
)
)
)
)
)
,
server=shinyServer(function(input, output) {
})
)
Related
Is there way to adjust the width of a well panel as shown in the image below? At the bottom is the code, if the user clicks the "Delete column" action button a conditional panel renders underneath; clicking of any other action button causes the conditional panel to disappear. I'd like the conditional panel to be surrounded in a well panel and am trying to format it nicely.
My guess is this requires some CSS.
Code:
library(shiny)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
br(),
fluidRow(
column(2,actionButton("addCol","Add column")),
column(2,actionButton("delCol","Delete column")),
column(2,actionButton("savTbl","Save table")),
column(2,actionButton("clrTbl","Clear table")),
br(),
),
br(),
shinyjs::hidden(
div(id="delPanel",
conditionalPanel(
condition="input.delCol > 0 && !output.hide_panel",
fluidRow(
wellPanel(
column(2,textOutput("delFlag")),
column(3,uiOutput("delCol2"))
)
),
style = "display: none;"
)
)
)
)
server <- function(input,output,session)({
observeEvent(input$delCol,{shinyjs::show("delPanel")})
observeEvent(input$addCol|input$savTbl|input$clrTbl,{shinyjs::hide("delPanel")})
output$delFlag <- renderText("Delete column:")
output$delCol2 <-
renderUI(
selectInput("delCol3",
label = NULL,
choices = c(1,2,3),
selected = "")
)
})
shinyApp(ui, server)
Below is a css solution, thanks to post Shiny wellpanel width:
library(shiny)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
br(),
fluidRow(
column(2,actionButton("addCol","Add column")),
column(2,actionButton("delCol","Delete column")),
column(2,actionButton("savTbl","Save table")),
column(2,actionButton("clrTbl","Clear table")),
br(),
),
br(),
shinyjs::hidden(
div(id="delPanel",
conditionalPanel(
condition="input.delCol > 0 && !output.hide_panel",
fluidRow(tags$div(id="pane", # added
wellPanel(
column(2,textOutput("delFlag")),
column(3,uiOutput("delCol2")),
),
tags$style(type="text/css","#pane{font-size:14px;width:565px;}") # added
)
),
style = "display: none;"
)
)
)
)
server <- function(input,output,session)({
observeEvent(input$delCol,{shinyjs::show("delPanel")})
observeEvent(input$addCol|input$savTbl|input$clrTbl,{shinyjs::hide("delPanel")})
output$delFlag <- renderText("Delete column:")
output$delCol2 <-
renderUI(
selectInput("delCol3",
label = NULL,
choices = c(1,2,3),
selected = "")
)
})
shinyApp(ui, server)
I'm trying to align the actionButton right next to the textbox.
Is there a way to add an argument to the column function? Or is there a simple css workaround?
Code:
library(shiny)
ui <- fluidPage(
sidebarLayout(
sidebarPanel(),
mainPanel(
fluidRow(
column(11, textInput("code", label = " ", width = "100%")),
column(1, actionButton("run", "Run")))
)
)
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
Right now it looks like this:
But I want to achieve something like this:
Try margin-top as shown below.
library(shiny)
ui <- fluidPage(
sidebarLayout(
sidebarPanel(),
mainPanel(
fluidRow(
column(11, textInput("code", label = " ", width = "100%")),
column(1, div( style = "margin-top: 20px;", actionButton("run", "Run"))))
)
)
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
I have created the following application template in R shiny :
library(shiny)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
navbarPage("",actionButton("toggleSidebar", "toggle", icon =
icon("database")),
tabPanel("tab",
div( id ="Sidebar",sidebarPanel(
)),mainPanel() ))))
server <-function(input, output, session) {
observeEvent(input$toggleSidebar, {
shinyjs::toggle(id = "Sidebar")
}) }
shinyApp(ui, server)
The App will create a toggle button in the sidebar. The button should appear in the navbar and not above the sidebar. The actual toggle button appears above next to the word tab. It is however, not visible.
The part that is not visible that you mention is in fact the empty title parameter that you have "". Leaving this out as below places the toggle button in the title position:
library(shiny)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
navbarPage(actionButton("toggleSidebar", "toggle", icon =
icon("database")),
tabPanel("tab",
div( id ="Sidebar",sidebarPanel(
)),mainPanel() )))
server <-function(input, output, session) {
observeEvent(input$toggleSidebar, {
shinyjs::toggle(id = "Sidebar")
}) }
shinyApp(ui, server)
I made an example with multiple tabPanels.
library(shiny)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
navbarPage(title = tagList("title",actionLink("sidebar_button","",icon = icon("bars"))),
id = "navbarID",
tabPanel("tab1",
div(class="sidebar"
,sidebarPanel("sidebar1")
),
mainPanel(
"MainPanel1"
)
),
tabPanel("tab2",
div(class="sidebar"
,sidebarPanel("sidebar2")
),
mainPanel(
"MainPanel2"
)
)
)
)
server <-function(input, output, session) {
observeEvent(input$sidebar_button,{
shinyjs::toggle(selector = ".sidebar")
})
}
shinyApp(ui, server)
=======================================
I have created a simpler example that does not use the sidepanel class, but I am not sure if it will work in all environments.
library(shiny)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
navbarPage(title = tagList("title",actionLink("sidebar_button","",icon = icon("bars"))),
tabPanel("tab1",
sidebarPanel("sidebar1"),
mainPanel("MainPanel1")
),
tabPanel("tab2",
sidebarPanel("sidebar2"),
mainPanel("MainPanel2")
)
)
)
server <-function(input, output, session) {
observeEvent(input$sidebar_button,{
shinyjs::toggle(selector = ".tab-pane.active div:has(> [role='complementary'])")
})
}
shinyApp(ui, server)
I have a shiny example using renderDataTable() to create an output.
I have removed all possible options (paging, filtering, searching, etc). However, there is now a blank row at the top and bottom of my table output, where the filtering and searching used to be.
How can I remove these two divs from inside the datatable wrapper, only when I have removed the filtering and searching options?
ui.R:
library(shiny)
shinyUI(pageWithSidebar(
headerPanel("dataTable Example"),
sidebarPanel(
"This is a sidebar"
),
mainPanel(
p("Check out the gaps below."),
wellPanel(
dataTableOutput('example1')),
p("No gaps here because of searching and paging."),
wellPanel(
dataTableOutput('example2')
)
)
)
)
server.R:
library(shiny)
shinyServer(function(input, output) {
x<-c(1,2,3,4,5)
y<-c('a','b','c','d','e')
test<-data.frame(x,y)
output$example1<-renderDataTable({test},options = list(iDisplayLength = 5,bSearchable = FALSE
,bFilter=FALSE,bPaginate=FALSE,bAutoWidth=TRUE
,bInfo=0,bSort=0))
output$example2<-renderDataTable({test})
})
You can use the sDom option see http://legacy.datatables.net/usage/options#sDom for more details:
library(shiny)
runApp(list( ui =pageWithSidebar(
headerPanel("dataTable Example"),
sidebarPanel(
"This is a sidebar"
),
mainPanel(
p("Check out the gaps below."),
wellPanel(
dataTableOutput('example1')),
p("No gaps here because of searching and paging."),
wellPanel(
dataTableOutput('example2')
)
)
)
, server = function(input, output) {
x<-c(1,2,3,4,5)
y<-c('a','b','c','d','e')
test<-data.frame(x,y)
output$example1<-renderDataTable({test},options = list(iDisplayLength = 5,bSearchable = FALSE
,bFilter=FALSE,bPaginate=FALSE,bAutoWidth=TRUE
,bInfo=0,bSort=0
, "sDom" = "rt"
))
output$example2<-renderDataTable({test})
}
)
)
How can I get a white background in tabsetPanel. For better understanding of my problem I'll bring up an example:
In my ui.R file I have the following:
mainPanel( wellPanel(wellPanel(plotOutput("densityPlot", height="500px"))),
wellPanel(tabsetPanel(type = "tabs",
tabPanel(h5("Text1"),p("Text" )),
tabPanel(h5("Text2"), p("Text") ),
tabPanel(h5("Text3"), p("Text"))),
br(),
br(),
br()
))
To make it more clear please have a look at the picture below:
The difference is the white background area inside of any tagPanel. This combination of grey and white is the problem. Has anyone an idea, how can I get such a tagPanals.
Use a style option on the wellPanel:
runApp(list(
ui = fluidPage(
titlePanel("Hello Shiny!"),
sidebarLayout(
sidebarPanel(
numericInput('n', 'Number of obs', 100)
),
mainPanel( wellPanel(wellPanel(plotOutput("densityPlot", height="500px"))),
wellPanel(style = "background-color: #ffffff;", tabsetPanel(type = "tabs",
tabPanel(h5("Text1"),p("Text" )),
tabPanel(h5("Text2"), p("Text") ),
tabPanel(h5("Text3"), p("Text"))),
br(),br(),br()
))
)
)
,
server = function(input, output) {
output$densityPlot <- renderPlot({ hist(runif(input$n)) })
}
))