...Hello...
Im developing a dashboard using Shiny and trying do costumize my ui.
I have boxes and inside tables containing labels, textinputs,...etc.
How can I do this ? Do I hv to follow a "hierarchy", for example: Box -> Table -> widget ??
you have to follow a hierarchy if its relevant to how you wish to style things, and you don't if its not. its up to you.
does a widget in a table in a box have to be styled differently than a widget anywhere else ? I cant answer that on your behalf.
Apologies if I haven't understood your question. Feel free to clarify and ask again.
Thanks man....you've understood...let me show you the way Im trying through this slice of code:
tags$head(tags$style(HTML("
label {font-size:7px}
")))
ui <- dashboardPage(
dashboardHeader(title = "TITLE",titleWidth = 450),
dashboardSidebar(
box(width=12,height="250px",
tags$table(
tags$th(Label("PARAMETERS")),
...and nothing happens...
this seems too fragmented (unrelated to a working program ) for me to confidently criticise, but two things seem problematic. firstly , what is Label ? (which package provides that ? ) . R is case sensitive, there is a tags$label() from shiny.
Secondly, its not obvious how your tags$style would be put to use in your app... is it injected somewhere into the UI ? if not one wouldn't expect it to have any effect.
Im trying to apply CSS to these widgets:
https://shiny.posit.co/r/gallery/widgets/widget-gallery/
Label is there.
I dont see it there alphabetically theres no widget beginning L. It goes from F to N
Hi Ninja2112,
I think you may get more seen how I'm doing than I'm trying to fix your code, so here is the approach I'm using to customize my Apps.
I'm implementing most of the configurations in a proper .css file instead of doing it in the R code. The CSS file is called inside a regular ui.R file:
# Define the User Interface for application using Shiny
shinyUI(
# Get a fluid page layout pre-built by Shiny
fluidPage(
# # 1 - Add the head tag to the app, and load the .css style file.
# The many tags$ below will apply html codes to the shiny R appearance. e.g.: tags$head will add the <head> </head> || tags$div will add <div> </div>, etc...
# I'm creating a variable but is not required. I did because I use to load it from a separated file to reuse in other projects.
html_head <- tags$head(
tags$meta(charset = "utf-8"), # Not mandatory, I left as an example of the tags I'm using
tags$title("app title"), # Not mandatory, I left as an example of the tags I'm using
tags$link(type = "text/css", rel = "stylesheet", href = "app_cutomization.css") # Implementing the .css file!
# Changes in the CSS styles to the body of the app should be done in the file `www/app_cutomization.css`. You need to create this file!
)
# Call the variable
html_head,
# # 1.1 - To apply the CSS styles to the body the app, we need to wrap it in a tags$div.
tags$div(class = "app-container",
# # 2 Starting of the Sidebar layout
sidebarLayout(
# # 2.1 Sidebar content . Add whatever you used to add to a sidebar
mainPanel(
# # 2.2 Main panel content
) # close the mainPanel
) # close the sidebarLayout
) # close the tags$div(class = app-container)
) # close the fluidPage
) # close the shinyUI
In the .css file you can make all the customizations you need or want to. The best way I found to do it was running the app and inspecting the elements and configurations to get their names to change. Here are some examples you may use on your own .css file:
/* The app container class was created to change the visual aspects of the Shiny app itself */
.app-container {
height: 100%;
border-radius: 12px;
margin-bottom: 30px;
margin-left: auto;
margin-right: auto;
max-width: 2000px
}
.row {
margin-right: 0px;
margin-left: 0px;
}
/* Forcing changes in the form part of the sidebar*/
.well {
font-size: 15px;
min-height: 20px;
padding: 19px;
margin-bottom: 10px;
border: 0px;
border-radius: 0px;
border-top-left-radius: 0px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
/* Forcing changes in a set of tabs */
.tabbable {
padding-bottom: 0;
padding-top: 10px;
padding-left: 15px;
padding-right: 15px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px
}
/* Customizing default buttons */
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
You need to explore more the parts of the app you want to customize. Adding different ' tag$div ' around your code may help you to avoid side effects or changes to spread too much.
Please, be aware I'm not a html or css coder, so feel free to apply your best practices on how to implement it.
Here is a sample of a shiny app using this approach of customization:
https://vmeregistry.ccamlr.org/
Cheers!
2 Likes
Thank you, guys...I'll check it.