Utilizing Shiny app as a functional tool requires knowing the appropriate placement for the www/ directory and managing CSS and

I am currently in the process of transforming a relatively intricate shiny application (consisting of 3-4 modules and 8 CSS/JS files) into a package with a single external function that constructs an instance of the app based on specific input (

build_myApp(dataset1, title, factors)
). This function is stored in build_myApp.R within the R/ directory, alongside myApp_server.R, myApp_ui.R, and various helper files.

Following this example here has been successful so far, although I have encountered an issue where the styling of the app disappeared. In this post here, someone faced similar problems but did not attempt to "functionize" their app.

In the past, I would place external files in a top-level www folder and call them from the top-level ui.R file using codes like 

tags$link(rel = "stylesheet", type = "text/css", href = "sample1.css")
or tags$script(src="www/sample.js"). However, I am now unable to access any of these files, including other external CSS files, although it's hard to confirm for sure.

I have attempted different methods by leaving the www header at the top level, placing it within an inst/ top-level folder, moving it within R/, and restarting the R session each time I made changes. I have tried variations such as:

  • sample1.css
  • ./sample2.css
  • ../sample3.css
  • www/sample4.css
  • ./www/sample5.css
  • ../www/sample6.css
  • /www/sample7.css
  • inst/www/sample8.css
  • /inst/www/sample9.css
  • ./inst/www/sample10.css
  • ../inst/www/sample11.css
  • inst/sample12.css
  • /inst/sample13.css
  • ./inst/sample14.css
  • ../inst/sample15.css

Regrettably, the Mastering Shiny Chapter does not address this issue, and I haven't found any relevant information online. Any guidance on this matter would be greatly appreciated. Thank you!

cssrshinyhtmltools

Answer №1

In case you come across this problem or if it remains unresolved - the solution that has proven effective for me is placing the .css file within the inst/ directory of the package and then referencing it in the UI using system.file, like so:

includeCSS(system.file("myCustomStyles.css", package = "customPackage"))

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps to set a default selection from a list of components in Angular 7

Currently, I am in the process of developing a messages page layout where users can select a message from a list on the left side and view its content on the right side, similar to how it is done in Outlook. Additionally, users should be able to reply or c ...

htmlcssangular2-routingangular7angular-components

Finding partial file names that match full file names in a directory

In my file list, the names are structured as follows: csv_files<-list.files(path, pattern =‘.csv’) Examples include: 1001_2017_01_02#19_30_24.csv 1002_2018_03_01#20_30_54.csv... The format is: id _year_month_day#hour_min_sec.csv. I have extracte ...

rfile-copyingname-matching

The div seems to be out of place and sitting within another div in a

I'm working on a school project to create a mock website, but I'm facing an issue with my div elements being misaligned and showing up in the wrong place. Here's how it currently looks: [ Here's how I want it to look (designed with ph ...

htmlcss

Horizontally center grid items when there is not enough data to fill a complete row

Currently experimenting with the new CSS grid layout feature. I am struggling with aligning a variable number of images in the center of the row when there are less than six items to display. Unfortunately, my attempts to achieve this have not been succe ...

csshtmlgrid-layout

Cluster order in pheatmap visualizations

I have a dataset that contains values for three columns: PI, MI, and EE. > dput(mdata2) structure(list(EE = c(3.3221428469822, 3.62699732299098, 1.75430154205983, 0.809228977410138, 1.24117055233438, 2.93403148663873, 4.01630566539058, 1.5334176884274 ...

rstatisticscluster-analysispheatmap

Visualizing data with quantities on a heatmap using ggmap in R

I'm exploring how to create a heatmap with quantities instead of single inputs like in traditional tutorials (see examples here and here). Although I found an example resembling a heatmap, I'm struggling to integrate quantities per position effec ...

rheatmapggmap

Can someone help me optimize this ranking operation by vectorizing the weighted, sampled data?

Excuse the complexity of this issue. I am currently working on an agent based simulation where I need to select and promote 'n' individuals at each time step. Using a logistic model, I have predicted probabilities for each individual's promo ...

rsample

Comparing column entries within a dataframe in R through pairwise analysis

Data: df_dat = structure(list(code = c(1L, 10000L, 10001L), yr_1986 = c(NA, 10000L, 10001L), yr_1987 = c(NA, 10000L, 10001L), yr_1988 = c(NA, 10000L, 10001L), yr_1989 = c(NA, 10000L, NA), yr_1990 = c(NA, 10000L, NA), yr_1991 = c(1L, 10000L, 10001L), yr_199 ...

rdataframe

Eliminate spacing gaps between the loading bars in ngx-skeleton-loader for Angular

In my current project using Angular11 with material and ngx-skeleton-loader, I am facing an issue with styling loading bars. I am trying to remove all spacing between the bars, but setting the margin and padding to 0px does not completely eliminate the spa ...

cssangularsass

Struggling to align text to the far left within a text area using Bootstrap

When I accidentally place my cursor earlier in the text area, it starts writing from that point, leaving some unwanted spaces at the beginning. I prefer it to start from the extreme left, similar to how it behaves in input boxes. Below is the code snippet ...

htmlcsstwitter-bootstraptextarea

I'm curious if there's a method in SAS or R to extract and classify contact details line by line

I have extracted contact details from various websites and I am looking to add labels to different lines of information such as Name, Address 1...n, and Country. Current details: ABC Inc. Sam Iselin 101 Jim Street Suite 212 Royal Park, IL, 60302 Uni ...

rsas

Extend the iframe size without refreshing the HTML content leveraging solely CSS

My experience in web development is still limited, but I have a requirement to display an iframe within a larger window without refreshing the HTML content inside it. I prefer to achieve this using just JavaScript/CSS, but I'm not sure where to start. ...

javascriptjqueryhtmlcssiframe

How can I transfer the data received from an API call to the server efficiently?

Trying to track the progress of an API call and update a waiter, but for some reason it's not reflecting on the UI. When I remove the If statement and just use a for loop, the API call completes first and then the loop runs, showing the progress from ...

rshinyprogress-barhttrwaiter

What are the possible solutions for resolving this complex CSS positioning problem?

I am currently in the process of designing a website and have been exploring ways to implement a hover animation using CSS. <html> ... <body> <div id ="outer_container"> <div id="inner_container"> <img id="imageOne" ...

csspositioningdisplayonhover

What is the best way to ensure that links on top of background images are clickable?

I apologize if this question has already been addressed, but I have attempted some solutions that were recommended and none have been successful for me so far. My issue lies in trying to add clickable links on top of a background image within a div elemen ...

htmlcssreactjs

Using -webkit-hyphens: auto in Safari does not function properly when the width is set to auto

I have a situation with an h3 element where I am unsure of its width. As a result, the width is set to auto by default. However, I need the text inside this element to have hyphenation applied to it. This h3 element is within a flex container along with an ...

htmlcsshyphenationcss-hyphens

Tool for controlling the layout of the viewport with Javascript

I have experience using ExtJS in the past to create dashboards, and one of my favorite features is the full-screen viewport with a border layout. This allows for easy splitting of a dashboard into panels on different sides without creating excessive scroll ...

javascriptjquerycssextjsextjs4

The custom color override feature in Bootstrap is not being applied as expected

I attempted to incorporate a new theme color into Bootstrap's color scheme, but encountered difficulties in getting it to work. To guide me through the process, I referred to this YouTube tutorial as well as the official Bootstrap documentation. Des ...

csstwitter-bootstrapsass

Conceal the scrollbar and enable horizontal swiping using CSS

I have set up a container where I want the content to scroll horizontally from left to right on mobile devices, and I would like to be able to swipe to navigate while hiding the scrollbar. You can view the implementation on this JSfiddle link Do you think ...

javascriptjqueryhtmlcss

Tips for vertically aligning elements within the body while excluding the navbar from being centered

On my webpage, I have a navigation bar and a lot of content. The code structure looks something like this: .container { display: flex; justify-content: center; align-items: center; } <div class="navbar"> <!-- Various links for navigation ...

htmltwitter-bootstrapcssflexbox