I'm having problems with my RShiny when I resize the browser. I noticed there are several similar topics but those are when it is words and can be solved with the wrap words input. However mine is a picture and a bunch of words.
When browser is big
When resized
###codes above
output$img1 <-renderUI({
if(input$Category == "Cleanser"){
img(width = 175, height = 175, src = "Cleansers.png", style = "margin-left:15px; margin-top:10px")
}
### rest of codes
output$text1<-renderUI({
summary<-read_excel(paste0("Summary/",input$Category,".xlsx"),sheet = 1)
summary$Price<-as.integer(summary$Price)
dat<-calcul()
product=paste(dat[input$table1_cell_clicked$row,1])
w1=which(summary$`Product Name`==product)
###relevant part###
fluidRow(tags$head(tags$style(
"body { word-wrap: break-word; }"
)),
column(2,uiOutput("img1",inline = T))
,column(9,h3("Description",style = 'margin-left:10px'),
p(summary$Description[w1], style = "margin-left:10px"))
)
})
I used fluidRow() to make the columns, I tried using the word-wrap thing but it doesn't work still. Can someone help me out ? Thanks so much!
Related
I am having an issue where the data for my DT table is "bleeding" past the edge of the box in my fluid row.
Here is the tabPanel section
tabPanel("Table title", h1('dataset', style = 'color: #23A595'),
p('Here we will have a paragraph of explanatory text to talk about the graphs below. Here we will have a paragraph of explanatory text to talk about the graphs below. Here we will have a paragraph of explanatory text to talk about the graphs below. Here we will have a paragraph of explanatory text to talk about the graphs below. Here we will have a paragraph of explanatory text to talk about the graphs below.', style = 'color: black'),
fluidRow(
box(DT::dataTableOutput(outputId = "table"), width = NULL, solidHeader = TRUE, status = "primary"),
),
When the app is run here is the result of the render DT.
Here is what the data set looks like.
The red box highlights the issue.
Here is what i have tried:
First,
output$table<- renderDT(
outputtable,options = list(columns.width = "3px"
),
rownames= FALSE
)
Second,
fluidRow(box(DT::dataTableOutput(outputId = "table"),width = #),
)
I was under the impression that shiny just automatically calculates the size needed despite window size an such.
in simple terms, shiny creates box + add DT table to box = box with DT table INSIDE of it.
I want the highlighted issue to not happen what do I need to do?
If there is anything I can add let me know.
The scrollX comment above answered the question.
I am attempting to arrange the following outputs so that each number pair is aligned perfectly.
Is there a way to change the spacing of a table beyond the options avaible e.g 'l'?
Following this, how could I vertically align the table with the bucketlist?
library(shiny)
library(sortable)
ui <- fluidPage(column(width =1,tableOutput("table")), column(width =1,
uiOutput("numbers"))
)
server <- function(input, output, session) {
output$table = renderTable( spacing = 'l',as.matrix(c(1:30)))
output$numbers <- renderUI({
bucket_list(
header = h4("Numbers", align = "center"),
group_name = "rank_Bedspace_Acuity",
orientation = "horizontal",
add_rank_list(
text = h5("Numbers", align = "center",style="color: #fff; background-color: #4080C9"),
input_id = "numbers",
labels = c(1:30)
))
})
}
shinyApp(ui, server)
Help appreciated.
Spacing of table - You will have to tweak the .css on your own.
I took your code and made the following updates to .css
Set table
width: auto; - Deleted this
padding-top: 15px; - Added this
.tr { padding-bottom: 1px }
(this is to match with the sortable height of 42px. Alternatively, you could also update the row height directly.
I assume by vertical alignment, you want the table to appear right next to the sortable widget so that you get a reference between old table vs the updated one. Applying the above .css tweaks, I get the following
Is this what you were looking for?
I am using R's c3 package which is a wrapper for the C3 javascript charting library by Masayuki Tanaka.
My c3 chart below cuts off the last date on the x-axis.
Using Chrome Inspector I can manually adjust the text-anchor: middle to text-anchor: end
and that seems to work.
However, I do not understand how to do this with css.
Here's my R Script and related css though I don't think that R is relevant to the issue here.
R Script
library(shiny)
library(c3)
data <- data.frame(a = abs(rnorm(20) * 10),
b = abs(rnorm(20) * 10),
date = seq(as.Date("2014-01-01"), by = "month", length.out = 20))
ui <- fluidPage(
includeCSS("c3.css"),
c3Output("chart", height = "100%")
)
server <- function(input, output, session) {
output$chart <- renderC3({
data %>%
c3(x = 'date') %>%
tickAxis('x', count = 5, format = '%Y-%m-%d')
})
}
shinyApp(ui, server)
css
.c3-line {
stroke-width: 4px !important;
}
.c3-axis-x-label {
text-anchor: end;
}
You haven't pasted any actual code, but it's highly likely that the code below will help:
.c3-axis-x g.tick:nth-last-child(3) text {
transform:translateX(-5%);
}
You need to target the text correctly and adjust value to your needs.
Edit: Actually it's not :last-child - adjusted, based on some actual code. In essence you need to target your selector properly and apply the transform property.
Edit2: So it was actually the .c3-axis-x group that includes the tick texts. Code updated (yet again)
One thing that popps to my head immediately:
With your css you are only targeting the 'date' element.
You other 'text' element doesnt have a class, therefore the css for '.c3-axis-x-label' will only target the first text element.
Try adding 'c3-axis-x-label' class also to your other 'text' element.
Another thing:
The 'text' tag that you want to adjust has its styles written in the tag
When you set styles like this it will always override the applied CSS.
One solution i can think of, is to add !important in your CSS to override the style. I do not recommend using !important, but if its too difficult to actually change the css directly then this might be a solution.
If you can add a class to the other text element the try applying styles to 'text' in your css:
g > text {
text-anchor: end;
}
Let me know if any of that helped. Otherwise some code would come in handy to help you out
While building a very nice additional functionality into my shiny app where the user can reorganize the plots inside the page, I ran into 1 problem.
I noticed that the spacing between the div elements that are being relocated (sorted), changes while doing so, resulting in a misalignment of the plots afterwards.
I have tried to adjust margin values to nothing, 0 or a certain amount of pixels, but that doesn't seem to solve this.
The app that I made to test / illustrate the issue is posted below, where I left out the plots to simplify it:
require('shiny')
require('shinyjqui')
ui <- fluidPage(
div(uiOutput('multiobject'), style = 'width: 1200px')
)
server <- function(input, output, session) {
output$multiobject <- renderUI({
plot_output_list <- list();
for(i in 1:8) {
plot_output_list <- append(plot_output_list,list(
wellPanel(
actionButton('drag', label = icon('hand-point-up'), style = 'float: right; color: #339fff;'),
style = 'border-color:#339fff; border-width:1px; background-color: #fff;display: inline-block; margin:2px; width:290px; height:250px')
))
}
jqui_sortable(do.call(function(...) div(id="allplots", ...), plot_output_list), options = list(handle = '#drag', cancel = ""))
})
}
shinyApp(ui, server)
and this image shows the problem after sorting:
A second problem is the white space appearing when hovering a plot.
I tried to add the css from this "non-R-Shiny" question but could't make it work.
It is not perfect yet, but it should be better than before.
The spacing problem of the <div>s was caused by empty text knods. You can see them when inspecting the page in a browser. This means, changing the css margin arguments will not help. The empty text knods are present in the initial page and once you start dragging they disappear leading to said spacing problem. I got rid of them by not wrapping uiOutput('multiobject') in a div()-tag and instead defined its width using the .ui-sortable class in css.
Your second problem, the white space appearing when hovering a plot, can be mitigated by adding 'float: left; to the style = argument in the for loop of your plot_output_list. The css arguments from the SO post you linked won't work, since there are no classes named .sort-container and .item-wrapper this was specific to the original question. There is still a white space appearing when dragging, but it is much smaller than before.
Update I had some issues with the code, sometimes it's working sometimes not. I think there might be css confilcts. I now added !important to the changed css arguments and it seems to work. Will try it on a different machine later.
require('shiny')
require('shinyjqui')
require('stringr')
ui <- fluidPage(
# Custom CSS----------
tags$style(HTML(".ui-sortable {
width: 1200px !important;
} "
)),
uiOutput('multiobject')
)
server <- function(input, output, session) {
output$multiobject <- renderUI({
print(input$drag)
plot_output_list <- list();
for (i in 1:8) {
plot_output_list <- append(plot_output_list,list(
wellPanel(
actionButton('drag', label = icon('hand-point-up'), style = 'float: right; color: #339fff;'),
style = 'float:left !important; border-color:#339fff; border-width:1px; background-color: #fff;display: inline-block; margin:2px; width:290px; height:250px')
))
}
jqui_sortable(do.call(function(...) div(id = "allplots", ...), plot_output_list), options = list(handle = '#drag', cancel = ""))
})
}
shinyApp(ui, server)
I created a notification within Shiny dashboard that displays an icon and then the number of users registered in the last day. If I put in dummy text, the icon and the text are aligned on the same 'row'. But if I use renderText to pull the number dynamically, a line break is added after the icon.
Here's the ui code:
dropdownMenu(type = "notifications",
notificationItem(text = textOutput("regis")",
icon("users"))
Here's the server code:
output$regis <- renderText({
count <- registrationsToday()
paste(count,"new registrations today.",sep=" ")
})
I've tried to fix it but can't figure it out. Any ideas?
An interim solution to this problem was posted here:
https://github.com/rstudio/shinydashboard/issues/21
I tested this and it worked.
notificationItem(
text = tags$div(textOutput("regis"),style = "display: inline-block; vertical-align: middle;"), icon("users")
)
Hope this helps!