Adjust the styling of the minimized file input to work like a download button when the window is resized

I successfully minimized the fileInput function by removing the upload area and loading bar, giving it a similar appearance to a downloadButton. However, I'm facing difficulties in determining which part of the CSS code needs to be modified to make it behave like a download button when the window is resized. Any assistance on this matter would be greatly appreciated.

Image display with wide sidebarPanel:

https://i.sstatic.net/GEgCT.png

Image display with narrow sidebarPanel:

https://i.sstatic.net/7Cs3R.png

Below is the code snippet including the parts that were commented out in my adjusted fileInput for future reference:

library(shiny)

fileInputNoExtra<-function(inputId, label, multiple = FALSE, accept = NULL, width = NULL, buttonLabel = "Browse...", placeholder = "No file selected"){
  restoredValue <- restoreInput(id = inputId, default = NULL)
  if (!is.null(restoredValue) && !is.data.frame(restoredValue)) {
    warning("Restored value for ", inputId, " has incorrect format.")
    restoredValue <- NULL
  }
  if (!is.null(restoredValue)) {
    restoredValue <- toJSON(restoredValue, strict_atomic = FALSE)
  }
  inputTag <- tags$input(id = inputId, name = inputId, type = "file", 
                         style = "display: none;", 
                         `data-restore` = restoredValue)
  if (multiple) 
    inputTag$attribs$multiple <- "multiple"
  if (length(accept) > 0)
    inputTag$attribs$accept <- paste(accept, collapse = ",")
  # div(class = "form-group shiny-input-container", style = if (!is.null(width)) 
  # paste0("width: ", validateCssUnit(width), ";"), #label %AND% 
  # tags$label(label), 
  #div(class = "input-group", 
  tags$label(class = "input-group-btn", type="button", style=if (!is.null(width)) paste0("width: ", validateCssUnit(width),";","padding-right: 5px; padding-bottom: 5px;"),
             span(class = "btn btn-default btn-file",type="button", buttonLabel, inputTag, style=if (!is.null(width)) paste0("width: ", validateCssUnit(width),";","border-radius: 5px; padding-bottom: 5px;"))
  )#, 
  #tags$label(class = "input-group-btn", type="button", span(class = "btn btn-default", buttonLabel, inputTag))#, 
  #tags$input(type = "text", class = "form-control", placeholder = placeholder, readonly = "readonly")
  #)
  # tags$div(id = paste(inputId, "_progress", sep = ""), class = "progress progress-striped active shiny-file-input-progress", tags$div(class = "progress-bar"))
  # )
}

ui <- fluidPage(sidebarLayout(
  sidebarPanel(
    fileInputNoExtra("test1",label="",accept=".lmmm",buttonLabel=list(icon("folder"),"Normal upload button1"),width="200px"),
    fileInputNoExtra("test2",label="",accept=".lmmm",buttonLabel=list(icon("folder"),"Normal upload button2"),width="200px"),
    downloadButton("test3",label="Normal download button3"),
    downloadButton("test4",label="Normal download button4")
  ),
  mainPanel()

))


server <- function(input, output, session) {

}

shinyApp(ui = ui, server = server)

Answer №1

You were so close! To perfect your code, just remember to include display: inline-block within the class = "input-group-btn" section. Here is how the revised version of fileInputNoExtra will appear:

fileInputNoExtra<-function(inputId, label, multiple = FALSE, accept = NULL, width = NULL, buttonLabel = "Browse...", placeholder = "No file selected"){

  restoredValue <- restoreInput(id = inputId, default = NULL)
  if (!is.null(restoredValue) && !is.data.frame(restoredValue)) {
    warning("Restored value for ", inputId, " has incorrect format.")
    restoredValue <- NULL
  }
  if (!is.null(restoredValue)) {
    restoredValue <- toJSON(restoredValue, strict_atomic = FALSE)
  }
  inputTag <- tags$input(id = inputId, name = inputId, type = "file", 
                         style = "display: none;", 
                         `data-restore` = restoredValue)
  if (multiple) 
    inputTag$attribs$multiple <- "multiple"
  if (length(accept) > 0)
    inputTag$attribs$accept <- paste(accept, collapse = ",")

  tags$label(class = "input-group-btn", type="button", style=if (!is.null(width)) paste0("width: ", validateCssUnit(width),";","padding-right: 5px; padding-bottom: 5px; display: inline-block;"),
             span(class = "btn btn-default btn-file",type="button", buttonLabel, inputTag, style=if (!is.null(width)) paste0("width: ", validateCssUnit(width),";","border-radius: 5px; padding-bottom: 5px;"))
  )
} 

By implementing this adjustment, you can achieve the desired outcomes as shown in the following images: https://i.sstatic.net/XGfie.png

and

https://i.sstatic.net/ahzJX.png

I hope this enhancement proves beneficial!

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

Could there be an issue with my website's bootstrap where badges are not being applied properly?

Currently, I am in the process of learning ReactJS and running into an issue where my bootstrap is not working within my .jsx file. Despite following a tutorial (MOSH) diligently and extensively researching on stack overflow, I have not been able to find a ...

Is there a way to customize the scrollbar color based on the user's preference?

Instead of hardcoding the scrollbar color to red, I want to change it based on a color variable provided by the user. I believe there are two possible solutions to this issue: Is it possible to assign a variable to line 15 instead of a specific color lik ...

Ensure your mobile device is age 13 or over before proceeding

I am developing a project with Next js. Here, I want to render a component if it is a mobile device. However, if I use the isMobileDevice value in jsx, I get the errors below. import useTranslation from "next-translate/useTranslation"; import isM ...

Unable to view images on Wordpress theme

I am currently facing an issue where some images in my asset folder are not displaying properly when I convert my HTML/CSS/JS template to Wordpress. The main problem is with the image that should show up when you first visit the website. Below is the CSS c ...

React Tabulator - custom header filter for select column - hide 'X' option

Is it possible to remove the 'x' option on header filters in react tabulator columns? The issue arises when users click the 'X' to clear a filter, as expected. However, if they then try to click on the same filter for another list item ...

Optimal approach for customizing the appearance of child components based on the parent component

I'm curious about the optimal method for styling child components based on their parent component. For instance, I want to design a list component that can be utilized in both a dropdown popup and a toolbar, each with its own unique style. There are ...

How can the end event of a custom CSS animation be bound using jQuery or JavaScript?

We are currently managing multiple animations on the same object and need to execute different actions once each animation is complete. At present, we listen for the webkitAnimationEnd event and use a complex if/then statement to handle each animation sep ...

CSS Transition - Troubleshooting my malfunctioning code

I seem to be facing a simple issue with my code. The following snippet does not work in Chrome or Firefox, as the transition property is not working properly. Instead of smoothly transitioning from blue to red when hovered over, the element immediately swi ...

When should CSS compression and combining / JS minification be performed - at runtime or during build time?

I need to find a way to compress, version (for caching reasons), and possibly combine our JS and CSS files. I've come across two main approaches so far: 1) During the build process: Using an MSBuild task or similar. 2) Dynamically at runtime: Through ...

Should font size, line height, and font-family be declared to the body before or after the CSS reset?

Let's say I am using the Eric Meyer Reset and I need to apply a style to the body element. body { font: 100%/1.5 "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif;*/ } Should I place this before or after the reset CSS? html, body, div, span, a ...

Using subscripts and superscripts in character vectors

I am looking to incorporate both Subscripts and Superscripts in my character vectors, with respect to the X and Y values on a plot. For instance, I want the X values to be superscripted and the Y values to be subscripted. Here is an illustration of the d ...

Troubleshooting a problem with the transition of the hamburger menu icon in SC

I'm encountering an issue with the transition property and attempting to utilize the all keyword. After including a fiddle, I can't seem to figure out if I've made a simple mistake or if there is something else going on. I have seen the all ...

Incorporating text sections into a div container and adjusting the width

Currently facing an issue with the canvas element on my project. <div id="app-container"> <div id="canvas-container"> <div id="canvas"></div> </div> </div> In the CSS stylesheet, the following styles ar ...

Is there a way for rainyday.js to utilize a CSS background image as its background?

I have a simple website with a fixed, full-sized background set using CSS. I am trying to incorporate rainyday.js to create a rain effect over the entire site, including the text. Currently, I am only able to get rainyday.js to display rain over a small s ...

Fixed position navbar toggler

Hey there! I currently have a centralized navbar layout for Desktop. However, my aim is to also center it on the mobile version. Basically, this navigation bar appears when scrolled downwards with icons like this. Therefore, I'm looking for assistan ...

Conversion of CSV data into JSON format parameter

I'm currently working on converting a CSV file to a JSON file. library(readr) data <- read_csv("6_items.csv") json_data <- toJSON(data, pretty=TRUE) View(json_data) write_json(json_data, "6_items.json" ) Which parameters do ...

What is the best way to display a poster image in a video element even if the aspect ratio of the poster image does not match the video element?

At this moment, the compatibility of this feature has been tested only in WebKit browsers. When a poster image is applied to a <video> element using the poster attribute, it appears before the user starts playing the video (default behavior). Howeve ...

Using jQuery to smoothly scroll to a specific class name

I am faced with an HTML code snippet that looks like this: <div data-stored="storenow" data-save="save" class="saveIcon" data-unique="game">Save</div> My intention is to use jQuery to scroll to the game number 456 as shown below. var contain ...

The functionality of BASE64 encoding in HTML appears to be malfunctioning

I have exhausted all options in my attempt to display an image using a base64 string, but none of them seem to be working. I have tested it on IE6,7, Firefox 3. Can someone please point out what is wrong with the code below? <head> <STYLE type ...

Is it possible to set a minimum width for browser resizing?

https://i.sstatic.net/0qhjT.png Looking at the image provided, I'm doing a comparison of the minimum resizable widths between my website and GitHub's. Is there a way to enforce a minimum width limit on my website similar to GitHub's? I&apo ...