Is it possible to put all tabPanels in a row below the title of a navbarPage? In other words, I would like to keep the appearance of the navbarPage but on two rows: the title on the first one, and the tabPanels on the second. This would allow to "isolate" the title by keeping it on a single row.
library(shiny)
ui <- navbarPage(
title = "some title",
tabPanel("first tab"),
tabPanel("second tab")
)
server <- function(input, output, session) {}
shinyApp(ui, server)
Note that this doesn't have to be a navbarPage. Any UI that could do that is accepted but it has to have the appearance of a navbarPage (no space between the rows, etc.). Hope this is clear enough.
Also asked on RStudio Community
You can force the title to have 100% width via CSS, thereby moving the tabPanels below it:
library(shiny)
ui <- navbarPage(
title = "some title",
tabPanel("first tab"),
tabPanel("second tab"),
tags$style(HTML(".navbar-header { width:100% }
.navbar-brand { width: 100%; text-align: center }")) # center text
)
server <- function(input, output, session) {}
shinyApp(ui, server)
Related
Here is a simple example of a navigation list panel:
library(shiny)
ui <- fluidPage(
titlePanel("Navlist panel example"),
navlistPanel(
"Header",
tabPanel("First",
h3("This is the first panel")),
tabPanel("Second",
h3("This is the second panel")),
tabPanel("Third",
h3("This is the third panel"))
)
)
server <- function(input, output) {
}
shinyApp(ui, server)
I need the well (AKA the grey rectangle with rounded corners that is around the navigation list) to be taller and expand to take the white space marked by the red rectangle:
Image
There is no argument in the navlistPanel() function to do this (there is only the width argument)
I would go with something as follow, adding a style tag and adding custom height to the .row element.
library(shiny)
ui <- fluidPage(
titlePanel("Navlist panel example"),
tags$style(".row{height: 500px;} .row div:nth-child(1){height: 100%;}"),
navlistPanel(
"Header",
tabPanel("First",
h3("This is the first panel")),
tabPanel("Second",
h3("This is the second panel")),
tabPanel("Third",
h3("This is the third panel"))
)
)
server <- function(input, output) {
}
shinyApp(ui, server)
PS: be aware that you can have multiple rows in your app
I want to set a picture as a background for a specific tabPanel in R shiny. The picture in my browser('data/image1.jpg') not from the internet. Could you please assist me on this regard
library(shiny)
ui <-
navbarPage("App Title",
tabPanel("Plot"),# for example I need the background here for Plot tabPanel
tabPanel("Summary"),
tabPanel("Table")
)
server <- function(input, output, session) {}
shinyApp(ui, server)
You can use a selector based on the panel attribute data-value="Plot".
library(shiny)
ui <-
navbarPage("App Title",
tags$style(
'div[data-value="Plot"]{
height: 400px;
background-image: url(https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg);
}'
),
tabPanel("Plot"),# for example I need the background here for Plot tabPanel
tabPanel("Summary"),
tabPanel("Table")
)
server <- function(input, output, session) {}
shinyApp(ui, server)
By default tabs in a tabsetPanel are put on the left. Is it possible to place a tab on the right side, while still having other tabs on the left? So that it looks like this?
library(shiny)
ui <- fluidPage(
tabsetPanel(
tabPanel("tab_left1"),
tabPanel("tab_left2"),
tabPanel("tab_right")
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
Using float-right should indeed work. The problem with using 2 tabsetPanel is that there are 2 active tabs at the same time.
library(shiny)
ui <- fluidPage(
tags$head(
tags$style(HTML(
".tabbable ul li:nth-child(3) { float: right; }"
))
),
tabsetPanel(
tabPanel("tab_left1"),
tabPanel("tab_left2"),
tabPanel("tab_right")
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
Maybe you can create 2 tabsetPanel and pull one over to the right?
rm(list = ls())
library(shiny)
ui <- fluidPage(
div(style="display:inline-block",tabsetPanel(type = c("pills"),tabPanel("tab_left1"),tabPanel("tab_left2"))),
div(style="display:inline-block;float: right",tabsetPanel(type = c("pills"),tabPanel("tab_right")))
)
server <- function(input, output, session) {}
shinyApp(ui, server)
When you apply the class float-right to the ones you want to float to the right, it should do the trick.
I would like to add a tooltip for navbarMenu in Shiny app. Similar question asked here but, there is no answer.Here is my reproducible code
library(shiny)
library(shinyBS)
ui <- shinyUI(fluidPage(
sidebarLayout(
sidebarPanel(),
mainPanel(tabsetPanel(
navbarMenu("Tab1",bsTooltip(id="Tab1", title="Short description for the tab", trigger = "hover"),
tabPanel("Tab1.1"),
tabPanel("Tab1.2")),
tabPanel("Tab2",tabsetPanel(
tabPanel("Tab2.1"),
tabPanel("Tab2.2"))),
tabPanel("Tab3",tabsetPanel(
tabPanel("Tab3.1"),
tabPanel("Tab3.2"),
tabPanel("Tab3.3")))
)))))
server <- function(input, output) {}
shinyApp(ui = ui, server = server)
During my research I found this solution R Shiny: Use navbarPage with bsModal by shinyBS, but for bsModel.
Also, there is a procedure mentioned here which is based in java-script.I know both solutions are for tabpanel but I believe it's the same problem, which is navbarMenu and tabpanel don't have an id.
I'm statistician and I don't have background in HTML or java-script to rewrite the attribute for the tab title or navbarMenu.
I hope I phrase my question in a clear manner. Thanks in advance for your time and kind help.
you can use HTML wenn passing the Title of the Tabs. in this case I just pt the title in a span and added the attribute titlewhich is the attribute HTML uses default for mouse-overs. For me this is much sinpler the trying to add it over shinyBS.
library(shiny)
library(shinyBS)
ui <- shinyUI(fluidPage(
sidebarLayout(
sidebarPanel(),
mainPanel(tabsetPanel(
navbarMenu(span("Tab1",title="Short description for the tab" ),
tabPanel("Tab1.1"),
tabPanel("Tab1.2")),
tabPanel("Tab2",tabsetPanel(
tabPanel("Tab2.1"),
tabPanel("Tab2.2"))),
tabPanel("Tab3",tabsetPanel(
tabPanel("Tab3.1"),
tabPanel("Tab3.2"),
tabPanel("Tab3.3")))
)))))
server <- function(input, output) {}
shinyApp(ui = ui, server = server)
hope this helps!
I found another solution using javascript. Perhaps it may be more useful.
library(shiny)
shinyApp(
ui = navbarPage(
tags$script(HTML('
$( document ).on("shiny:sessioninitialized", function(event) {
$(\'span[data-toggle="tooltip"]\').tooltip({
html: true
});
});'
)),
navbarMenu(
"Menu"
,tabPanel(span("navbarTitle 1",title="XXX",`data-toggle`="tooltip"),
tabsetPanel(
tabPanel(span("Tab 1", title = "aaa",`data-toggle`="tooltip")),
tabPanel(span("Tab 2",title="bbb",`data-toggle`="tooltip")),
tabPanel(span("Tab 3",title="ccc",`data-toggle`="tooltip"))
)
)
,tabPanel( "navbarTitle 2")
)
),
server = function(input, output) {
}
)
I have a lot of generated input fields on an shiny app and I want to make it more dense by lowering the height of the dateinput fields. However, the height tag only shrinks the box and make it overflow into the next input. So, how do I shrink the dateInput() fields so it is only a little higher than the text?
library(shiny)
ui <- fluidPage(
tags$style(".shiny-date-input {height : 30px;}")
,dateInput("date1","date1")
,dateInput("date2","date2")
,textInput("text","text")
)
shinyApp(ui, function(input, output, session){})
Update: To clearify, I want the dateInput (and possibly the textinput also) frame to be less tall without it extending into the blow input:
You can add the class input-sm to the widgets in order to make them a bit smaller. To do so, use shinyjs.
library(shiny)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
dateInput("date1","date1"),
br(),
dateInput("date2","date2"),
br(),
textInput("text","text")
)
shinyApp(ui,
function(input, output, session){
addClass("date1", "input-sm")
addClass("date2", "input-sm")
addClass("text", "input-sm")
}
)
Found the answer in .form_control :
library(shiny)
ui <- fluidPage(
tags$style(".shiny-input-container {line-height: 5px; height : 25px}")
,tags$style(".form-control {height: 25px;}")
,dateInput("date1","date1")
,dateInput("date2","date2")
,textInput("text","text")
)
shinyApp(ui, function(input, output, session){})