I've got a team who has built plenty with shiny UI (and also shinydashboard) but I'd like to come through and restyle the entire set of apps we've built.
I can link to our css in a number of ways, but that's just setting a new css file on top of the bootstrap base css. *I have not found a way to just ditch the bootstrap css entirely. Is this possible? * Even setting theme to NULL seems to still keep that base css in there.
This causes issues of specificity that I have to overcome, which is annoying.
(I realize by ditching bootstrap I will have to recreate many styles they've defined -- and am losing some of the value of shiny, that's not a problem at this point for me)
The shiny package includes a function suppressDependencies which may be used to drop web dependencies. See ?shiny::suppressDependencies for more information. Unfortunately, I do not believe one can remove only the bootstrap CSS resource, instead one must remove all bootstrap related resources. This appears to be a result of how shiny handles resource dependencies, i.e. all the bootstrap related resources are bundled under the name "bootstrap" which suppressDependencies looks for and then drops entirely.
Limitation aside, I put together a small demo Shiny application showing how to drop the bootstrap resources.
library(shiny)
shinyApp(
ui = tagList(
suppressDependencies("bootstrap"),
tags$p("Hello, world!")
),
server = function(input, output) {
}
)
Related
In my project, I use multiple SPM to split up my app into smaller chunks/modules. This works perfect, including SwiftUI previews which can include views from other modules as well.
Unless there are Images involved; then the preview agent crashes. I created a small Pot showing this... https://github.com/arkulpa/SPMAssetPOC
Images are shown correctly as long as the preview only contains views with assets from the current SPM, but as soon as there's a view (including an asset) from another SPM, the PreviewAgent crashes...
This is definitely a bug. The issue is related to loading bundle resources transitively.
"This is a known issue when using resources of transitive dependencies while previewing a standalone package. Using an app as the preview host as you are doing is the recommended workaround at the moment."
See the Swift forums here for more details:
https://forums.swift.org/t/xcode-previews-swiftpm-resources-xcpreviewagent-crashed/51680
In our attempt to transform our code from FTC to CAM we are facing some minor difficulties from the branding perspective. I’ll briefly elaborate about our scenario below:
In our current FTC implementation we are using both CSS and JS to render the desired UI. References for both the assets are present in the master page and hence get rendered with the HTML
Since it is recommended not to modify the master page when moving to vNext, we decided to go via the custom actions route.
We added custom actions for both CSS and JS to a test site. On browsing to our test site, we found out that the UI was appearing as desired but only with a noticeable lag.
As it appeared, what was happening was that the corev4.css was getting applied and then after around 2 seconds our custom CSS would be applied leading to an unpleasant flickering effect.
I went through a project named Branding.CustomCSS present in the PnP samples which did a similar thing of applying the CSS by rendering link tag via a custom action. In the documentation for that project, it was mentioned that this wasn’t a recommended approach for applying CSS if we are on Office 365 or April 2014 CU on-prem. Instead, the AlternateCSS approach was recommended.
I modified the code to use the AlternateCSS approach for rendering the CSS reference while keeping the custom action for rendering JS reference as it is. That certainly improved the experience.
We still had the JS file though which was manipulating the DOM to achieve the desired look and feel and that was still loading with a delay. We suspect that this is happening because in case of Custom Actions the code to insert JS references runs after the page is loaded. While the JS loads and executes, the UI that is shown meanwhile is without the DOM manipulations and is not what is desired. So the flickering of some components in the page, that the JS is responsible to beautify, is still present. This was not the case in our FTC where there was no noticeable lag.
I required some suggestions as to what approach we should follow so that we can do away with the delay in loading such asset files?
Also, is there an approach that would render JS references along with the HTML and not after page load like it does in case of custom actions?
I too are experiencing this issue. It is a really ordinary user experience. As you said, you can limit it by updating the logo and applying the alternate CSS in the provisioning process, but you still get that noticeable flicker. I have been experimenting with adding ms-hidden to the body tag at the start of the process, then removing it at the end, but it hasn't helped much. I might see about hiding the body from the get-go via the alternate css, then in the injector.js file override that style. Any suggestions from others would be greatly appreciated though. The PnP only has a basic injector scenario where it puts a message in the status area, but that isn't really a realistic scenario.
I like the new library(shinydashboards), but I wonder whether it's possible to arrange several tabs next to each other in the dashboard header - like in the navbarpage layout of the normal shiny library?
It seems impossible to use the navbarlaout within a "dashboardPage" since "navbarPage" is a layout command like "dashboardPage".
Nevertheless, a combination of navbarpage & dashboardPage would be interesting.
From the shinydashboard examples I found (below and others), it looks like different dashboard tabs can only be placed in the sidebar.
Has anyone found a way to add tabs for several dashboards in the "dashboardPage" header?
https://github.com/rstudio/shinydashboard/tree/gh-pages/_apps
Samples here are using the dropdownMenu() function. The type is currently very limited (e.g., can choose icon from libraries font-awesome or glyphicon, but not text), but maybe that is enough customization to make this useful for your application?
So I've been adding tabs to my top header by adding them as links within html tags. I appreciate this isn't quite the same thing as having tabs, because the links are hosted on different urls, but in my case that's the whole reason I need the additional tabs and can't just use navbarPage e.g.:
dashboardPage(
dashboardHeader(
title = "Your Page Title",
tags$li(
a(
strong("Tab Title"),
height = 30,
href = "www.google.com"
title = "",
target = "_blank"
),
class = "dropdown"
)))}
I like the IntelliJ 'live edit' feature but it doesn't work for Django templates because obviously they are just a bunch of variables and its not finding the CSS files. Is there some way of working 'live' on Django templates? (or any other templating system for that matter).
Similarly I tried to use Chrome devtools autosave but it also didn't work, presumably it wants me to open an html file locally (i.e. file://).
And using chrome inspector to edit stuff is a pain because you have to copy and paste your changes - unless I'm missing something?
I am using IntelliJ 12.0.4 Ultimate with the Python plugin (this is more or less equivalent to PyCharm) to work on Django templates. It doesn't look like the Live Edit functionality works as per usual, indeed because the template has to be rendered to HTML first by Django.
One alternative is to assign a keyboard shortcut to the "View | Reload in Browser" menu item.
Another alternative is to use a Chrome plugin such as ChromeReload: You can set this to reload a specific page at a specific interval.
I tried creating a new theme in Magento by creating the following folders:
/app/design/frontend/interface/default
/skin/frontend/interface/default
I copied into these folders the entire content of the base/default folders (in both skin and design).
I enabled the theme bu putting "interface" in "current package name" for a website and expected it to look like the theme I had copied, but for some reason, nothing in the head is loaded. No css, js, ...
I checked and all my xml/css/js files are all there though ... What might the problem be?
The .phtml files are all being loaded.
EDIT:
I also noticed that selecting "base" as default package does not work either, but if you select "default", then it does load the base theme phtml files with some base and soem default css ...
EDIT2
Fixed, not sure where the error was ...
Did you refresh the caches?
On development stations its good practice to disable all Magento caches, until everything works, because sometimes it's really easy to forget to refresh them.
Magento have a structure, its better to put your custom magento theme design folder into app/design/frontend/default/themename this is PHTML path and for CSS and JS you can put the folder in skin/frontend/default/themename
After that just delete the cache and enable the theme from either admin > system > configuration > design or from admin > system > design and select you custom magento theme